CSS製作標籤卡Tab效果

2021-04-13 12:12:54 字數 1749 閱讀 2776

??亞馬遜**應該不會陌生吧?對它頁面上方標籤卡(tab)方式的導航條(如下圖)還有印象麼?

????amazon.com這種方式得導航引起了相當多人的效仿。那麼,它是如何做到的呢?有過網頁設計經驗的人應該不難明白,如果不知道細節的話,通過察看源**就能知道,它實際上是通過在**中插入事先製作好的作為標籤卡的來製作的,標籤卡的效果通過顏色來控制,比如上圖中的「your store」這張和底下子欄目的顏色一致,背景都為深藍色,這樣看上就向一張卡片了。

??不過,現在網頁設計的趨勢是xhtml+css來完成。那麼,如果不用加**的方法,有沒有辦法僅僅利用css來製作呢?有的,可以通過專案列表的css設定來做到。

????這張圖,就是利用這種方法來製作的。

??下面,我們就分別來學習css的標籤卡製作。

??通常情況下,專案列表的排列方式是垂直的,並在前頭帶有特定的專案符號,如下:

??它所對應的html**是這個樣子:

????那是否你曾想到過,專案列表也可以不垂直排列,而是水平分布呢?在html中無論如何是做不到這點的。可是css卻提供了這種方法。

??首先,我們把專案列表放入到div標記中,如下:

????

????然後,我們為這個id為horizonlist的div設定如下樣式:

#horizonlist 

#horizonlist ul, #horizonlist li

??此樣式作用於所給專案列表的結果如下:

??可以看到,此時的專案列表成了水平放置,而且列表前的符號自動消失。之所以這樣,關鍵在於屬性display的設定值inline的作用。display用來改變元素的顯示值,可以將元素型別線上,塊和清單專案相互變換,其中取值inline的作用是「刪除元素前後的分行符,使其併入其它元素流中」。在這裡,inline取消了每個列表專案後的換行,而成為一行顯示。

??順著這個思路下去,如果我們給每個列表專案設定box屬性,那不就有了類似標籤卡的效果出來了麼:

??我們來看看這個例子的**:

????和上面的例子不同,這裡的專案列表三多了類名「selected」,用來表示當前被選中的標籤卡。

??相應的css屬性設定如下:

??#tabdemo ul li

#tabdemo ul li.selected

??如果你希望每個標籤卡之間有一定的距離,可以修改#tabdemo ul li此設定中的margin-left屬性值,比如改為2,就可以看到類似早先給出的那張藍色標籤卡的樣子。

??接下來我們來進一步修飾上面這個標籤卡,先來看效果果。

??可以看到,每個標籤卡之間不再緊貼一起,底下出現了一條連續的橫線,當滑鼠移動到每個標籤卡的時候,出現了浮動的效果。

??一起來分析一下**:

????這個標籤卡放在id為container的塊div中。列表的id為beautytab,其中的列表專案標籤卡一設定了乙個類「selectedtab」,表示當前被選的標籤卡類。

??對應的css設定如下:

??#container

#beautytab

#beautytab li

#beautytab a:link, #beautytab a:visited

#beautytab a:link.selectedtab, #beautytab a:visited.selectedtab

#beautytab a:hover

??如果手頭上有漂亮的修飾,我們還可以進一步製作出類似下圖的漂亮雅緻的標籤卡來。

????至於如何製作,用興趣的人可以自己動手做做看。

CSS製作標籤卡TAB效果

亞馬遜 應該不會陌生吧?對它頁面上方標籤卡 tab 方式的導航條 如下圖 還有印象麼?amazon.這種方式得導航引起了相當多人的效仿。那麼,它是如何做到的呢?有過網頁設計經驗的人應該不難明白,如果不知道細節的話,通過察看源 就能知道,它實際上是通過在 中插入事先製作好的作為標籤卡的來製作的,標籤卡...

Tab切換效果製作

內容1內容1內容1內容1內容1內容1內容1 內容1內容1內容1內容1內容1內容1 內容2內容2內容2內容2內容2內容2內容2 內容2內容2內容2內容2內容2內容2 內容3內容3內容3內容3內容3內容3內容3 內容3內容3內容3內容3內容3內容3 內容4內容4內容4內容4內容4內容4內容4 內容4內容...

tab 標籤選項卡

1.css body,div,ul,li body a link a visited a hover ul tab2 menubox menubox ul menubox li menubox li.hover contentbox 2.頁面 div 新聞列表1 wang wangding wang...