佳木斯湛栽影视文化发展公司
主頁 > 知識庫 > ul列表標記設(shè)計網(wǎng)頁多列布局

ul列表標記設(shè)計網(wǎng)頁多列布局
熱門標簽：百度競價點擊價格的計算公式 阿里云 使用U盤裝系統(tǒng) 網(wǎng)站建設(shè) 美圖手機 智能手機 檢查注冊表項 硅谷的囚徒呼叫中心
幾天在用CSS寫三列布局的時候突然想到的這樣一個方法，這個想法自己都覺得有些瘋狂，如果其中有什么不對的地方請各位不吝指教。
　　當需要寫一個三列布局的時候，一般情況下我會選擇使用如下的DIV布局方式：
圖1 DIV布局
　　使用這樣的嵌套方式無疑可以使代碼出錯的概率減少很多，但同時這樣的布局也略顯復(fù)雜，對于后期的維護也略顯不便。我們在布局導航時經(jīng)常會使用到一個方法，那就是使用〈ul〉列表來進行布局，而導航可以形容為多列式的布局，既然如此，那么我們也就可以使用〈ul〉來進行頁面的多列布局。
圖2 DIV布局
這是一個固定寬度的布局，也就是說流動性不強，流動性的布局目前還沒有試驗過，等有時間了再試驗一下，下面貼上這個布局的代碼：

<!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進行多列布局</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下都能正常顯示，其他瀏覽器未做測試，如果你有更好的方法不妨提出來。

標簽：懷化 山南 賀州 煙臺 通遼 湘潭 湖北 黃山

巨人網(wǎng)絡(luò)通訊聲明：本文標題《ul列表標記設(shè)計網(wǎng)頁多列布局》，本文關(guān)鍵詞  ；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼

    • 電話咨詢

    • 400-1100-266
    红原县| 广平县| 博客| 商水县| 祁阳县| 奉新县| 英吉沙县| 巫溪县| 和平县| 武隆县| 扎赉特旗| 麻阳| 阜新市| 江达县| 新余市| 元谋县| 顺义区| 东光县| 漳浦县| 荔波县| 呼图壁县| 靖宇县| 大英县| 墨竹工卡县| 临朐县| 无为县| 右玉县| 静海县| 和政县| 巩留县| 广安市| 新建县| 呼和浩特市| 高台县| 长汀县| 左权县| 南丹县| 藁城市| 原平市| 濮阳县| 兴安县|