[轉] 此標籤與以前做的「仿淘寶網站導航欄標籤效果」略有不同,
主要在於標籤與內容的銜接位置上,
「仿淘寶」是用一根3象素高度帶標籤顏色的上邊框與標籤銜接,
並且內容部分的其他三條邊框也使用相同顏色,才把標籤與內容聯繫起來。

當前這種的效果是選中的標籤與內容之間不存在3象素的上邊框,
兩者間的顏色相同,直接融合在一起,看起來更像標籤,
其原理是標籤的ul使用絕對定位形成層,並使該層遮住內容部分上邊框的一部分。

標籤的背景圖分兩種,選中標籤使用有顏色的背景;不選中標籤使用灰色圖為背景,
並且其底部還帶有一條顏色邊,邊的顏色剛好是內容部分的上邊框顏色。

這樣就剛好使選中標籤的顏色與內容融合在一起,
非選中的標籤因為其背景底部帶有顏色邊,剛好與內容部分分割開來。

舊版 | 新版

點擊下載範例...
arrow
arrow
    全站熱搜

    kevin0523 發表在 痞客邦 留言(0) 人氣()