ul列表標(biāo)記設(shè)計(jì)網(wǎng)頁多列布局

2024-08-30 08:32:50

字體：大中小

供稿：網(wǎng)友

幾天在用css寫三列布局的時(shí)候突然想到的這樣一個(gè)方法，這個(gè)想法自己都覺得有些瘋狂，如果其中有什么不對的地方請各位不吝指教。

　　當(dāng)需要寫一個(gè)三列布局的時(shí)候，一般情況下我會選擇使用如下的div布局方式：

圖1 div布局

　　使用這樣的嵌套方式無疑可以使代碼出錯(cuò)的概率減少很多，但同時(shí)這樣的布局也略顯復(fù)雜，對于后期的維護(hù)也略顯不便。我們在布局導(dǎo)航時(shí)經(jīng)常會使用到一個(gè)方法，那就是使用〈ul〉列表來進(jìn)行布局，而導(dǎo)航可以形容為多列式的布局，既然如此，那么我們也就可以使用〈ul〉來進(jìn)行頁面的多列布局。

圖2 div布局

這是一個(gè)固定寬度的布局，也就是說流動(dòng)性不強(qiáng)，流動(dòng)性的布局目前還沒有試驗(yàn)過，等有時(shí)間了再試驗(yàn)一下，下面貼上這個(gè)布局的代碼：

<!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>使用ul進(jìn)行多列布局</title>
<style type=”text/css”>
* {margin:0; padding:0;}
body {
width:100%;
height:100%;
background:#ddedfb;
}
#maincontent {
width:600px;
margin:10px auto;
}
#header,#footer {
background:#8ac7fa;
height:80px;
clear:both;
}
#footer {
clear:both;
padding-top:10px;
}
#content {
height:300px;
margin:10px auto;
}
#content ul {
list-style:none;
height:100%;
}
#content ul li {
width:150px;
height:100%;
background:#8ac7fa;
float:left;
}
#content ul li#li2 {
width:280px;
margin:0 10px;
}
#content ul li#li2 ul li {
width:270px;
height:140px;
margin:5px;
background:#0581f0;
}
</style>
</head>

<body>
<div id=”maincontent”>
<div id=”header”>這是頭部</div>
<div id=”content”>
<ul>
<li>這是左邊</li>
<li id=”li2′>
<ul>
<li>這是中間的上部</li>
<li>這是中間的下部</li>
</ul>
</li>
<li>這是右邊</li>
</ul>
</div>
<div id=”footer”>這是底部</div>
</div>
</body>
</html>