欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

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

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

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

相關(guān)文章

  • css九宮格布局的五種方法

    本文主要介紹了css九宮格布局的五種方法，內(nèi)容包括grid布局、flex布局、table布局、float浮動定位、inline-block+letter-spacing屬性這五種方法的實現(xiàn)，感興趣的可以了解下
    2023-09-18

  • CSS實現(xiàn)元素水平垂直居中的幾種方法

    在Web開發(fā)中，經(jīng)常會遇到需要將元素水平和垂直居中的情況,今天，將為大家分享幾種CSS方法，讓你的元素輕松居中，讓頁面更美觀吸引人，感興趣的小伙伴可以自己動手試一試
    2023-09-08

  • css實現(xiàn)元素居中的6種方法

    相信大家在面試的時候也會經(jīng)常碰到css實現(xiàn)元素居中的方法，下面我介紹6種方法給大家，歡迎大家評論區(qū)交流
    2023-09-07

  • flex布局中使用flex-wrap實現(xiàn)換行的項目實踐

    最近需要做個換行的布局，本文主要介紹了flex布局中使用flex-wrap實現(xiàn)換行的項目實踐，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需
    2022-06-16

  • CSS布局之浮動(float)和定位(position)屬性的區(qū)別

    今天看到有朋友留言問浮動和定位有什么區(qū)別，如何使用？今天找了篇文章，講的比較通俗易懂，供大家參考
    2021-09-23

  • css實現(xiàn)元素居中的N種方法

    這篇文章主要介紹了css實現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02

  • div水平布局兩邊對齊的三種實現(xiàn)方法

    這篇文章主要介紹了div水平布局兩邊對齊的三種實現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2021-01-21

  • waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)

    這篇文章主要介紹了waterfall瀑布流布局+動態(tài)渲染的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2021-01-19

  • 頁面中有間隔的方格布局如何完美實現(xiàn)方法

    這篇文章主要介紹了頁面中有間隔的方格布局如何完美實現(xiàn)方法。文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來
    2020-11-27

  • css實現(xiàn)六種自適應(yīng)兩欄布局方式

    這篇文章主要介紹了css實現(xiàn)六種自適應(yīng)兩欄布局方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)
    2020-10-28

最新評論