css|菜單 作者：阿捷 http://www.alixixi.com/web/a/200http://www.alixixi.com/web/a/5-http://www.alixixi.com/web/a/4-http://www.alixixi.com/web/a/1http://www.alixixi.com/web/a/1 http://www.alixixi.com/web/a/1http://www.alixixi.com/web/a/6:http://www.alixixi.com/web/a/5http://www.alixixi.com/web/a/4:http://www.alixixi.com/web/a/5http://www.alixixi.com/web/a/2
儘管在我的網站和文章裡都有提到CSS製作菜單的方法，但很多初學者還是不太清楚如何?，以及實現原理，我想專門寫一篇詳細教程會對大家比較有協助。
我們先來看一個菜單的例子，最終效果是:
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
然後我們來詳細講解步驟
第一步：建立一個無序列表
我們先建立一個無序列表，來建立菜單的結構。代碼是：
<ul>
<li><a href="http://www.alixixi.com/web/a/1">首頁</a></li>
<li><a href="http://www.alixixi.com/web/a/2">產品介紹</a></li>
<li><a href="http://www.alixixi.com/web/a/3">服務介紹</a></li>
<li><a href="http://www.alixixi.com/web/a/4">支援人員</a></li>
<li><a href="http://www.alixixi.com/web/a/5">立刻購買</a></li>
<li><a href="http://www.alixixi.com/web/a/6">聯絡我們</a></li>
</ul>
效果是：
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
第二步：隱藏li的預設樣式
因為看起來不是很好看，菜單通常都不需要li預設的圓點，我們給UL定義一個樣式來消除這些圓點。
當然，為了更好的控制整個菜單，我們把菜單放在一個div裡。頁面代碼變成：
<div class="test"><ul>
<li><a href="http://www.alixixi.com/web/a/1">首頁</a></li>
<li><a href="http://www.alixixi.com/web/a/2">產品介紹</a></li>
<li><a href="http://www.alixixi.com/web/a/3">服務介紹</a></li>
<li><a href="http://www.alixixi.com/web/a/4">支援人員</a></li>
<li><a href="http://www.alixixi.com/web/a/5">立刻購買</a></li>
<li><a href="http://www.alixixi.com/web/a/6">聯絡我們</a></li>
</ul></div>
CSS定義為：
.test ul{list-style:none;}
說明：“.test ul”表示我要定義的樣式將作用在test的層裡的ul標籤上。
現在的效果是沒有圓點了：
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
第三步：關鍵的浮動
這裡是菜單變成橫向的關鍵，我們給li元素加上一個“float:left;”屬性，讓每個li浮動在前面一個li的左面。
CSS定義為：
.test li{float:left;}
效果是：
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
看，菜單變橫向了。就這麼簡單！下面需要做的就是最佳化細節了。
第四步：調整寬度
菜單都擠在一起不好看怎麼辦？我們來調節li的寬度。
在CSS中添加定義width:http://www.alixixi.com/web/a/100px指定一個li的寬度是http://www.alixixi.com/web/a/100px，當然你可以根據你的需要調整數值：
.test li{float:left;width:http://www.alixixi.com/web/a/100px;}
效果是：
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
如果我們同時定義外面div的寬度，li就會根據div的寬度自動換行，例如定義了div寬http://www.alixixi.com/web/a/3http://www.alixixi.com/web/a/50px，http://www.alixixi.com/web/a/6個li的總寬度是http://www.alixixi.com/web/a/600px，一行排不下就自動變成兩行：
.test{width:http://www.alixixi.com/web/a/3http://www.alixixi.com/web/a/50px;}
效果是：
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
第五步：設定基本連結效果
接下來，我們通過CSS來設定連結的樣式，分別定義:link、:visited、:hover的狀態
.test a:link{color:#http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a/6;background:#CCC;text-decoration:none;}
.test a:visited{color:#http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a/6;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:underline;background:#F00;}
效果是：
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
第六步：將連結以區塊層級元素顯示
有朋友問，菜單連結的背景色為什麼沒有填滿整個li的寬度？恩，解決的方法很簡單，在a的樣式定義中增加display:block，使連結以區塊層級元素顯示。
同時我們微調了如下細節：
- 用text-align:center將菜單文字置中；
- 用height:http://www.alixixi.com/web/a/30px增加背景的高度；
- 用margin-left:http://www.alixixi.com/web/a/3px使每個菜單之間空http://www.alixixi.com/web/a/3px距離；
- 用line-height:http://www.alixixi.com/web/a/30px;定義行高，使連結文字縱向置中；
CSS定義象這樣：
.test a{display:block；text-align:center;height:http://www.alixixi.com/web/a/30px;}
.test li{float:left;width:http://www.alixixi.com/web/a/100px;background:#CCC;margin-left:http://www.alixixi.com/web/a/3px;line-height:http://www.alixixi.com/web/a/30px;}
效果變成：
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
這樣就漂亮多了吧。
第七步：定義背景圖片
我們通常都會在每個連結前加一個小表徵圖，這樣導航更清楚。CSS是採用定義li的背景圖片來實現的：
.test a:link{color:#url(arrow_off.gif) #CCC no-repeat http://www.alixixi.com/web/a/5px http://www.alixixi.com/web/a/1http://www.alixixi.com/web/a/2px;text-decoration:none;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat http://www.alixixi.com/web/a/5px url(arrow_off.gif) #CCC no-repeat http://www.alixixi.com/web/a/5px http://www.alixixi.com/web/a/1http://www.alixixi.com/web/a/2px;”這句代碼是一個CSS縮寫，表示背景圖片是arrow_off.gif；背景顏色是#CCC；背景圖片不重複"no-repeat"，背景圖片的位置是左邊距pp預設狀態下，表徵圖為arrow.off.gif，當滑鼠移動到連結上，表徵圖變為arrow_on.gif
效果變成：
- 首頁
- 產品介紹
- 服務介紹
- 支援人員
- 立刻購買
- 聯絡我們
現在css的完整代碼是：
.test ul{list-style:none;}
.test li{float:left;width:http://www.alixixi.com/web/a/100px;background:#CCC;margin-left:http://www.alixixi.com/web/a/3px;line-height:http://www.alixixi.com/web/a/30px;}
.test a{display:block;text-align:center;height:http://www.alixixi.com/web/a/30px;}
.test a:link{color:#url(arrow_off.gif) #CCC no-repeat http://www.alixixi.com/web/a/5px http://www.alixixi.com/web/a/1http://www.alixixi.com/web/a/2px;text-decoration:none;}
.test a:visited{color:#http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a/6http://www.alixixi.com/web/a/6;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat http://www.alixixi.com/web/a/5px http://www.alixixi.com/web/a/1http://www.alixixi.com/web/a/2px;}
頁面的完整代碼是：
<div class="test">
<ul>
<li><a href="http://www.alixixi.com/web/a/1">首頁</a></li>
<li><a href="http://www.alixixi.com/web/a/2">產品介紹</a></li>
<li><a href="http://www.alixixi.com/web/a/3">服務介紹</a></li>
<li><a href="http://www.alixixi.com/web/a/4">支援人員</a></li>
<li><a href="http://www.alixixi.com/web/a/5">立刻購買</a></li>
<li><a href="http://www.alixixi.com/web/a/6">聯絡我們</a></li>
</ul>
</div>
好了，主要步驟就是這7步，立刻拷貝和修改代碼試試，你也可以用CSS做橫向菜單了！
