在CSS中，一個很少被提及的優點就是能夠層疊背景圖片，允許它們之間通過"滑動"和層疊來創造出特定的效果。CSS2目前的狀況要求每個背景圖片都分別有與之相對應的HTML元素。在通常情況下，組成通用界面的典型標記已經提供了一些我們可以使用的元素。

其 中的一個例子就是標簽導航欄（tabbed navigation）。隨著[標簽導航]的使用率不斷上升，它已逐漸成為了站點導航的主流方式，現在是時候來討論一下對標簽導航欄的控制了。既然CSS 被廣泛地支持，我們就可以用它來優化站點標簽的質地和外觀。你很可能會想到，CSS可以馴服平坦的無序列表。可能你已經見到過一些樣式化為標簽的列表，比如下面這個：

如果我們采用與上面完全相同的標記，但卻把它們變成了下面的樣子，該如何去做呢：

在這里，僅僅用非常簡單的樣式就可以實現。

創新之道

我所見過的許多基于CSS的標簽都受到了一些共同特性的限制：單色的矩形塊，可能在當前標簽上加了輪廓，或者邊框；在鼠標掠過時改變矩形的顏色等等。這就是CSS能為我們提供的全部嗎？僅僅是成堆的單色方塊？

早 在CSS被廣泛采用之前，我們就能夠看到許多在導航設計上的創新。創新的外形，可控的色彩混合，以及對現實世界中物力表面的模仿。但是這些設計通常都依賴 于將文字內嵌于圖片的復雜結構或多層的表格嵌套。編輯標簽上的文字或者改變它們的順序都會引起繁重的工作。文字的縮放更是不可能，不然就會引起嚴重的頁面 布局錯誤。

單純的文字導航要比嵌入文字的圖片式導航更加易于管理并且加載更迅速。而且，雖然我們可以給每個圖片都加上alt屬性， 但是單純的文字導航更具有可讀性，因為對于視力不好讀者，這些文字都是可縮放的。也正因為如此，由CSS樣式化的文字的導航欄再次成為網頁設計者們的選 擇，并不足為奇。但是到目前為止，大多數基于CSS的標簽設計，只是后退了一步，回到了我們曾經的做法--當然這些是無法被優秀的設計作品采用的。采用一 項新技術（比如CSS）應該能夠讓我們創作出一些更好的東西，而不至于失去先前的表格或者圖片式標簽所能表現的質地。

“滑動門”技術

只 要我們用兩片分離的背景圖片，就能夠創造出精美的手工界面，并且具有高度的靈活性，可隨文字的縮放而自動適應。試想一下，左右兩幅圖片，就像左右兩扇滑動 門一樣，構成了一扇完整的門。將這兩扇門推近，重疊的部分多一些，就可以適應一個比較狹窄的空間，而如果將它們拉開，重疊的部分減少，就可以滿足較寬的空 間，正如下圖所示：

在 這個例子中，一幅圖片蓋住了另一幅的某些部分。假設每幅圖片的邊緣都有些獨特的形狀，例如標簽的圓角，我們不希望這些邊緣被它前方圖片蓋住。為了防止這種 情況發生，我們將放置在前方（以左邊為例）的圖片制作得盡可能地窄，但是保證它能夠完整地顯示出邊緣上的獨特形狀。以圓角標簽為例，我們將前方的圖片制作 到僅與圓角的部分同寬即可：

如 果目標物由于不同文字或文字類型而變得比上圖所示的寬度更大,那么這兩幅圖就會被拉開,出現一個非常不美觀的缺口。 這時就需要我們對可能的擴展性進行預測。 在用戶縮放字體的時候，目標物會增大多少？實際上，我們至少應該為文字的縮放而作出300%的可伸縮性準備。 我們需要將背景圖擴大到足夠彌補缺口。 對于這些例子，我們將把后面的圖像 ( 右邊) 制作為 400 x150 圖素, 前面的圖像制作為 9 x150 圖素。

要記住，背景圖片只能在它所應用的元素的“門前”出現 [內容區域+補丁區域(padding)]。 這兩幅圖被分別安放到他們所應用的元素外側。 而這些背景的可見部分交疊在一起構成了一個完整的標簽樣式:

如果標簽被擴大的話，這兩幅圖就分別向兩側滑動，每一幅都更多地被顯示出來，以滿足更寬的“門”的需求。

就 比如我用Photoshop制作了兩幅平滑的，略帶3D效果的個性化標簽圖片，正如文章開頭的圖片所示。在另一個色彩明亮一點的版本中，這兩幅圖片的填充 色變的更亮，邊緣的陰影更暗，這是為“當前”標簽準備的。為了給上面所述的技術作示范，我們需要擴展標簽背景的覆蓋區域，并把它切成了兩片:

那個明亮一些的版本也需要這樣做，一旦這些圖片都作好了（1, 2, 3, 4），我們就可以進入CSS標記部分了。

創建標簽

當發現了如何利用CSS創建橫向列表后，你可能會注意到，至少有兩種方法能夠將一組列表排列成一行。一種是用內嵌方框，另一種是利用浮動屬性。它們各有利弊。而且每一種方法都會遇到CSS中非常奇怪的方面，很容易讓人迷惑。

第一種方法，也是最常用的方法，就是將列表的項目屬性設置為“內嵌”，這種方法由于非常簡便而具有相當的吸引力。然而，對于我們將要討論的“滑動門”技術來說，這種內嵌的方法在某些特定的瀏覽器上會出現渲染問題。第二種方法，也是我們所要關注的，是利用“浮動”屬性將列表項排成一橫行。而浮動屬性也會同樣令人無所適從。它們那些看來不協調的行為并不遵從自然邏輯。盡管如此，處理多個浮動元素的基本認識以及將它們確實可靠地處理為可用元素的方法依然會取得另人驚奇的效果。

我 們會在一個浮動的容器中創建多個浮動的元素。這樣做是為了使外部容器緊密圍繞在內容元素的周圍。利用這種方法，我們可以給標簽后的空白加上背景。要切記， 在標簽之后布局的元素，一定要在CSS中用clear屬性重新定位它的位置。這樣是為了防止浮動標簽影響布局中的其他頁面元素的位置。

那么，現在就讓我們看看這些標記語言：

<div id="header">
<ul>
<li><a href="#">Home</a></li>
<li id="current"><a href="#">News</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

事實上，頭部(#header)的層可能同時會包含網站的LOGO以及一個搜索框。在這個的例子中，我們會精簡每個錨點（anchor）中的href值。顯然，正常情況下這些值應該為錨點地址或者文件位置。

我 們最初的樣式化就是讓頭部（#header）的層浮動。這樣做是為了讓這個作為容器的層能夠真正地將它所容納的那些浮動列表項包在內部。由于這個元素是浮 動的，我們需要給它標記為“100%”的寬度。再給它加上臨時的黃色背景來確認這一父容器的伸縮能夠正好填滿標簽的整個背景區域。同時設置默認文字的屬 性，以保證容器內的文字看起來一致:

#header {
float:left;
width:100%;
background:yellow;
font-size:93%;
line-height:normal;
}

現在，我們將無序列表默認的內外補丁(padding)都設置為0，并將列表的項目符號去掉，給他們加上向左浮動的屬性：

#header ul {
margin:0;
padding:0;
list-style:none;
}
#header li {
float:left;
margin:0;
padding:0;
}

我們將錨點的顯示屬性設置為“塊(display:block;)”，這樣在控制它們的時候就不必擔心內嵌方框的問題了:

#header a {
display:block;
}

接下來，我們將右側的圖片添加到列表項的背景中（添加的部分用粗體顯示）：

#header li {
float:left;
background:url("norm_right.gif")
no-repeat right top;
margin:0;
padding:0;
}

在加入左邊的圖片之前，我們先停下來看看到目前為止，效果一究竟是怎樣的。

- - -

現在，我們就可以將在上方顯示的左側圖片加入到錨點（內層元素）的背景中，與此同時，我們也加入了內補丁，將標簽擴展，給文字與標簽的邊緣間添加一些空白：

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px;
}

這些變化出現在效果二中。 看，現在標簽已經有了大體的形狀。對于這一點，IE5/Mac的用戶可能會感到奇怪了，“這是怎么了，為什么標簽會堆疊著伸展地穿過整個屏幕？”別急，我 們很快就要幫你解決這些問題。那么現在，盡可能地跟著我們繼續下去，如果手頭有其他瀏覽器的話，暫時先換一個來繼續往下看。IE5/Mac的問題一定會得 到很好的解決。

- - -

這時，普通的標簽背景已經做好了，接下來，需要為“當前”標簽加上背景。我們通過為當前標簽內的錨點加上id=“current”來實現對它的定位。由于并不需要改變當前標簽的其他設置，只需要更換背景，所以我們僅用以下的代碼即可：

				#header #current {
background-image:url("norm_right_on.gif");
}
#header #current a {
background-image:url("norm_left_on.gif");
}
				

		

在標簽的下方，我們想要有邊框出現，但是如果用對父容器#header設置下邊框的的方法，那么就無法消除當前標簽的下邊框。因此，我們用創建一幅新圖片的方法來代替，這幅圖片的底部包含了我們想要的邊框，同時將圖片的顏色設置為少許的梯度，就像下面這幅：

我們將這幅圖片用于容器#header的背景（代替了我們剛才所用的黃色），并將它設置為底部對齊，給容器設置與之相應的背景色。同時，將body的內補丁移除，給列表ul的上，左，右側，分別加上10像素的內補丁：

#header {
float:left;
width:100%;
background:#DAE0D2 url("bg.gif")
repeat-x bottom;
font-size:93%;
line-height:normal;
}
#header ul {
margin:0;
padding:10px 10px 0;
list-style:none;
}

要 完成標簽導航欄，還需要將當前標簽的下邊框消除。你可能會想到，給其他標簽加上與#header背景色完全相同的下邊框，然后給當前標簽加上一個白色的下 邊框。然而，那些觀察非常仔細的人還是會在這樣的做法中發現些許破綻。我們用給錨點加上內補丁的方法來替代它，這樣就可以創建出完美的方形邊角了。在下面 經過放大的示意圖中就可以看出區別：

為了實現這樣的效果，我們為其他標簽設置了4像素的內補丁，而當前標簽的設置為5像素：

#header a {
display:block;
background:url("norm_left.gif")
no-repeat left top;
padding:5px 15px 4px;
}
#header #current a {
background-image:url("norm_left_on.gif");
padding-bottom:5px;
}

上面的代碼保證了在效果三中下邊框只出現在其他標簽上，而不出現在當前標簽上。

打磨完工

敏 銳的目光可能會發現，在上一效果圖中，圓角標簽的角落上仍然留有白色的色塊。這些前方圖片上的不透明的邊角擋住了導航欄的背景。從理論上說，我們可以將這 些邊角的背景修改為與導航欄背景色一致來達到看似透明的效果。但是我們的導航標簽可能會改變高度，超過背景的范圍，或者背景色出現更改。因此，不如直接將 前方背景的邊角設置為透明，這樣更為方便。如果圓角是抗鋸齒的話，我們可以讓它的邊緣以背景色進行柔化。

現在邊角透明了，可是右側圖片的一部分出現在左側透明的邊角后。為了抵消它，我們在項目列表的左側加上與左側圖片相同大小的9像素的內補丁。由于項目列表加上了左內補丁，就需要在錨點的左側減去一部分內補丁，以保證文字的居中(15px - 9px = 6px)：

#header li {
float:left;
background:url("right.gif")
no-repeat right top;
margin:0;
padding:0 0 0 9px;
}
#header a {
display:block;
background:url("left.gif")
no-repeat left top;
padding:5px 15px 4px 6px;
}

然而，并不能就這樣把它放在那兒，因為左側的圖片由于剛才加上的9像素的內補丁而被推開了。既然左右兩幅圖片的內邊緣已經相連了，我們就沒必要非將左側的圖片保持在上方。因此，我們交換一下左右兩幅圖片，讓他們應用到對方的元素上。當然，當前標簽也需要這樣做：

#header li {
float:left;
background:url("left.gif")
no-repeat left top;
margin:0;
padding:0 0 0 9px;
}
#header a, #header strong, #header span {
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
}
#header #current {
background-image:url("left_on.gif");
}
#header #current a {
background-image:url("right_on.gif");
padding-bottom:5px;
}

一旦這樣做好了，就完成了效果四。 注意，為了使邊角透明而做的這一系列調整使得每個標簽的左側都有一小部分不可點擊。這一非活動區域是在文字之外的，所以并不是非常引人注目。并不是每個站 點都要求標簽背景是透明的，如果不希望有這一小部分非活動區域的話，盡可以用純色的背景和方角來代替透明和圓角。在我們的例子中，依然保持透明和圓角的效 果。

- - -

剩下的調整就很簡單了，我們一并來完成：將標簽字體設置為粗體，正常標簽的字體顏色設置為棕色，當前標簽顏色設置為深灰色，去掉下滑線，將鼠標懸浮時的字體顏色同樣設置為深灰色。這些增加的變化在效果五中表現出來。

一致性的特例

在效果二之后，我們認識到，在IE5/Mac中，標簽被擴大到與頁面同寬，導致了他們垂直堆疊在下一個的上方，這并不是我們想要的效果。

在大多數瀏覽器中，浮動會引起收縮的效果-它會收縮到僅能容納其所含元素的最小空間。如果浮動元素中包含的是圖片，那么它會收縮到與圖片大小相同，如果僅包含文字的話，它會收縮到與最長的不換行文字同寬。

而 在IE5/Mac中，當一個自動調整寬度的塊級元素（block-level element）被插入到另一浮動元素中時，就會出現問題。其他瀏覽器依然會盡可能地收縮浮動元素，并不理會它所容納的塊級元素。但是IE5/Mac在這 種情況下并不收縮浮動元素，反而將浮動和塊級元素擴展到最大的可用寬度。在這種情況下，我們需要將錨點也同時浮動，但是僅在IE5/Mac中這樣做，以免 影響到其他瀏覽器。之后，我們就可以用反斜杠注釋法（Commented Backslash Hack）來隱藏這些代碼，使其僅在IE5/Mac下工作：

#header a {
float:left;
display:block;
background:url("right.gif")
no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#header a {float:none;}
/* End IE5-Mac hack */

這回，IE5/Mac瀏覽器應該顯示我們所希望的效果了，見效果六。 在非IE5/Mac瀏覽器中，應該沒有任何變化。注意，IE5.0/Mac中出現了很多渲染錯誤，在IE5.1中已得到更正。因此，在IE5.0中出現的 錯誤已經超出了我所應該作為特例而修改的范疇了。由于現在升級到5.1并不困難，而OS 9 Macs用戶中仍然使用IE5.0的已經相當的少了。

適用性

我 們剛剛看過如何運用滑動門技術創建純文本的導航標簽,它們是由一系列錨點組成的無序列表標記而成,并賦予一些個性化的樣式。它加載快速,易于維護,并且可 以在不破壞原有設計的同時對其文本進行大比例的縮放。那么這項技術足夠靈活嗎？可以勝任創建各種類型的精美導航欄的任務嗎?

無需懷疑，這項技術的使用只局限于我們的想象力。最終效果只展示出了其中一種可能性。但是我們不應被一種設計局限了自己的想法.

例如,標簽沒必要非得對稱。我很快就制作出這些標簽的2.0版， 在這個版本中，并沒有使用3D陰影效果,這樣更利于展示平面色彩,有角的邊緣，以及更寬,更細致的左邊框。正如2.0版所示，我們甚至可以交換左右兩幅圖 片的位置，當然，這些均取決于你的設計。通過細致的計劃和巧妙的圖片處理,我們盡可以將下邊框徹底放棄,這更有利于標簽圖片與背景的搭配,就如在我充滿靈 感的3.0版中所表現的那樣。如果你的瀏覽器支持在樣式表間切換的話,你甚至可以看到這個主文件在三個不同的版本的樣式間切換（注：Firefox和Opera支持樣式切換）。

其 他我們沒有討論到的效果可以基于這項技術使用。在一路舉來的這個例子中,我只改變了鼠標懸浮時的文字顏色，但除此之外你還可以將整個背景替換掉，以創造出 更為有趣的翻轉效果。只要有兩個嵌套的HTML元素標記，就可以利用CSS為他們加上背景，創造出我們甚至想都沒想過的的效果。在這個例子中我制作了一個 水平的導航標簽,但是滑動門技術在其他許多情況下都是可以使用的。

那么,你會用它做什么呢?