01之06
如何使用CSS創建選項卡式導航並且無圖像
網頁上的導航是列表的一種形式，而選項卡式導航就像一個水平列表。 使用CSS創建水平選項卡導航相當容易，但CSS 3為我們提供了更多工具，使它們看起來更漂亮。
本教程將帶您通過創建CSS選項卡式菜單所需的HTML和CSS。 點擊該鏈接查看它的外觀。
此選項卡式菜單不使用圖像 ，只使用HTML和CSS 2和CSS 3.可以輕鬆進行編輯，以添加更多選項卡或更改其中的文本。
瀏覽器支持
此選項卡菜單可在所有主流瀏覽器中使用 。 Internet Explorer不會顯示圓角，但除此之外，它將顯示與Firefox，Safari，Opera和Chrome相似的選項卡。
02 06
寫下你的菜單列表
所有導航菜單和選項卡實際上只是一個無序列表。 所以你想要做的第一件事就是寫一個無序的鏈接列表，你希望你的標籤導航去。
本教程假定您正在使用文本編輯器編寫HTML，並知道將HTML放置在網頁上的哪個位置。
寫下你這樣的無序列表：
- 類=“標籤列表”>
- CSS 3
- id =“當前”>標籤
- 對於
- 菜單
你會注意到代碼調用了兩件事：class =“tablist”和id =“current”。 第一個是必需的 。 如果您沒有將tablist類放在無序列表中，則選項卡將不起作用。 第二個是可選的。 將id =“current”放在您希望在該頁面上突出顯示的選項卡上。 我通常使用它來突出顯示我所在的頁面，但是您可以使用它突出顯示最重要的選項卡。 或者你可以完全刪除它。
03年06月
開始編輯你的樣式表
中使用內部樣式表。首先我們要塑造UL自己
這是我們在HTML中使用類標籤列表的地方。 UL樣式不是為您的頁面上的所有無序列表設計樣式，您應該只設計UL類樣式。 tablist因此，CSS中的第一個條目應該是：
.tablist {}我喜歡提前結束大括號（}），所以稍後我不會忘記它。
雖然我們為標籤菜單列表使用了無序列表標籤，但我們不希望任何子彈或數字都在爬行。因此，您應該添加的第一種樣式是。 列表樣式：無; 這告訴瀏覽器，雖然它是一個列表，但它是一個沒有預定義樣式的列表（如項目符號或數字）。
然後，您可以將列表的高度設置為與您希望填充的空間相匹配。 我選擇2em作為我的身高，因為這是標準字體的兩倍，並且在選項卡的文本上方和下方提供了大約一半的時間。 高度：2em的; 但是，您可以將寬度設置為任意大小。 UL標籤會自動佔據寬度的100％，因此除非您希望它比當前容器小，否則可以將寬度保持不變。
最後，如果您的主樣式表沒有UL和OL標籤的預設值，則需要將它們放入。這意味著您應該關閉UL上的邊框，邊距和填充。 填充：0; 餘量：0; border：none; 如果您已經重置UL標籤，則可以將邊距，填充或邊框更改為適合您設計的內容。
您的最終.tablist類應如下所示：
.tablist {list-style：none; 高度：2em的; 填充：0; 餘量：0; border：none; }04年6月
編輯LI列表項目
一旦你建立了無序列表的樣式，你需要在裡面設置LI標籤的樣式。 否則，它們將像標準列表一樣行動，並且每個標籤都移動到下一行，而不會正確放置標籤。
首先，設置你的風格屬性：
.tablist li {}然後你想浮動你的標籤，讓它們排列在水平面上。 向左飄浮;
不要忘記在選項卡之間添加一些邊距，所以它們不會合併在一起。 保證金右：0.13em;
你的li風格應該是這樣的：
.tablist li {float：left; 保證金右：0.13em; }05年06月
使選項卡看起來像使用CSS的選項卡3
為了完成這個樣式表中的大部分工作，我將目標鎖定在無序列表中。 瀏覽器認識到鏈接在網頁上比其他標籤更多，因此，如果您將舊鏈接添加到錨標籤（鏈接），則舊版瀏覽器可以更輕鬆地遵守懸停狀態等事項。 所以先寫下你的風格屬性：
.tablist li a {} .tablist li a：hover {}由於這些標籤應該像應用程序中的標籤一樣，您希望標籤的整個區域都可點擊，而不僅僅是鏈接的文本。 為此，您必須將A標籤從正常的“ 內聯 ”狀態轉換為塊元素 。 顯示：塊; （如果您有興趣了解更多差異，請閱讀塊級與內聯元素 。）
然後，一個簡單的方法來強制你的製表符相互對稱，但仍然彎曲以適合文本的寬度是使左右填充相同。 我使用填充速記屬性將頂部和底部設置為0，將左側和右側設置為1em。 填充：0 1em;
我還選擇刪除鏈接下劃線，以便標籤看起來不像鏈接。 但是如果你的觀眾可能會因此而感到困惑，那就留下這一行。 鏈接裝飾：無;
通過在選項卡周圍放置一個薄邊框，它使它們看起來像標籤。 我用邊界速記屬性把邊界放在四邊的邊界上：0.06em solid＃000; 然後使用border-bottom屬性將其從底部移除。 底部邊框：0;
然後我對標籤的字體，顏色和背景顏色進行了一些調整。 將這些設置為與您的網站匹配的樣式。 font：bold 0.88em / 2em arial，geneva，helvetica，sans-serif; 顏色：＃000; 背景色：#CCC;
所有上述樣式都應放在選擇器.tablist li a中，以便它們通常影響錨定標記。 然後為了讓選項卡看起來更加可點擊，你應該添加一些狀態規則.tablist li a：hover。
我喜歡改變文本和背景的顏色，以便在您將鼠標懸停在選項卡上時彈出選項卡。 背景：＃3 CF; 顏色：#FFF;
而且我還向瀏覽者提醒我希望鏈接不加下劃線。 文字修飾：無; 另一種常見方法是將鼠標懸停在選項卡上時重新打開下劃線。 如果你想這樣做，把它改為文字修飾：下劃線;
但是CSS 3在哪裡？
如果你一直關注，你可能已經註意到樣式表中沒有使用任何CSS 3樣式。 這有利於在任何現代瀏覽器中工作，包括Internet Explorer。 但它並不會使標籤看起來像方框一樣。 通過添加一個CSS 3樣式的調用border-radius（以及它與瀏覽器相關的調用），您可以使邊緣變圓，看起來更像是馬尼拉文件夾上的選項卡。
你應該添加到.tablist中的樣式是：-webkit-border-right-radius：0.50em; -webkit-邊框左上角的半徑：0.50em; -moz-邊界半徑-topright：0.50em; -moz-邊界半徑，左上：0.50em; 邊框右上角半徑：0.50em; 邊框左上角半徑：0.50em;
這些是我寫的最終樣式規則：
.tablist li a {display：block; 填充：0 1em; 文字修飾：無; 邊界：0.06em固體＃000; 底部邊框：0; font：bold 0.88em / 2em arial，geneva，helvetica，sans-serif; 顏色：＃000; 背景色：#CCC; / * CSS 3個元素* / webkit-border-right-right-radius：0.50em; -webkit-邊框左上角的半徑：0.50em; -moz-邊界半徑-topright：0.50em; -moz-邊界半徑，左上：0.50em; 邊框右上角半徑：0.50em; 邊框左上角半徑：0.50em; } .tablist li a：hover {background：＃3cf; 顏色：#FFF; 文字修飾：無; }使用這些樣式，您可以在所有主流瀏覽器中使用標籤式菜單，並且看起來像CSS 3兼容瀏覽器中的精美打印標籤。 下一頁給你更多的選擇，你可以用它來打扮更多。
06年06月
突出顯示當前選項卡
在我創建的HTML中，UL有一個帶有ID的列表元素。 這可以讓你給一個LI與其他的風格不同。 最常見的情況是使當前標籤以某種方式突出顯示。 另一種想到這一點的方法是，你想灰掉沒有生命的標籤。 然後你改變id在不同頁面上的位置。
我同時使用#current A標籤和#current A：hover sta，以便兩者稍有不同。 您可以更改顏色，背景顏色，甚至是該元素的高度，寬度和填充。 在設計中做出任何有意義的更改。
.tablist li＃current a {background-color：＃777; 顏色：#fff; } .tablist li＃當前a：hover {background：＃39C; }你完成了！ 您剛剛為您的網站創建了一個標籤式菜單。