你的位置:首页 > 网页设计

[网页设计]CSS排版页面


创建CSS文件如下:

 1 @charset "utf-8"; 2 /* CSS Document */ 3 *{ 4   margin:0px; 5   padding:0px; 6   border:0px; 7 } 8 #box{ 9   width:1100px;10   height:760px;11   margin:auto;12 }13 #hen14 {15   width:1100px;16   height:160px;17   background-color:#936;18 }19 #zuo{20   width:250px;21   height:500px;22   margin-top:10px;23   background-color:#03C;24   float:left;25   margin-bottom:10px;26 }27 #zhong-1{28   width:262px;29   height:300px;30   margin-top:10px;31   margin-left:10px;32   float:left;33   background-color:#000;34 }35 #zhong-2{36   width:262px;37   height:300px;38   margin-top:10px;39   margin-left:10px;40   float:left;41   background-color:#000;42 }43 #xia{44   width:544px;45   height:190px;46   background-color:#03C;47   margin-top:10px;48   float:left;49   margin-bottom:10px;50 }51 #you{52   width:295px;53   height:500px;54   margin-left:10px;55   margin-top:10px;56   background-color:#3F6;57   float:right;58   margin-bottom:10px;59 }60 #dibu61 {62   width:1100px;63   height:50px;64   margin-top:10px;65   background-color:#CF3;66   clear:both;67 }

html文件如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html 

  最终实现效果如图: