CSS的滑動門技術研究(2)

當你在研究用CSS來創造水平列表時，會發現至少有兩種方法將列表項安排在同一行里。兩種方法各有千秋，但都需要CSS來解決布局所帶來的混亂。一種方法使用inline box，另一種則用floats。

方法一，可能是比較普遍的一種，是將列表項都inline顯示。inline方法的魅力在于它的簡易性。但是，對于我們即將談到的滑動門技術來說，inline方法在特定的瀏覽器上存在一些解釋上問題。方法二，是我們將要關注的，即用floats將列表項安排在同一行里。令人沮喪的是，floats表面上矛盾的行為正巧回避了自然的邏輯。盡管如此，對于解決多重浮動元素的基本認識，以及可靠浮動的意義，仍是值得討論的。

我們將用另一種浮動元素來解決浮動元素的排列問題。這樣，父類元素將子類元素完全包括起來。于是，我們就可以為標簽加上背景色彩和背景圖像。非常重要的一點必須記住，緊跟在標簽后的文本元素用CSS中的clear功能來清除浮動對象。這樣避免了浮動標簽影響頁面上其它元素的位置。

我們從以下的標記開始：

現實中，#header div可能同樣包含logo和搜索框。對于我們的例子，我們要縮短每一個錨鏈中超鏈接的值。顯然，這些值應該正確的包含文件或者目錄的位置。

我們從定位#header容器開始設計列表。這樣確保了這個容器確確實實的充當了容器的作用，以包容它內部浮動的列表項。既然元素是浮動的，我們同樣需要聲明它的寬度為100%。加入臨時的黃色背景以確保父類容器完全填滿標簽后面的整個區域。同樣，設定默認的文本屬性，確保樣式的統一：

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

現在，我們同樣需要為無序列表設定默認的margin/padding值為0，并去掉列表項前面的標記。每個列表項左浮動：

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

設定錨鏈強制作為塊對象呈遞，我們便可無憂的控制所有的樣式：

#header a { display:block; }

下一步，我們將右側的背景圖像加入到列表項中去（改變如粗體所示）：

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

在加入左側圖像之前，我們可以在效果1種看看目前為止的效果。（在效果中，忽略body中的規則。僅設定基本margin,padding,colors,text的屬性。）

---

現在我們可以將左側圖像放置在錨鏈的左邊（容器內的元素）。我們同時加入padding，擴大標簽并將文本從標簽的邊緣推開：

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

這樣我們就得到了效果2。注意我們的標簽是如何成型的。在這里，IE5/Mac的用戶會立刻驚奇道，“天啊，我的標簽垂直堆在一起并且延伸至整個屏幕！”不要著急，我們馬上幫你解決。眼下，盡量按照下面去做，或者方便的話，臨時改換其他的瀏覽器，并且IE5/Mac版本的問題會馬上得到解決。

---

現在，一般標簽的背景圖像已經完成了，我們要為“當前”標簽更換圖像。我們通過對目標列表項加入id="current"和錨鏈來實現。既然不需要改變背景的其他外觀，圖像除外，我們就使用background-image的特性：

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

我們要在標簽下添加一條邊框。但是，將邊框屬性應用于父類的#header容器上，將不能解決“當前”標簽無需邊框的問題。于是我們制作新的帶有邊框的圖像以代替它。同樣，我們可以為它加入漸變效果：

我們將圖像放置到#header容器的背景中去（代替原有的黃色背景），將背景圖像移至到最下方，并為圖像上方留出的空白添加相應的背景顏色。同時，去掉由body繼承下來的padding，為ul的上、左、右邊加進10像素的padding：

#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背景圖像中去，然后將“當前”標簽的底部邊框顏色改為白色。但是，對于挑剔的觀察者，還是會發現一些細小的差別。于是，我們改變錨鏈的padding，為“當前”標簽創造出直角來，如下面放大的例子：

我們通過減少1像素普通錨鏈的底部padding值（5px-1px=4px）來實現，然后為“當前”錨鏈補上減去的padding。

#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; }

經過改變，底部邊框將在普通標簽中出現，而在“當前”標簽中則隱藏了起來。于是，我們得到了效果3。