[被屏蔽廣告] 注：在實(shí)際應用過(guò)程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取舍在于你的價(jià)值判斷。好，不羅嗦了，我們開(kāi)始：
w3cn的最初設計草圖如下：
用表格的設計方法的話(huà)，一般都是上中下三行布局
先定義整個(gè)頁(yè)面的body的樣式,代碼如下：
body { MARGIN: 0px;以上代碼的作用在上一天的教程有詳細說(shuō)明，大家應該一看就明白。定義了邊框邊距為0；背景顏色為#FEFEFE，背景圖片為bg_logo.gif，圖片位于頁(yè)面右下角，不重復；定義了字體尺寸為12px；字體顏色為#666;行高150%。
初次使用CSS布局，我決定采用固定寬度的三列布局(比自適應分辨率的設計簡(jiǎn)單,hoho，別說(shuō)我偷懶，先實(shí)現簡(jiǎn)單的，增加點(diǎn)信心嘛！)。分別定義左中右的寬度為200:300:280，在CSS中如下定義:
/*定義頁(yè)面左列樣式*/
#left{ WIDTH:200px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #CDCDCD;
}
/*定義頁(yè)面中列樣式*/
#middle{ POSITION: absolute;
LEFT:200px;
TOP:0px;
WIDTH:300px;
MARGIN: 0px;
PADDING: 0px;
BACKGROUND: #DADADA;
}
/*定義頁(yè)面右列樣式*/
#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è)布局的關(guān)鍵，我采用了層的絕對定位。定義中間列距離頁(yè)面左邊框200px，距離頂部0px；定義右列距離頁(yè)面左邊框500px，距離頂部0px；。
這時(shí)候整個(gè)頁(yè)面的代碼是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title>歡迎進(jìn)入新《網(wǎng)頁(yè)設計師》:web標準教程及推廣</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta content="all" name="robots" />
<meta name="author" content="ajie(at)netease.com,阿捷" />
<meta name="Copyright" content="www.w3cn.org,自由版權,任意轉載" />
<meta name="description" content="新網(wǎng)頁(yè)設計師,web標準的教程站點(diǎn),推動(dòng)web標準在中國的應用." />
<meta content="web標準,教程,web, standards, xhtml, css, usability, accessibility" name="keywords" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<body>
<div id="left">頁(yè)面左列</div>
<div id="middle">頁(yè)面中列</div>
<div id="right">頁(yè)面右列</div>
</body>
</html>
這時(shí)候頁(yè)面的效果僅僅可以看到三個(gè)并列的灰色矩形，和一個(gè)背景圖。但是我希望高度是滿(mǎn)屏的，怎么辦呢？
為了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設置"height:100%;"，但發(fā)現完全沒(méi)有預想的自適應高度效果。經(jīng)過(guò)一番嘗試后，我只好給每個(gè)div一個(gè)絕對高度:"height:1000px;"，并且隨著(zhù)內容的增加，需要不斷修正這個(gè)值。難道沒(méi)有辦法自適應高度了嗎？隨著(zhù)阿捷自己學(xué)習的深入，發(fā)現一個(gè)變通的解決辦法，實(shí)際上根本不需要設置100%，我們已經(jīng)被table思維禁錮太深了，這個(gè)辦法在下一節的學(xué)習中詳細介紹。
聯(lián)系客服
