標簽的創造
當你在研究用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。
40個可愛粉色兒童房設計裝修設計2018-04-22
100款國外食品包裝設計集包裝設計2017-07-17
40幅日本海報設計作品海報設計2017-07-04
46款茶品牌和包裝設計欣賞包裝設計2017-04-14
20款現代簡約風格名片設計名片設計2016-04-18
59款日本優秀logo設計欣賞標志設計2016-03-29
10個CSS簡寫/優化技巧CSS教程2013-06-04
css的margin縮寫方式CSS教程2012-05-23
CSS網頁布局時常犯的幾種CSS教程2009-09-28
CSS浮動屬性Float詳解CSS教程2009-09-17
CSS定位屬性Position詳解CSS教程2009-09-17
CSS布局教程:絕對定位和相CSS教程2009-07-15