一个简单的网页布局
2,474 阅读
<img src="http://www.datalearner.com/resources/blog_images/2416bf27-1a3e-4f86-b003-d0157d35a6a7.png" alt="" style="max-width: 100%; height: auto; border-radius: 0.5rem; margin: 1rem auto; display: block;" />
<style type="text/css" media="screen">
*{
margin: 0;
padding: 0;
}
.header{
width: 970px;
height: 103px;
margin: 0 auto;/*这个语句表示居中*/
}
.logo{
width: 277px;
height: 103px;
float: left;
margin: 0 auto;
background-color: red;
}
.login{
width: 137px;
height: 49px;
float: right;
background-color: yellowgreen;
margin-bottom: 8px;
}
.mulu{
width: 679px;
height: 46px;
float: right;
background-color: yellowgreen;
}
.content{
width: 970px;
height: 435px;
margin: 0 auto;;
margin-top:10px;
margin-bottom: 10px;
}
.ct1{
width: 310px;
height: 435px;
float: left;
background-color: yellow;
}
.ct2{
width: 190px;
height: 401px;
float: right;
background-color: pink;
margin-bottom: 10px;
margin-left: 10px;
}
.ct3{
width: 450px;
height: 240px;
float: right;
background-color: skyblue;
margin-bottom: 10px;
}
.ct4{
width: 450px;
height: 110px;
float: right;
background-color: skyblue;
margin-bottom: 10px;
}
.ct5{
width: 450px;
height: 30px;
float: right;
background-color: skyblue;
}
.ct6{
width: 650px;
height: 25px;
float: right;
background-color: yellowgreen;
}
.botton{
width: 970px;
height: 35px;
margin: 0 auto;
background-color: blue;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class=>
<div class=>logo</div>
<div class=>login</div>
<div class=>导航栏</div>
</div>
<!-- 主体 -->
<div class=>
<div class=>内容</div>
<div class=>内容</div>
<div class=>内容</div>
<div class=>内容</div>
<div class=>内容</div>
<div class=>内容</div>
</div>
<!-- 底部 -->
<div class=>网站声明</div>
</body>
