css界面排版实例代码,CSS排版页面实例代码

创建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排版页面

最终实现效果如图: