€€亞馬遜網(wǎng)站應該不會(huì )陌生吧？對它頁(yè)面上方標簽卡（Tab）方式的導航條（如下圖）還有印象么？
€€€€
€€€€amazon.com這種方式得導航引起了相當多人的效仿。那么，它是如何做到的呢？有過(guò)網(wǎng)頁(yè)設計經(jīng)驗的人應該不難明白，如果不知道細節的話(huà)，通過(guò)察看源代碼就能知道，它實(shí)際上是通過(guò)在表格中插入事先制作好的作為標簽卡的圖片來(lái)制作的，標簽卡的效果通過(guò)顏色來(lái)控制，比如上圖中的“YOUR STORE”這張圖片和底下子欄目的顏色一致，背景都為深藍色，這樣看上就向一張卡片了。
€€€€不過(guò)，現在網(wǎng)頁(yè)設計的趨勢是XHTML+CSS來(lái)完成。那么，如果不用圖片加表格的方法，有沒(méi)有辦法僅僅利用CSS來(lái)制作呢？有的，可以通過(guò)項目列表的CSS設定來(lái)做到。
€€€€
€€€€這張圖，就是利用這種方法來(lái)制作的。
€€€€下面，我們就分別來(lái)學(xué)習CSS的標簽卡制作。
利用列表元素制作標簽卡
€€€€通常情況下，項目列表的排列方式是垂直的，并在前頭帶有特定的項目符號，如下：
項目列表一
項目列表二
項目列表三
項目列表四
€€€€它所對應的HTML代碼是這個(gè)樣子：
€€€€<ul>
<li>項目列表一</li>
<li>項目列表二</li>
<li>項目列表三</li>
<li>項目列表四</li>
</ul>
€€€€那是否你曾想到過(guò)，項目列表也可以不垂直排列，而是水平分布呢？在Html中無(wú)論如何是做不到這點(diǎn)的?？墒荂SS卻提供了這種方法。
€€€€首先，我們把項目列表放入到div標記中，如下：
€€€€<div id="horizonlist">
€€€€<ul>
<li>項目列表一</li>
<li>項目列表二</li>
<li>項目列表三</li>
<li>項目列表四</li>
</ul>
€€€€</div>
€€€€然后，我們?yōu)檫@個(gè)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;
}
€€€€此樣式作用于所給項目列表的結果如下：
項目列表一
項目列表二
項目列表三
項目列表四
€€€€可以看到，此時(shí)的項目列表成了水平放置，而且列表前的符號自動(dòng)消失。之所以這樣，關(guān)鍵在于屬性display的設置值inline的作用。display用來(lái)改變元素的顯示值，可以將元素類(lèi)型線(xiàn)上，塊和清單項目相互變換，其中取值inline的作用是“刪除元素前后的分行符，使其并入其它元素流中”。在這里，inline取消了每個(gè)列表項目后的換行，而成為一行顯示。
€€€€順著(zhù)這個(gè)思路下去，如果我們給每個(gè)列表項目設定Box屬性，那不就有了類(lèi)似標簽卡的效果出來(lái)了么：
項目列表一
項目列表二
項目列表三
項目列表四
€€€€我們來(lái)看看這個(gè)例子的代碼：
€€€€<div id="tabdemo">
<ul>
<li>項目列表一</li>
<li>項目列表二</li>
<li class="selected">項目列表三</li>
<li>項目列表四</li>
</ul>
</div>
€€€€和上面的例子不同，這里的項目列表三多了類(lèi)名“selected”，用來(lái)表示當前被選中的標簽卡。
€€€€相應的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;
}
€€€€如果你希望每個(gè)標簽卡之間有一定的距離，可以修改#tabdemo ul li此設定中的margin-left屬性值，比如改為2，就可以看到類(lèi)似早先給出的那張藍色標簽卡的樣子。
€€€€接下來(lái)我們來(lái)進(jìn)一步修飾上面這個(gè)標簽卡，先來(lái)看效果果。
標簽卡一
標簽卡二
標簽卡三
標簽卡四
€€€€可以看到，每個(gè)標簽卡之間不再緊貼一起，底下出現了一條連續的橫線(xiàn)，當鼠標移動(dòng)到每個(gè)標簽卡的時(shí)候，出現了浮動(dòng)的效果。
€€€€一起來(lái)分析一下代碼：
€€€€<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>
€€€€這個(gè)標簽卡放在id為container的塊div中。列表的id為beautytab，其中的列表項目標簽卡一設定了一個(gè)類(lèi)“selectedtab”，表示當前被選的標簽卡類(lèi)。
€€€€對應的CSS設定如下：
€€€€#container
{//*設定包含列表的div的Box屬性*//
width: 500px;
padding: 30px;
border: 1px solid #ccc;
background: #fff;
}
#beautytab
{//*設定項目列表Ul元素的屬性，其中background用來(lái)設定連貫于各個(gè)列表項目下的橫線(xiàn)，否則它們會(huì )彼此分離，用了一張事先準備好的圖片，讓它放置在底部，水平重復*//
height: 20px;
margin: 0;
padding-left: 10px;
background: url(‘http://tech.tom.com/images/computer/2004/02/12/bottom.gif‘) repeat-x bottom;
}
#beautytab li
{//*設定各個(gè)列表項目的屬性，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
{//*設定超鏈接鼠標浮動(dòng)效果*//
background: #fff;
}
€€€€如果手頭上有漂亮的修飾圖片，我們還可以進(jìn)一步制作出類(lèi)似下圖的漂亮雅致的標簽卡來(lái)。
€€€€
€€€€至于如何制作，用興趣的人可以自己動(dòng)手做做看。
