CSS製作標籤卡TAB效果

亞馬遜網站應該不會陌生吧？對它頁面上方標籤卡（Tab）方式的導航條（如）還有印象嗎？

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

不過，現在網頁設計的趨勢是XHTML+CSS來完成。那麼，如果不用圖片加表格的方法，有沒有辦法僅僅利用CSS來製作呢？有的，可以通過項目列表的CSS設定來做到。

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

下面，我們就分別來學習CSS的標籤卡製作。

利用列表元素製作標籤卡

通常情況下，項目列表的相片順序是垂直的，並在前頭帶有特定的項目符號，如下：

• 項目列表一
• 項目列表二
• 項目列表三
• 項目列表四

它所對應的HTML代碼是這個樣子：

<ul>
<li>項目列表一</li>
<li>項目列表二</li>
<li>項目列表三</li>
<li>項目列表四</li>
</ul>
　

那是否你曾想到過，項目列表也可以不垂直排列，而是水平分布呢？在Html中無論如何是做不到這點的。可是CSS卻提供了這種方法。

首先，我們把項目列表放入到div標記中，如下：

<div id="horizonlist">

<ul>
<li>項目列表一</li>
<li>項目列表二</li>
<li>項目列表三</li>
<li>項目列表四</li>
</ul>

</div>

然後，我們為這個id為horizonlist的Div設定如下樣式：

#horizonlist {//*設定div的Box屬性*//border: 1px solid #000;margin: 2em;width: 80%;padding: 5px;font-family: Verdana, sans-serif;}#horizonlist ul, #horizonlist li {//*設定限制於horizonlist的div內的ul和li的屬性*//display: inline;margin: 0;padding: 0;color: #339;font-weight: bold;}

此樣式作用於所給項目列表的結果如下：

• 項目列表一
• 項目列表二
• 項目列表三
• 項目列表四

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

順著這個思路下去，如果我們給每個清單項目設定Box屬性，那不就有了類似標籤卡的效果出來了麼：

• 項目列表一
• 項目列表二
• 項目列表三
• 項目列表四

我們來看看這個例子的代碼：

<div id="tabdemo">
<ul>
<li>項目列表一</li>
<li>項目列表二</li>
<li class="selected">項目列表三</li>
<li>項目列表四</li>
</ul>
</div>

和上面的例子不同，這裡的項目列表三多了類名“selected”，用來表示當前被選中的標籤卡。

相應的CSS屬性設定如下：

#tabdemo ul li {
margin-left: 0;
margin-bottom: 0;
padding: 2px 15px 5px;
border: 1px solid #000;
list-style: none;//*不顯示列表符號*//
display: inline;//*取消項目之間的分行*//
background-color: #ffc;
}

#tabdemo ul li.selected {//*設定被選中的列表的效果*//
border-bottom: 1px solid #fff;
background-color: #fff;
list-style: none;
display: inline;
}

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

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

• 標籤卡一
• 標籤卡二
• 標籤卡三
• 標籤卡四

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

一起來分析一下代碼：

<div id="container">

<ul id="beautytab">
<li><a href="#" class="selectedtab">標籤卡一</a></li>
<li><a href="#">標籤卡二</a></li>
<li><a href="#">標籤卡三</a></li>
<li><a href="#">標籤卡四</a></li>
</ul>

</div>

這個標籤卡放在id為container的塊div中。列表的id為beautytab，其中的清單項目標籤卡一設定了一個類“selectedtab”，表示當前被選的標籤卡類。

對應的CSS設定如下：

#container
{//*設定包含列表的div的Box屬性*//
width: 500px;
padding: 30px;
border: 1px solid #ccc;
background: #fff;
}

#beautytab
{//*設定項目列表Ul元素的屬性，其中background用來設定連貫於各個清單項目下的橫線，否則它們會彼此分離，用了一張事先準備好的圖片，讓它放置在底部，水平重複*//
height: 20px;
margin: 0;
padding-left: 10px;
background: url('bottom.gif') repeat-x bottom;
}

#beautytab li
{//*設定各個清單項目的屬性，display屬性設定取消項目間的分行，list-style-type設定取消清單項目前的符號*//
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#beautytab a:link, #beautytab a:visited
{//*設定標籤卡中超連結的文字的屬性*//
float: left;
background: #f3f3f3;
font-size: 12px;
line-height: 14px;
font-weight: bold;
padding: 2px 10px 2px 10px;
margin-right: 4px;
border: 1px solid #ccc;
text-decoration: none;
color: #666;
}

#beautytab a:link.selectedtab, #beautytab a:visited.selectedtab
{//*設定當前被選中的標籤卡中超連結的屬性*//
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}

#beautytab a:hover
{//*設定超連結滑鼠浮動效果*//
background: #fff;
}
　

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

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