注:在實際應用過程中,DIV在有些地方的確不如表格方便,比如背景色的定義。但任何事情都有得有失,取捨在於你的價值判斷。好,不羅嗦了,我們開始:
1.確定佈局
w3cn的最初設計草圖如下:
用表格的設計方法的話,一般都是上中下三行佈局。
用DIV的話,我考慮使用三列來佈局,成爲這樣
2.定義body樣式
先定義整個頁面的body的樣式,代碼如下:
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%; }
以上代碼的作用在上一天的教程有詳細說明,大家應該一看就明白。定義了邊框邊距爲0;背景顏色爲#FEFEFE,背景圖片爲bg_logo.gif,圖片位於頁面右下角,不重複;定義了字體尺寸爲12px;字體顏色爲#666;行高150%。
3.定義主要的div
初次使用CSS佈局,我決定採用固定寬度的三列布局(比自適應分辨率的設計簡單,hoho,別說我偷懶,先實現簡單的,增加點信心嘛!)。分別定義左中右的寬度爲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;這是這個佈局的關鍵,我採用了層的絕對定位。定義中間列距離頁面左邊框200px,距離頂部0px;定義右列距離頁面左邊框500px,距離頂部0px;。
這時候整個頁面的代碼是:
這時候頁面的效果僅僅可以看到三個並列的灰色矩形,和一個背景圖。但是我希望高度是滿屏的,怎麼辦呢?
4.100%自適應高度?
爲了保持三列有同樣的高度,我嘗試在#left、#middle和#right中設置"height:100%;",但發現完全沒有預想的自適應高度效果。經過一番嘗試後,我只好給每個div一個絕對高度:"height:1000px;",並且隨着內容的增加,需要不斷修正這個值。難道沒有辦法自適應高度了嗎?隨着阿捷自己學習的深入,發現一個變通的解決辦法,實際上根本不需要設置100%,我們已經被table思維禁錮太深了,這個辦法在下一節的學習中詳細介紹。