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

作者:佚名 來源:天極 時間:2006-09-29 標簽: 滑動

 

標簽的創造

當你在研究用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。

 

相關文章:

推薦設計

最新文章