创建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 #hen 14 { 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 #dibu 61 { 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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS排版页面</title>
<link href="css/63301.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box">
<div id="hen"></div>
<div id="zuo"></div>
<div id="zhong-1"></div>
<div id="zhong-2"></div>
<div id="you"></div>
<div id="xia"></div>
<div id="dibu"></div>
</div>
</body>
</html>
最终实现效果如图:
