查看完整版本: 用CSS的float属性创建三栏布局网页的方法

迷失的亲 2007-11-24 12:21

用CSS的float属性创建三栏布局网页的方法

三栏布局是最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。
$d,A pz0s*]
D:@0p;|;l 　　绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。
m8Is9Q3h2zx$W
Z$o3{;q9[ n 　　基本方法f}1x}T6[ \Y%t

)`ne9S']D _*O1A @5g 　　基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充(padding)属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏(左栏或者右栏)的底端也是这样。a*J:~#W8xT3^
8S"Q8i U EQ$xF3[
　　三栏布局的一个例子
;t7}7S$B@ IC$b Y!JUCy{
　　XHTML代码：[code]<body> g6_R+CfIa"G9ih p
<div id="header">
m0N u aO     <h1>Header</h1>
v)}!O"};i7?v(k)P </div>
1k3ru)Y3d| <div id="left">
3dZiWk:D     Port side text...
*Qmg)iu `]a </div>
5w EZH8@n$r <div id="right"> 9p I xQ8Y B3L
    Starboard side text...
6iO g-R!dd </div>
&q+Q5KzX| <div id="middle"> 4h6]/n6@7o] k
    Middle column text... ml:e7A;f$}x
</div> IIE b+e.UT \
<div id="footer"> ZvZ'c x{4Q,]
    Footer text...
W"uu+{*vs)un9_B </div> 3v7O%m Y7ng;\
</body>[/code]下面是CSS代码：[code]body {
w`&J R9W.~:N     margin: 0px; yFb m EO]K
    padding: 0px; +aOC B1?p+O-i
}
-w:c9Py ^[As div#header { :t#XO2U.ZSW,o
    clear: both;
^u&?!HFs     height: 50px;
_/O PqW(s'Y(|     background-color: aqua;
e tuV}C&UI     padding: 1px;
!\oF+prq)V } GHL,Rc/m?d(p0[f
div#left {
@5?4khR     float: left; Ydz(|p0Qb
    width: 150px; w Xgn@Y:q"YN R
    background-color: red;
vIQ6_h:FK } BW@$Xb yw(q
div#right {
f3YO2F-^:b!Re-k     float: right;
Jj8F8~V     width: 150px;
Eu!ATN9OV}$x     background-color: green; |;X!Oy1zm,B*A\
}
ibwVc8wW div#middle { %k }oS9U&wx)W
    padding: 0px 160px 5px 160px;
[0s c\vk"{Z1}     margin: 0px;
q-E1eQo#r3Gqrwj-@YL     background-color: silver;
6](]R/d)m&t-?-P }
o*Q W[1T ^or8P div#footer { #E4i a![)v+h4S
    clear: both; o7dC k9[^FN
    background-color: yellow; "akQ%k\9\V
}[/code]
页: [1]
查看完整版本: 用CSS的float属性创建三栏布局网页的方法