1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.5.1/build/cssreset/cssreset-min.css" />
7 <style type="text/css">
8 .cf:before, .cf:after { content: ""; display: table; }
9 .cf:after { clear: both; }
10 .cf { zoom: 1; }
11 /*辅助 用背景颜色区分布局模块 可删*/
12 .page { background-color: #CCC }
13 .hd { background-color: red; }
14 .bd { background-color: #0F3; }
15 .ft { height: 60px; background-color: #09F }
16 .main { background-color: #FF3 }
17 .sub { background-color: #60F }
18 .extra { background-color: #008000 }
19 /*布局*/
20 .page { width: 980px; margin: 0 auto; }
21 .hd { height: 50px; }
22 .bd { padding: 0 230px 0 190px; }
23 .main { float: left; width: 100% }
24 .sub { float: left; width: 190px; margin-left: -100%; position: relative; left: -190px; }
25 .extra { float: left; width: 230px; margin-left: -230px; position: relative; right: -230px; }
26 </style>
27 </head>
28
29 <body>
30 <div class="page">
31 <div class="hd">
32 <p>高度为50像素</p>
33 </div>
34 <div class="bd cf">
35 <div class="main">
36 <p>中间部分，记得清除浮动！这里的文章怎么是这样的呢，如果多添加文字，又会是什么样的呢？</p>
37 </div>
38 <div class="sub">这里基本列表出相关的信息等。这里的字多加一些会应该后面的背景吗？</div>
39 <div class="extra">
40 <p>扩展部分，广告等这类的。</p>
41 </div>
42 </div>
43 <div class="ft">
44 <p>底部信息。</p>
45 </div>
46 </div>
47 </body>
48 </html>
