CSS使用ul進(jìn)行網(wǎng)頁(yè)的多列布局_Web標(biāo)準(zhǔn)教程
幾天在用CSS寫(xiě)三列布局的時(shí)候突然想到的這樣一個(gè)方法,這個(gè)想法自己都覺(jué)得有些瘋狂,如果其中有什么不對(duì)的地方請(qǐng)各位不吝指教。
當(dāng)需要寫(xiě)一個(gè)三列布局的時(shí)候,一般情況下我會(huì)選擇使用如下的DIV布局方式:
使用這樣的嵌套方式無(wú)疑可以使代碼出錯(cuò)的概率減少很多,但同時(shí)這樣的布局也略顯復(fù)雜,對(duì)于后期的維護(hù)也略顯不便。我們?cè)诓季謱?dǎo)航時(shí)經(jīng)常會(huì)使用到一個(gè)方法,那就是使用〈ul〉列表來(lái)進(jìn)行布局,而導(dǎo)航可以形容為多列式的布局,既然如此,那么我們也就可以使用〈ul〉來(lái)進(jìn)行頁(yè)面的多列布局。
這是一個(gè)固定寬度的布局,也就是說(shuō)流動(dòng)性不強(qiáng),流動(dòng)性的布局目前還沒(méi)有試驗(yàn)過(guò),等有時(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>
這段代碼在IE7及FF3下都能正常顯示,其他瀏覽器未做測(cè)試,如果你有更好的方法不妨提出來(lái)。
- Web標(biāo)準(zhǔn):需要正確的使用H1~ H6標(biāo)簽
- 五個(gè)WEB標(biāo)準(zhǔn)中必須注意的地方
- 做到結(jié)構(gòu)(XHTML),表現(xiàn)(CSS),行為(JavaScript)的分離
- CSS標(biāo)準(zhǔn):HTML標(biāo)簽元素的關(guān)閉
- Web標(biāo)準(zhǔn)之路 勿使用W3C廢棄的元素
- CSS布局 聲明文檔類型描述(DTD)
- DIV CSS\讓搜索引擎蜘蛛不再累
- 用XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)頁(yè)
- XHTML+CSS創(chuàng)建基于Web標(biāo)準(zhǔn)的網(wǎng)站
- DIV+CSS對(duì)SEO的幫助
- 淺析什么是Web標(biāo)準(zhǔn) 及其前景
- CSSer新手寄語(yǔ):開(kāi)始標(biāo)準(zhǔn)之路
Web標(biāo)準(zhǔn)教程Rss訂閱Div+Css教程搜索
Web標(biāo)準(zhǔn)教程推薦
- 網(wǎng)站首頁(yè)head區(qū)代碼規(guī)范
- CSS開(kāi)發(fā)輔助工具:Internet Explorer Developer Toolbar
- 什么人需要學(xué)習(xí)、適合學(xué)習(xí)WEB標(biāo)準(zhǔn)?
- 采訪Eric Meyer的10個(gè)問(wèn)題
- WEB2.0標(biāo)準(zhǔn)教程:第十二天 校驗(yàn)及常見(jiàn)錯(cuò)誤
- HTML4.0中的新屬性:rel
- 表格對(duì)決CSS--一場(chǎng)生死之戰(zhàn)
- Web標(biāo)準(zhǔn):保持HTML、CSS符合標(biāo)準(zhǔn)
- 常用DIV+CSS網(wǎng)頁(yè)制作布局技術(shù)技巧
- word-wrap同word-break的區(qū)別
猜你也喜歡看這些
- 相關(guān)鏈接:
- 教程說(shuō)明:
Web標(biāo)準(zhǔn)教程-CSS使用ul進(jìn)行網(wǎng)頁(yè)的多列布局。