如何用CSS製作橫向選單

如何用css製作橫向選單?

我們先來看乙個選單的例子，最終效果是:

然後我們來詳細講解步驟

第一步：建立乙個無序列表

我們先建立乙個無序列表，來建立選單的結構。**是：

效果是：

第二步：隱藏li的預設樣式

因為看起來不是很好看，選單通常都不需要li預設的圓點，我們給ul定義乙個樣式來消除這些圓點。

當然，為了更好的控制整個選單，我們把選單放在乙個div裡。頁面**變成：

css定義為：

.test ul

說明：「.test ul」表示我要定義的樣式將作用在test的層裡的ul標籤上。

現在的效果是沒有圓點了：

第三步：關鍵的浮動

這裡是選單變成橫向的關鍵，我們給li元素加上乙個「float:left;」屬性，讓每個li浮動在前面乙個li的左面。

css定義為：

.test li

效果是：

看，選單變橫向了。就這麼簡單！下面需要做的就是優化細節了。

第四步：調整寬度

選單都擠在一起不好看怎麼辦？我們來調節li的寬度。

在css中新增定義width:100px指定乙個li的寬度是100px，當然你可以根據你的需要調整數值：

.test li

效果是：

如果我們同時定義外面div的寬度，li就會根據div的寬度自動換行，例如定義了div寬350px，6個li的總寬度是600px，一行排不下就自動變成兩行：

.test

效果是：

接下來，我們通過css來設定鏈結的樣式，分別定義:link、:visited、:hover的狀態

.test a:link

.test a:visited

.test a:hover

效果是：

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

同時我們微調了如下細節：

css定義象這樣：

.test a

.test li

效果變成：

這樣就漂亮多了吧。

.test a:link

.test a:hover

說明：「background:url(arrow_off.gif) #ccc no-repeat 5px 12px;」這句**是乙個css縮寫，表示背景是arrow_off.gif；背景顏色是#ccc；背景不重複"no-repeat"，背景的位置是左邊距5px、上邊距12px；

預設狀態下，圖示為arrow.off.gif，當滑鼠移動到鏈結上，圖示變為arrow_on.gif

效果變成：

現在css的完整**是：

.test ul

.test li

.test a

.test a:link

.test a:visited

.test a:hover

頁面的完整**是：

好了，主要步驟就是這7步，立刻拷貝和修改**試試，你也可以用css做橫向選單了！

摘抄：http://www.w3cn.org/article/tips/2005/105.html#top

如何用CSS製作橫向選單

css製作選單的方法，但很多初學者還是不太清楚如何實現，以及實現原理，我想專門寫一篇詳細教程會對大家比較有幫助。我們先來看乙個選單的例子，最終效果是 然後我們來詳細講解步驟 第一步 建立乙個無序列表 我們先建立乙個無序列表，來建立選單的結構。是 效果是 第二步 隱藏li的預設樣式 因為看起來不是很好...

如何用CSS製作橫向選單

如何用css製作橫向選單?我們先來看乙個選單的例子，最終效果是 然後我們來詳細講解步驟 第一步 建立乙個無序列表 我們先建立乙個無序列表，來建立選單的結構。是 效果是 第二步 隱藏li的預設樣式 因為看起來不是很好看，選單通常都不需要li預設的圓點，我們給ul定義乙個樣式來消除這些圓點。當然，為了更...

如何用CSS製作橫向選單

如何用css製作橫向選單?我們先來看乙個選單的例子，最終效果是 然後我們來詳細講解步驟 第一步 建立乙個無序列表 我們先建立乙個無序列表，來建立選單的結構。是 效果是 第二步 隱藏li的預設樣式 因為看起來不是很好看，選單通常都不需要li預設的圓點，我們給ul定義乙個樣式來消除這些圓點。當然，為了更...