创建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>
最终实现效果如图:
时间： 2024-08-30 09:57:22