ul li css 做橫向選單

2021-06-22 21:59:43 字數 1419 閱讀 3035

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

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

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

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

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

css定義為:

.test ul

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

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

css定義為:

.test li

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

第四步:調整寬度

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

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

.test li

效果是:

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

.test

.test a:link

.test a:visited

.test a:hover

第六步:將鏈結以塊級元素顯示

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

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

用text-align:center將選單文字居中;

用height:30px增加背景的高度;

用margin-left:3px使每個選單之間空3px距離;

用line-height:30px;定義行高,使鏈結文字縱向居中;

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做橫向選單了!

jQuery做的橫向選單和豎向的選單

以前自己做了選單結構,在做網頁開發的時候經常會用到,所以收藏一下,對自己有用 html頁面 選單項2 選單項3 選單項2 選單項3 jquery document ready function else 一種方法 fast slow normal fast顯示 隱藏 一種方法 自動的判斷資料的存在或...

ios 橫向滾輪效果 ios橫向選單 頁面滑動

ios橫向選單 頁面滑動 檢視次數 9122 大小 11 b demo 橫向選單 頁面滑動 例子uiviewcontroller vc1 uiviewcontroller alloc init vc1.view setbackgroundcolor uicolor redcolor uiviewco...

如何用CSS製作橫向選單

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