CSS網(wǎng)頁(yè)布局全精通

互聯(lián)網(wǎng) 發(fā)布時(shí)間：2008-10-17 19:25:26 作者：佚名

在本文中將使用四種常見的做法,結(jié)合CSS于結(jié)構(gòu)化標(biāo)記語(yǔ)法制作兩欄布局.很快地就會(huì)發(fā)現(xiàn),不用嵌套表格,間隔用的GIF也能做出分欄版面布局. 相關(guān)文章：CSS網(wǎng)頁(yè)布局開發(fā)小技巧24則稍后在"技巧延伸"中,將會(huì)討論Windows版Internet Explorer 5.0盒模型的問(wèn)題,以及繞

不止寬度
在這里以"盒模型Hack"達(dá)成顯示相同寬度,但是這個(gè)Hack其實(shí)能在任何想為IE5 for Windows提供不同CSS內(nèi)容時(shí)派上用場(chǎng).任何Hack都必須小心使用,同時(shí)只有在真正需要的時(shí)候才使用,記住 "盒模型Hack"的使用地點(diǎn)是個(gè)好主意,這樣才能在未來(lái)輕易拿掉它.
本文撰寫時(shí)仍有上百萬(wàn)網(wǎng)絡(luò)使用者仍然使用IE5 for Windows,因此這個(gè)補(bǔ)丁不可或缺.
下面這段"偽裝的欄位"原始出自2004年一月份的A List Apart雜志(http://www.alistapart.com/articles/fauxcolumns/).
偽裝的欄位
關(guān)于我個(gè)人網(wǎng)站的設(shè)計(jì),我最常被問(wèn)到的問(wèn)題是:
"你是如何讓右欄的背景色一路延伸到整頁(yè)底部的?"
其實(shí)這只是個(gè)簡(jiǎn)單的概念,真的.而且這個(gè)概念能應(yīng)用到本章開始所述的每種布局方法上.
垂直伸展
CSS最容易讓人感到挫折的性質(zhì)之一,是元素只會(huì)垂直伸展到真正需要的長(zhǎng)度.這代表如果在<div>里放一張200像素高的圖片,那么<div>就只會(huì)在頁(yè)面上延伸200像素.
當(dāng)你以<div>切割頁(yè)面段落,接著用本章開始時(shí)的方法用CSS完成多欄布局時(shí),這就會(huì)成為有趣的困境,某一欄可能比其他欄都長(zhǎng)(圖12-13),當(dāng)你想為每欄選用獨(dú)特的背景色彩時(shí),視內(nèi)容多寡而定,做出兩個(gè)一樣長(zhǎng)的欄位可能十分困難.

圖12-13 長(zhǎng)度不一樣的欄位
有幾個(gè)做法能讓闌尾看起來(lái)一樣長(zhǎng),不受欄位包含的內(nèi)容的影響.我準(zhǔn)備分享我的解決方法(適用于絕對(duì)定位布局法),而這個(gè)方法實(shí)在是莫名其妙的...簡(jiǎn)單.
作弊
這個(gè)難以啟齒的簡(jiǎn)單秘訣,是用一個(gè)垂直排列的背景圖片作出彩色欄位的錯(cuò)覺(jué).在SimpleBits(http://www.simplebits.com/),我用了類似圖12-14的背景圖片(為了示范而修改了比例):左邊有裝飾用條紋,中間留下寬闊的空白空間安放主要內(nèi)容,接著是一條1像素的邊框,然后是右側(cè)邊欄的淺棕色區(qū)域,跟著是反向的裝飾用條紋.

圖12-14 tile.gif 2像素高的背景圖片,預(yù)先分配好欄寬.
整個(gè)圖片沒(méi)有幾像素高,但是垂直平鋪之后,他就能造成一路到底的彩色欄位,不管欄位內(nèi)容多長(zhǎng)都無(wú)所謂.
CSS內(nèi)容
我為<body>標(biāo)簽加上這條CSS規(guī)則:
background: #ccc url(tile.gif) repeat-y 50% 0;
這會(huì)使整個(gè)頁(yè)面的背景色設(shè)為灰色,并且只垂直平鋪圖片(repeat-y),后面的50% 0代表背景圖片的定位:在這個(gè)例子里,是從瀏覽器視窗左邊緣算起50%(使圖片居中),并且緊貼上邊緣.
欄位定位
放好背景圖之后,在把我的定位布局放到上面,為左欄,右欄指定內(nèi)外補(bǔ)丁以確保它們會(huì)對(duì)齊正確位置:也就是背景圖創(chuàng)造出來(lái)的虛假欄位里(圖12-15).

圖12-15 平鋪背景圖創(chuàng)造出的彩色欄位
有個(gè)重點(diǎn)必須要注意:如果哪一欄指定了邊框,內(nèi)外補(bǔ)丁的話,就仍然用Tantek Celik的盒模型Hack為IE5 for Windows修正盒模型問(wèn)題(參照本章稍早的"盒模型問(wèn)題").
或者是,如果能夠只使用外補(bǔ)丁,避免邊框與內(nèi)補(bǔ)丁的話,就不需要加上盒模型Hack了,同時(shí),如果欄位的內(nèi)容只單純放在平鋪背景圖之上(透明顯示),那么要避免使用Hack也應(yīng)該很簡(jiǎn)單.
只要有用就好
雖然我以絕對(duì)定位法在自己的網(wǎng)站上做了兩欄布局,但是你也能用本章開始時(shí)提過(guò)的其他方法達(dá)成一樣好的效果.同樣的想法仍然適用:平鋪背景圖,接著再浮動(dòng)某個(gè)欄位,使其覆蓋在模擬的欄位背景上.
這是個(gè)簡(jiǎn)單的概念,但是能夠解決設(shè)計(jì)者在構(gòu)建CSS布局時(shí)經(jīng)常遇到的挫折之一.
結(jié)論
我希望本章能帶給你開始探索CSS布局的刺激世界,本章開始時(shí)我們看到了四種構(gòu)建版面布局的方式,其中三種用了float屬性,還有一種用了絕對(duì)定位.一定要去看看我列出的額外資源,里面有更多布局的技巧和示范.
我們也討論了盒模型Hack在建立具備邊框,內(nèi)補(bǔ)丁的欄位時(shí)有何重要性,讓這些效果在IE5 for Windows以及其他瀏覽器上表現(xiàn)一致.
最后,我分享了一個(gè)有用的技巧,讓你在設(shè)計(jì)CSS布局時(shí)能做出等高欄位,這是某些人認(rèn)為十分基本,但實(shí)現(xiàn)上經(jīng)常讓人感到挫折的設(shè)計(jì)目標(biāo).只要小小一個(gè)平鋪背景圖就能搞定,讓你得到能夠抵達(dá)頁(yè)面底部(不管內(nèi)容多長(zhǎng))的欄位.

上一頁(yè) 5 6 7 8 9下一頁(yè)閱讀全文