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

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

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

　　我們看下面的XHTML代碼：

示例代碼 [www.hl5o.cn]

<ul><span>www.hl5o.cn</span>
<li><a href="http://www.hl5o.cn" target="_blank">Div CSS教程</a></li>
<li><a href="http://www.hl5o.cn" target="_blank">CSS布局實例</a></li>
<li><a href="http://www.hl5o.cn" target="_blank">CSS在線手冊</a></li>
</ul>
<ul><span>www.hl5o.cn</span>
<li><a href="http://www.hl5o.cn" target="_blank">Div CSS教程</a></li>
<li><a href="http://www.hl5o.cn" target="_blank">CSS布局實例</a></li>
<li><a href="http://www.hl5o.cn" target="_blank">CSS在線手冊</a></li>
</ul>

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

示例代碼 [www.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)行了全局定義；然后定義了鏈接了樣式，請注重我們對a的定義，是設(shè)為塊元素，并設(shè)置了下邊框線以及寬度等。接著我們定義了無序列表UL的樣式，請注重ul的定位以及內(nèi)邊距。最后我們定義了ul中span的樣式。整個設(shè)置完成。

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

代碼調(diào)試框 [www.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>www.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>www.hl5o.cn</span>
<li><a href="http://www.hl5o.cn" _fcksavedurl="http://www.hl5o.cn" target="_blank">Div CSS教程</li>
<li><a href="http://www.hl5o.cn" _fcksavedurl="http://www.hl5o.cn" target="_blank">CSS布局實例</li>
<li><a href="http://www.hl5o.cn" _fcksavedurl="http://www.hl5o.cn" target="_blank">CSS在線手冊</li>
</ul>
<ul><span>www.hl5o.cn</span>
<li><a href="http://www.hl5o.cn" _fcksavedurl="http://www.hl5o.cn" target="_blank">Div CSS教程</li>
<li><a href="http://www.hl5o.cn" _fcksavedurl="http://www.hl5o.cn" target="_blank">CSS布局實例</li>
<li><a href="http://www.hl5o.cn" _fcksavedurl="http://www.hl5o.cn" target="_blank">CSS在線手冊</li>
</ul>
</body>
</html>

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

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