€€亞馬遜網(wǎng)站應(yīng)該不會(huì)陌生吧？對(duì)它頁面上方標(biāo)簽卡（Tab）方式的導(dǎo)航條（如下圖）還有印象么？

€€€€

€€€€amazon.com這種方式得導(dǎo)航引起了相當(dāng)多人的效仿。那么，它是如何做到的呢？有過網(wǎng)頁設(shè)計(jì)經(jīng)驗(yàn)的人應(yīng)該不難明白，如果不知道細(xì)節(jié)的話，通過察看源代碼就能知道，它實(shí)際上是通過在表格中插入事先制作好的作為標(biāo)簽卡的圖片來制作的，標(biāo)簽卡的效果通過顏色來控制，比如上圖中的“YOUR STORE”這張圖片和底下子欄目的顏色一致，背景都為深藍(lán)色，這樣看上就向一張卡片了。

€€€€不過，現(xiàn)在網(wǎng)頁設(shè)計(jì)的趨勢(shì)是XHTML+CSS來完成。那么，如果不用圖片加表格的方法，有沒有辦法僅僅利用CSS來制作呢？有的，可以通過項(xiàng)目列表的CSS設(shè)定來做到。

€€€€  

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

€€€€下面，我們就分別來學(xué)習(xí)CSS的標(biāo)簽卡制作。

利用列表元素制作標(biāo)簽卡
€€€€通常情況下，項(xiàng)目列表的排列方式是垂直的，并在前頭帶有特定的項(xiàng)目符號(hào)，如下：

項(xiàng)目列表一
項(xiàng)目列表二
項(xiàng)目列表三
項(xiàng)目列表四
€€€€它所對(duì)應(yīng)的HTML代碼是這個(gè)樣子：

€€€€<ul>
<li>項(xiàng)目列表一</li>
<li>項(xiàng)目列表二</li>
<li>項(xiàng)目列表三</li>
<li>項(xiàng)目列表四</li>
</ul>
　

€€€€那是否你曾想到過，項(xiàng)目列表也可以不垂直排列，而是水平分布呢？在Html中無論如何是做不到這點(diǎn)的?？墒荂SS卻提供了這種方法。

€€€€首先，我們把項(xiàng)目列表放入到div標(biāo)記中，如下：

€€€€<div id="horizonlist">

€€€€<ul>
<li>項(xiàng)目列表一</li>
<li>項(xiàng)目列表二</li>
<li>項(xiàng)目列表三</li>
<li>項(xiàng)目列表四</li>
</ul>

€€€€</div>

€€€€然后，我們?yōu)檫@個(gè)id為horizonlist的Div設(shè)定如下樣式：

#horizonlist {//*設(shè)定div的Box屬性*//
border: 1px solid #000;
margin: 2em;
width: 80%;
padding: 5px;
font-family: Verdana, sans-serif;
}

#horizonlist ul, #horizonlist li {//*設(shè)定限制于horizonlist的div內(nèi)的ul和li的屬性*//
display: inline;
margin: 0;
padding: 0;
color: #339;
font-weight: bold;
}

€€€€此樣式作用于所給項(xiàng)目列表的結(jié)果如下：

項(xiàng)目列表一
項(xiàng)目列表二
項(xiàng)目列表三
項(xiàng)目列表四
€€€€可以看到，此時(shí)的項(xiàng)目列表成了水平放置，而且列表前的符號(hào)自動(dòng)消失。之所以這樣，關(guān)鍵在于屬性display的設(shè)置值inline的作用。display用來改變?cè)氐娘@示值，可以將元素類型線上，塊和清單項(xiàng)目相互變換，其中取值inline的作用是“刪除元素前后的分行符，使其并入其它元素流中”。在這里，inline取消了每個(gè)列表項(xiàng)目后的換行，而成為一行顯示。

€€€€順著這個(gè)思路下去，如果我們給每個(gè)列表項(xiàng)目設(shè)定Box屬性，那不就有了類似標(biāo)簽卡的效果出來了么：

項(xiàng)目列表一
項(xiàng)目列表二
項(xiàng)目列表三
項(xiàng)目列表四
€€€€我們來看看這個(gè)例子的代碼：

€€€€<div id="tabdemo">
<ul>
<li>項(xiàng)目列表一</li>
<li>項(xiàng)目列表二</li>
<li class="selected">項(xiàng)目列表三</li>
<li>項(xiàng)目列表四</li>
</ul>
</div>

€€€€和上面的例子不同，這里的項(xiàng)目列表三多了類名“selected”，用來表示當(dāng)前被選中的標(biāo)簽卡。

€€€€相應(yīng)的CSS屬性設(shè)定如下：

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

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

€€€€如果你希望每個(gè)標(biāo)簽卡之間有一定的距離，可以修改#tabdemo ul li此設(shè)定中的margin-left屬性值，比如改為2，就可以看到類似早先給出的那張藍(lán)色標(biāo)簽卡的樣子。

€€€€接下來我們來進(jìn)一步修飾上面這個(gè)標(biāo)簽卡，先來看效果果。

標(biāo)簽卡一
標(biāo)簽卡二
標(biāo)簽卡三
標(biāo)簽卡四
€€€€可以看到，每個(gè)標(biāo)簽卡之間不再緊貼一起，底下出現(xiàn)了一條連續(xù)的橫線，當(dāng)鼠標(biāo)移動(dòng)到每個(gè)標(biāo)簽卡的時(shí)候，出現(xiàn)了浮動(dòng)的效果。

€€€€一起來分析一下代碼：

€€€€<div id="container">

<ul id="beautytab">
<li><a href="#" class="selectedtab">標(biāo)簽卡一</a></li>
<li><a href="#">標(biāo)簽卡二</a></li>
<li><a href="#">標(biāo)簽卡三</a></li>
<li><a href="#">標(biāo)簽卡四</a></li>
</ul>

</div>

€€€€這個(gè)標(biāo)簽卡放在id為container的塊div中。列表的id為beautytab，其中的列表項(xiàng)目標(biāo)簽卡一設(shè)定了一個(gè)類“selectedtab”，表示當(dāng)前被選的標(biāo)簽卡類。

€€€€對(duì)應(yīng)的CSS設(shè)定如下：

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

#beautytab
{//*設(shè)定項(xiàng)目列表Ul元素的屬性，其中background用來設(shè)定連貫于各個(gè)列表項(xiàng)目下的橫線，否則它們會(huì)彼此分離，用了一張事先準(zhǔn)備好的圖片，讓它放置在底部，水平重復(fù)*//
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
{//*設(shè)定各個(gè)列表項(xiàng)目的屬性，display屬性設(shè)定取消項(xiàng)目間的分行，list-style-type設(shè)定取消列表項(xiàng)目前的符號(hào)*//
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#beautytab a:link, #beautytab a:visited
{//*設(shè)定標(biāo)簽卡中超鏈接的文字的屬性*//
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
{//*設(shè)定當(dāng)前被選中的標(biāo)簽卡中超鏈接的屬性*//
border-bottom: 1px solid #fff;
background: #fff;
color: #000;
}

#beautytab a:hover
{//*設(shè)定超鏈接鼠標(biāo)浮動(dòng)效果*//
background: #fff;
}
　

€€€€如果手頭上有漂亮的修飾圖片，我們還可以進(jìn)一步制作出類似下圖的漂亮雅致的標(biāo)簽卡來。

€€€€

€€€€至于如何制作，用興趣的人可以自己動(dòng)手做做看。