第9天:第一個CSS布局實例_基礎(chǔ)教程

接下來開始要真正設(shè)計布局了。和傳統(tǒng)的方法一樣，你首先要在腦海里有大致的輪廓構(gòu)想，然后用photoshop把它畫出來。你可能看到有關(guān)web標(biāo)準(zhǔn)的站點大都很樸素，因為web標(biāo)準(zhǔn)更關(guān)注結(jié)構(gòu)和內(nèi)容，實際上它與網(wǎng)頁的美觀沒有根本沖突，你想怎么設(shè)計就怎么設(shè)計，用傳統(tǒng)表格方法實現(xiàn)的布局，用DIV也可以實現(xiàn)。技術(shù)有一個成熟的過程，把DIV看成和TABLE一樣的工具，如何運用就看你的想象力了。

注：在實際應(yīng)用過程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取舍在于你的價值判斷。好，不羅嗦了，我們開始：

1.確定布局

w3cn的最初設(shè)計草圖如下：

用表格的設(shè)計方法的話，一般都是上中下三行布局。用DIV的話，我考慮使用三列來布局,成為這樣。

2.定義body樣式

先定義整個頁面的body的樣式,代碼如下：

body { MARGIN: 0px;
PADDING: 0px;
BACKGROUND: url(../images/bg_logo.gif) #FEFEFE no-repeat right bottom;
FONT-FAMILY: 'Lucida Grande','Lucida Sans Unicode','宋體','新宋體',arial,verdana,sans-serif;
COLOR: #666;
FONT-SIZE:12px;
LINE-HEIGHT:150%; }

以上代碼的作用在上一天的教程有詳細說明，大家應(yīng)該一看就明白。定義了邊框邊距為0；背景顏色為#FEFEFE，背景圖片為bg_logo.gif，圖片位于頁面右下角，不重復(fù)；定義了字體尺寸為12px；字體顏色為#666;行高150%。

3.定義主要的div

初次使用CSS布局，我決定采用固定寬度的三列布局(比自適應(yīng)分辨率的設(shè)計簡單,hoho，別說我偷懶，先實現(xiàn)簡單的，增加點信心嘛！)。分別定義左中右的寬度為200:300:280，在CSS中如下定義:

/*定義頁面左列樣式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定義頁面中列樣式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定義頁面右列樣式*/
#right{ POSITION: absolute;
LEFT:500px;
TOP:0px;
WIDTH:280px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #FFF; }

注意：定義中列和右列div我都采用了POSITION: absolute;，然后分別定義了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;這是這個布局的關(guān)鍵，我采用了層的絕對定位。定義中間列距離頁面左邊框200px，距離頂部0px；定義右列距離頁面左邊框500px，距離頂部0px；。

這時候整個頁面的代碼是：

頁面左列
頁面中列
頁面右列

這時候頁面的效果僅僅可以看到三個并列的灰色矩形，和一個背景圖。但是我希望高度是滿屏的，怎么辦呢？

4.100%自適應(yīng)高度?

為了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設(shè)置"height:100%;"，但發(fā)現(xiàn)完全沒有預(yù)想的自適應(yīng)高度效果。經(jīng)過一番嘗試后，我只好給每個div一個絕對高度:"height:1000px;"，并且隨著內(nèi)容的增加，需要不斷修正這個值。難道沒有辦法自適應(yīng)高度了嗎？隨著阿捷自己學(xué)習(xí)的深入，發(fā)現(xiàn)一個變通的解決辦法，實際上根本不需要設(shè)置100%，我們已經(jīng)被table思維禁錮太深了，這個辦法在下一節(jié)的學(xué)習(xí)中詳細介紹。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com