創(chuàng)力網(wǎng)站管理系統(tǒng)-如何用CSS制作橫向菜單

導(dǎo)航：返回上一頁

創(chuàng)力網(wǎng)站管理系統(tǒng)-如何用CSS制作橫向菜單

• 建立一個(gè)無序列表 代碼是：

<ul>
<li><a href="1">首頁</a></li>
<li><a href="2">超級鏈接</a></li>
<li><a href="3">超級鏈接</a></li>
<li><a href="4">超級鏈接</a></li>
<li><a href="5">超級鏈接</a></li>
<li><a href="6">超級鏈接</a></li>
</ul> 
效果是： 
首頁  
超級鏈接 
超級鏈接 
超級鏈接 
超級鏈接 
超級鏈接 

• 隱藏li的默認(rèn)樣式

因?yàn)椴藛瓮ǔ６疾恍枰猯i默認(rèn)的圓點(diǎn)，我們給UL定義一個(gè)樣式來消除這些圓點(diǎn)。

當(dāng)然，為了更好的控制整個(gè)菜單，我們把菜單放在一個(gè)div里。頁面代碼變成：

<div class="test"> <ul>
<li><a href="1">首頁</a></li>
<li><a href="2">超級鏈接</a></li>
<li><a href="3">超級鏈接</a></li>
<li><a href="4">超級鏈接</a></li>
<li><a href="5">超級鏈接</a></li>
<li><a href="6">超級鏈接</a></li>
</ul> </div> 

CSS定義為：

.test ul{list-style:none;} 
說明：“.test ul”表示我要定義的樣式將作用在test的層里的ul標(biāo)簽上。

現(xiàn)在的效果是沒有圓點(diǎn)了：

首頁
超級鏈接 
超級鏈接 
超級鏈接 
超級鏈接
超級鏈接 

• 關(guān)鍵的浮動

這里是菜單變成橫向的關(guān)鍵，我們給li元素加上一個(gè)“float:left;”屬性，讓每個(gè)li浮動在前面一個(gè)li的左面。

CSS定義為：

.test li{float:left;} 
效果是：

首頁超級鏈接超級鏈接超級鏈接山水天下超級鏈接 
看，菜單變橫向了。就這么簡單！下面需要做的就是優(yōu)化細(xì)節(jié)了。

• 調(diào)整寬度

菜單都擠在一起不好看怎么辦？我們來調(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就會根據(jù)div的寬度自動換行，例如定義了div寬350px，6個(gè)li的總寬度是600px，一行排不下就自動變成兩行：

.test{width:350px;} 
效果是：

首頁       超級鏈接       超級鏈接 

超級鏈接       超級鏈接       超級鏈接 

• 設(shè)置基本鏈接效果

接下來，我們通過CSS來設(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;}

*將鏈接以塊級元素顯示

有朋友問，菜單鏈接的背景色為什么沒有填滿整個(gè)li的寬度？恩，解決的方法很簡單，在a的樣式定義中增加display:block，使鏈接以塊級元素顯示。

同時(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;} 
效果變成：

首頁 超級鏈接 超級鏈接 超級鏈接 超級鏈接 超級鏈接 
這樣就漂亮多了吧。

現(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: #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;} 
頁面的完整代碼是：

<div class="test">
<ul>
<li><a href="1">首頁</a></li>
<li><a href="2">超級鏈接</a></li>
<li><a href="3">超級鏈接</a></li>
<li><a href="4">超級鏈接</a></li>
<li><a href="5">超級鏈接</a></li>
<li><a href="6">超級鏈接</a></li>
</ul>
</div> 
好了，主要步驟就是這7步，立刻拷貝和修改代碼試試，你也可以用CSS做橫向菜單了！

參考來源

• 參考來源