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 #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>

　　最终实现效果如图: