作者：阿捷 2005-4-11 16:54:52
盡管在我的網(wǎng)站和文章里都有提到CSS制作菜單的方法，但很多初學(xué)者還是不太清楚如何實(shí)現(xiàn)，以及實(shí)現(xiàn)原理，我想專門寫一篇詳細(xì)教程會(huì)對(duì)大家比較有幫助。
我們先來(lái)看一個(gè)菜單的例子，最終效果是:
然后我們來(lái)詳細(xì)講解步驟
第一步：建立一個(gè)無(wú)序列表
我們先建立一個(gè)無(wú)序列表，來(lái)建立菜單的結(jié)構(gòu)。代碼是：
<ul>
<li><a href="1">首頁(yè)</a></li>
<li><a href="2">產(chǎn)品介紹</a></li>
<li><a href="3">服務(wù)介紹</a></li>
<li><a href="4">技術(shù)支持</a></li>
<li><a href="5">立刻購(gòu)買</a></li>
<li><a href="6">聯(lián)系我們</a></li>
</ul>
效果是：
第二步：隱藏li的默認(rèn)樣式
因?yàn)榭雌饋?lái)不是很好看，菜單通常都不需要li默認(rèn)的圓點(diǎn)，我們給UL定義一個(gè)樣式來(lái)消除這些圓點(diǎn)。
當(dāng)然，為了更好的控制整個(gè)菜單，我們把菜單放在一個(gè)div里。頁(yè)面代碼變成：
<div class="test"> <ul>
<li><a href="1">首頁(yè)</a></li>
<li><a href="2">產(chǎn)品介紹</a></li>
<li><a href="3">服務(wù)介紹</a></li>
<li><a href="4">技術(shù)支持</a></li>
<li><a href="5">立刻購(gòu)買</a></li>
<li><a href="6">聯(lián)系我們</a></li>
</ul> </div>
CSS定義為：
.test ul{list-style:none;}
說(shuō)明：“.test ul”表示我要定義的樣式將作用在test的層里的ul標(biāo)簽上。
現(xiàn)在的效果是沒(méi)有圓點(diǎn)了：
第三步：關(guān)鍵的浮動(dòng)
這里是菜單變成橫向的關(guān)鍵，我們給li元素加上一個(gè)“float:left;”屬性，讓每個(gè)li浮動(dòng)在前面一個(gè)li的左面。
CSS定義為：
.test li{float:left;}
效果是：
看，菜單變橫向了。就這么簡(jiǎn)單！下面需要做的就是優(yōu)化細(xì)節(jié)了。
第四步：調(diào)整寬度
菜單都擠在一起不好看怎么辦？我們來(lái)調(diào)節(jié)li的寬度。
在CSS中添加定義width:100px指定一個(gè)li的寬度是100px，當(dāng)然你可以根據(jù)你的需要調(diào)整數(shù)值：
.test li{float:left;width:100px;}
效果是：
如果我們同時(shí)定義外面div的寬度，li就會(huì)根據(jù)div的寬度自動(dòng)換行，例如定義了div寬350px，6個(gè)li的總寬度是600px，一行排不下就自動(dòng)變成兩行：
.test{width:350px;}
效果是：
第五步：設(shè)置基本鏈接效果
接下來(lái)，我們通過(guò)CSS來(lái)設(shè)置鏈接的樣式，分別定義:link、:visited、:hover的狀態(tài)
.test a:link{color:#666;background:#CCC;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}
效果是：
第六步：將鏈接以塊級(jí)元素顯示
有朋友問(wèn)，菜單鏈接的背景色為什么沒(méi)有填滿整個(gè)li的寬度？恩，解決的方法很簡(jiǎn)單，在a的樣式定義中增加display:block，使鏈接以塊級(jí)元素顯示。
同時(shí)我們微調(diào)了如下細(xì)節(jié)：
- 用text-align:center將菜單文字居中；
- 用height:30px增加背景的高度；
- 用margin-left:3px使每個(gè)菜單之間空3px距離；
- 用line-height:30px;定義行高，使鏈接文字縱向居中；
CSS定義象這樣：
.test a{display:block；text-align:center;height:30px;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
效果變成：
這樣就漂亮多了吧。
第七步：定義背景圖片
我們通常都會(huì)在每個(gè)鏈接前加一個(gè)小圖標(biāo)，這樣導(dǎo)航更清楚。CSS是采用定義li的背景圖片來(lái)實(shí)現(xiàn)的：
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
說(shuō)明：“background:url(arrow_off.gif) #CCC no-repeat 5px 12px;”這句代碼是一個(gè)CSS縮寫，表示背景圖片是arrow_off.gif；背景顏色是#CCC；背景圖片不重復(fù)"no-repeat"，背景圖片的位置是左邊距5px、上邊距12px；
默認(rèn)狀態(tài)下，圖標(biāo)為arrow.off.gif，當(dāng)鼠標(biāo)移動(dòng)到鏈接上，圖標(biāo)變?yōu)閍rrow_on.gif
效果變成：
現(xiàn)在css的完整代碼是：
.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
頁(yè)面的完整代碼是：
<div class="test">
<ul>
<li><a href="1">首頁(yè)</a></li>
<li><a href="2">產(chǎn)品介紹</a></li>
<li><a href="3">服務(wù)介紹</a></li>
<li><a href="4">技術(shù)支持</a></li>
<li><a href="5">立刻購(gòu)買</a></li>
<li><a href="6">聯(lián)系我們</a></li>
</ul>
</div>
好了，主要步驟就是這7步，立刻拷貝和修改代碼試試，你也可以用CSS做橫向菜單了！