WEB標(biāo)準(zhǔn)教程第9天：第一個(gè)CSS布局實(shí)例_Web標(biāo)準(zhǔn)教程

編輯Tag賺U幣

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　1.確定布局
　　
　　w3cn的最初設(shè)計(jì)草圖如下： w3cn設(shè)計(jì)草圖

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

　　2.定義body樣式

　　先定義整個(gè)頁面的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è)計(jì)簡單,hoho，別說我偷懶，先實(shí)現(xiàn)簡單的，增加點(diǎ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;這是這個(gè)布局的要害，我采用了層的絕對定位。定義中間列距離頁面左邊框200px，距離頂部0px；定義右列距離頁面左邊框500px，距離頂部0px；。

　　這時(shí)候整個(gè)頁面的代碼是：

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 　　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>歡迎進(jìn)入新《網(wǎng)頁設(shè)計(jì)師》:web標(biāo)準(zhǔn)教程及推廣</title>

　　</head>

　　<body>

　　</body>

　　</html>

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

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

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