CSS使用ul进行网页的多列布局
几天在用CSS写三列布局的时候突然想到的这样一个方法，这个想法自己都觉得有些疯狂，如果其中有什么不对的地方请各位不吝指教。 b a$t:^O$Ke nv[ P3Y#WQ|6h
当需要写一个三列布局的时候，一般情况下我会选择使用如下的DIV布局方式： Z&t;Z9J)A,B H I
[attach]19548[/attach]
使用这样的嵌套方式无疑可以使代码出错的概率减少很多，但同时这样的布局也略显复杂，对于后期的维护也略显不便。我们在布局导航时经常会使用到一个方法，那就是使用〈ul〉列表来进行布局，而导航可以形容为多列式的布局，既然如此，那么我们也就可以使用〈ul〉来进行页面的多列布局。 !T6j&[*Iz HP&D*~/q
[attach]19549[/attach]"?%y%L7l5O ^ J
~!UXsy KH
sDm"d^ FS
这是一个固定宽度的布局，也就是说流动性不强，流动性的布局目前还没有试验过，等有时间了再试验一下，下面贴上这个布局的代码：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]”>eR$m[K c+P
<html xmlns=”[url]http://www.w3.org/1999/xhtml[/url]”>~:Yaw1K:Jq
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>使用UL进行多列布局</title>
<style type=”text/css”>0cGI6c*~` Hc w
* {margin:0; padding:0;}0O#^v"[z2`BP}
body {8s6@~B4h3~'z H {
width:100%;
height:100%; S @:RP+Z(S `,b`
background:#ddedfb;
}
#mainContent {
width:600px;
margin:10px auto; mv%Tv4m
}i f Ly?
#header,#footer { hh,@Z r Su
background:#8AC7FA;
height:80px;+\"B k2f ^VlC q.L'oz
clear:both;jD9? G$iA0se
}
#footer {
clear:both;
padding-top:10px;bH}%x2m3x h;H)c ^8t
}%@W6@A;w0~/BmF8|
#content {1jv?/b.y ? d
height:300px;
margin:10px auto; [(UiVm4DK6W{:M
} e w?-g-P f h8G r f
#content ul { x9D8^E.D X-g#va Dvg
list-style:none;9}Q WKy ejn+V"G
height:100%;
}
#content ul li {
width:150px;
height:100%;'[#[#f3~Lt"m
background:#8AC7FA;!y bcb!]C
float:left;
}|[)tD0FCO.H9rP I
#content ul li#li2 { fANpY"I s2kHT#s*J
width:280px;
margin:0 10px;.q v%_7|1Rhe/w
}7B]qCo
#content ul li#li2 ul li {vtp m Be t6X
width:270px;
height:140px;
margin:5px;
background:#0581F0;
}
</style>
</head> P]:v]PrFt
D4k"V.i~ h/bu4]5|#B
<body>
<div id=”mainContent”>
<div id=”header”>这是头部</div>
<div id=”content”> u)\7I[7MM}!B
<ul>,SdJ3tw5l N(w
<li>这是左边</li>L"U4Mdq+^!n\B
<li id=”li2″>
<ul>
<li>这是中间的上部</li>
<li>这是中间的下部</li>
</ul>
</li>
<li>这是右边</li>Vf Z @_'Jc(n[
</ul>
</div>
<div id=”footer”>这是底部</div>C$C wR4c5B
</div>v'@.d]"ux
</body>iK X+v-M,M+V+u az;_
</html>
7X9_VO S~.X$\'~
这段代码在IE7及FF3下都能正常显示，其他浏览器未做测试，如果你有更好的方法不妨提出来。
页:
[1]