网页布局模板
·css部分
<style>
.header{
width: 970px;
height: 80px;
margin: 0 auto;
margin-bottom: 10px;/*要写在margin后面*/
}
.header .logo{
float: left;
width: 270px;
height: 80px;
background-color: #ffefd5;
}
.header .language{
float: right;
width: 137px;
height: 30px;
background-color: #ffdab9;
margin-bottom: 8px;
}
.header .nav{
float: right;
width: 680px;
height: 42px;
background-color: #fff8dc;
}
.content{
width: 970px;
height: 435px;
margin: 0 auto;
}
.content .ad{
float: left;
width: 310px;
height: 435px;
background-color: #eed5b7;
}
.content .rightpart{
float: left;
width: 650px;
height: 435px;
margin-left:10px;
}
.content .rightpart .up{
width: 650px;
height: 400px;
}
.content .rightpart .link{
width: 650px;
height: 25px;
margin-top:10px;
background-color: #fffacd;
}
.content .rightpart .up .up_1{
float: left;
width: 450px;
height: 400px;
margin-right: 10px;
}
.content .rightpart .up .gallary{
float: left;
width: 190px;
height: 400px;
background-color: #ffe4e1;
}
.content .rightpart .up .up_1 .news{
width: 450px;
height: 240px;
background-color: #ffc1c1;
margin-bottom: 10px;
}
.content .rightpart .up .up_1 .info{
width: 450px;
height: 110px;
background-color: #fff0f5;
margin-bottom: 10px;
}
.content .rightpart .up .up_1 .hot{
width: 450px;
height: 30px;
background-color: #eeb4b4;
}
.footer{
width: 970px;
height: 35px;
background-color: #eecfa1;
margin: 0 auto;
margin-top:10px;
}
</style>
·div部分
<body>
<div class="header">
<div class="logo"></div>
<div class="language"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="ad"></div>
<div class="rightpart">
<div class="up">
<div class="up_1">
<div class="news"></div>
<div class="info"></div>
<div class="hot"></div>
</div>
<div class="gallary"></div>
</div>
<div class="link"></div>
</div>
</div>
<div class="footer"></div>
</body>
·布局成品