创建CSS文件如下:@charset "utf-8";
/* CSS Document */
*{
margin:0px;
padding:0px;
border:0px;
}
#box{
width:1100px;
height:760px;
margin:auto;
}
#hen
{
width:1100px;
height:160px;
background-color:#936;
}
#zuo{
width:250px;
height:500px;
margin-top:10px;
background-color:#03C;
float:left;
margin-bottom:10px;
}
#zhong-1{
width:262px;
height:300px;
margin-top:10px;
margin-left:10px;
float:left;
background-color:#000;
}
#zhong-2{
width:262px;
height:300px;
margin-top:10px;
margin-left:10px;
float:left;
background-color:#000;
}
#xia{
width:544px;
height:190px;
background-color:#03C;
margin-top:10px;
float:left;
margin-bottom:10px;
}
#you{
width:295px;
height:500px;
margin-left:10px;
margin-top:10px;
background-color:#3F6;
float:right;
margin-bottom:10px;
}
#dibu
{
width:1100px;
height:50px;
margin-top:10px;
background-color:#CF3;
clear:both;
}
html文件如下:
CSS排版页面最终实现效果如图: