三栏布局是目前最常见的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。 绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”（它可以根据网站源码用户浏览器窗口宽度自动伸缩）布局的网页。 现在，我们都开始抛弃基于表格的布局技术，许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难；但是得到液态布局就有点困难了。因此，本文介绍一种用CSS的float和clear属性来获得三栏液态布局的方法。 基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器网站源码窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏div的宽度并不固定，因此它网站整站源码可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。 请看看用本文所介绍的技术进行三栏布局的例子。这个例子用鲜艳的颜色来区分布局的各个div。下面是XHTML代码： " Z: p$ n& `. c; E' K) M. A
<h1>Header</h1> 7 m# h7 Z2 A1 l1 m& p6 s
Port side text...
3 D5 I0 J0 ]; D# L1 t' lStarboard side text...
2 ]# d0 s# }# W6 `Middle column text...
. }6 l X7 k& ^7 V% i; v& g9 G5 AFooter text...
* i$ w1 E- p4 D* K; v- K8 K% N
/ ~1 T4 x' }$ B" H5 f+ ?/ m) qmargin: 0px;
. U1 y. ?) l# r+ E1 Z
padding: 0px; : Y( [4 Q! @' m
clear: both; / k4 p `" G5 j$ l- v
height: 50px; 7 w# V8 E/ N' \8 x
background-color: aqua;
+ |! M+ m( R. V% A; `9 ^3 _padding: 1px;
! c5 n8 k2 K, F4 w2 a$ |
float: left;
4 D/ l! _, F' F/ s; T( Nwidth: 150px;
i2 a) |! t+ a( \background-color: red;
; l9 G0 @% o3 u3 M _
float: right;
6 L2 e/ ]% ~, A' ^width: 150px;
* c! D% E1 x6 [$ z! C& P7 N9 y. M) m
5 T- n/ w% r" @% i7 C, M9 ?background-color: green;
4 x8 j; S; ?' W ^* Tpadding: 0px 160px 5px 160px;
# O2 j& Q+ Q, p0 _* A2 q
margin: 0px; 9 x/ R: y1 p% }) n3 f! j
background-color: silver; 8 B- u& G( D6 P4 d! i9 c4 v
clear: both;
: @, z8 \7 A4 L! X0 Obackground-color: yellow;
| 
粤公网安备44152102000001号 
发表于 2009-4-5 15:37:28