如何用CSS制作縱向?qū)Ш讲藛�？_Div+CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　
　　應(yīng)用Web標(biāo)準(zhǔn)進(jìn)行網(wǎng)頁(yè)制作以后，我們通常用ul無(wú)序列表標(biāo)簽來(lái)構(gòu)建菜單。我們以前討論過(guò)很多橫向菜單的制作，在前面的文章中，我們講述了《用“ul li”及css制作韓國(guó)風(fēng)格菜單》，是一種縱向的導(dǎo)航菜單。我們今天來(lái)看另一種縱向?qū)Ш讲藛�，我們不斷的總結(jié)經(jīng)驗(yàn)、提高編碼水平，才能在實(shí)際操作中更加的得心應(yīng)手。

　　我們看下面的XHTML代碼：

示例代碼 [m.hl5o.cn]

<ul><span>m.hl5o.cn</span>
<li><a href="http://m.hl5o.cn" target="_blank">Div CSS教程</a></li>
<li><a href="http://m.hl5o.cn" target="_blank">CSS布局實(shí)例</a></li>
<li><a href="http://m.hl5o.cn" target="_blank">CSS在線手冊(cè)</a></li>
</ul>
<ul><span>m.hl5o.cn</span>
<li><a href="http://m.hl5o.cn" target="_blank">Div CSS教程</a></li>
<li><a href="http://m.hl5o.cn" target="_blank">CSS布局實(shí)例</a></li>
<li><a href="http://m.hl5o.cn" target="_blank">CSS在線手冊(cè)</a></li>
</ul>

　　這是兩個(gè)無(wú)序列表，每一個(gè)列表中有三個(gè)列表項(xiàng)，即是導(dǎo)航菜單的內(nèi)容。
　　我們用CSS對(duì)此進(jìn)行樣式的定義，讓它按我們的要求顯示出來(lái)，我們看下面的CSS代碼：

示例代碼 [m.hl5o.cn]

*{ padding:0; margin:0; font-size:12px; line-height:1.7;
font-family:Verdana, "宋體", Arial; list-style:none;}
a:link,a:visited{background:#D3DFFA; padding-left:23px; color:#036;text-decoration: none;}
a:hover,a:active{color:#000;background-color: #ADC2F5;}
a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; }
ul{ background:#fff; width:150px; border:1px solid #06f;
margin:0px 20px -1px 20px; padding:1px;}
span{ display:block;background:#036; padding-left:13px; color:#fff; }

　　首先我們進(jìn)行了全局定義；然后定義了鏈接了樣式，請(qǐng)注重我們對(duì)a的定義，是設(shè)為塊元素，并設(shè)置了下邊框線以及寬度等。接著我們定義了無(wú)序列表UL的樣式，請(qǐng)注重ul的定位以及內(nèi)邊距。最后我們定義了ul中span的樣式。整個(gè)設(shè)置完成。

　　我們來(lái)看看下面的縱向?qū)Ш讲藛涡Ч?br />

代碼調(diào)試框 [m.hl5o.cn]

<!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>m.hl5o.cn</title>
<style>
*{ padding:0; margin:0; font-size:12px; line-height:1.7; font-family:Verdana, "宋體", Arial; list-style:none;}
a:link,a:visited{background:#D3DFFA; padding-left:23px; color:#036;text-decoration: none;}
a:hover,a:active{color:#000;background-color: #ADC2F5;}
a{display:block;border-bottom:1px solid #fff; padding-left:10px; width:127px; }
ul{ background:#fff; width:150px; border:1px solid #06f; margin:0px 20px -1px 20px; padding:1px;}
span{ display:block;background:#036; padding-left:13px; color:#fff; }
</style>
</head>
<body>
<ul><span>m.hl5o.cn</span>
<li><a href="http://m.hl5o.cn" _fcksavedurl="http://m.hl5o.cn" target="_blank">Div CSS教程</li>
<li><a href="http://m.hl5o.cn" _fcksavedurl="http://m.hl5o.cn" target="_blank">CSS布局實(shí)例</li>
<li><a href="http://m.hl5o.cn" _fcksavedurl="http://m.hl5o.cn" target="_blank">CSS在線手冊(cè)</li>
</ul>
<ul><span>m.hl5o.cn</span>
<li><a href="http://m.hl5o.cn" _fcksavedurl="http://m.hl5o.cn" target="_blank">Div CSS教程</li>
<li><a href="http://m.hl5o.cn" _fcksavedurl="http://m.hl5o.cn" target="_blank">CSS布局實(shí)例</li>
<li><a href="http://m.hl5o.cn" _fcksavedurl="http://m.hl5o.cn" target="_blank">CSS在線手冊(cè)</li>
</ul>
</body>
</html>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　大家可以試著修改上面的代碼并運(yùn)行查看效果，不斷的試驗(yàn)與思考才會(huì)進(jìn)步的更快。：）
　　