接下來開始要真正設計布局了。和傳統的方法一樣，你首先要在腦海裡有大致的輪廓構想，然後用photoshop把它畫出來。你可能看到有關web標準的網站大都很樸素，因為web標準更關注結構和內容，實際上它與網頁的美觀沒有根本衝突，你想怎麼設計就怎麼設計，用傳統表格方法實現的布局，用DIV也可以實現。技術有一個成熟的過程，把DIV看成和TABLE一樣的工具，如何運用就看你的想象力了。
註：在實際應用過程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取捨在於你的價值判斷。好，不羅嗦了，我們開始：
1.確定布局w3cn的最初設計草圖如下：
用表格的設計方法的話，一般都是上中下三行布局。用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%; }
以上代碼的作用在上一天的教程有詳細說明，大家應該一看就明白。定義了邊框邊距為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；。
這時候整個頁面的代碼是：
<!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>歡迎進入新《網頁設計師》: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="新網頁設計師,web標準的教程網站,推動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" href="http://www.w3cn.org/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" rev="stylesheet" href="css/style01.css" type="text/css" media="all" />
</head>
<body>
<div id="left">頁面左列</div>
<div id="middle">頁面中列</div>
<div id="right">頁面右列</div>
</body>
</html>
這時候頁面的效果僅僅可以看到三個並列的灰色矩形，和一個背景圖。但是我希望高度是滿屏的，怎麼辦呢？
4.100%自適應高度?為了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設定"height:100%;"，但發現完全沒有預想的自適應高度效果。經過一番嘗試後，我只好給每個div一個絕對高度:"height:1000px;"，並且隨著內容的增加，需要不斷修正這個值。難道沒有辦法自適應高度了嗎？隨著阿捷自己學習的深入，發現一個變通的解決辦法，實際上根本不需要設定100%，我們已經被table思維禁錮太深了，這個辦法在下一節的學習中詳細介紹。
第10天:自適應高度如果我們想在3列布局的最後加一行頁尾，放著作權之類的資訊。就遇到必須對齊3列底部的問題。在table布局中，我們用大表格嵌套小表格的方法，可以很方便對齊三列；而用div布局，三列獨立分散，內容高低不同，就很難對齊。其實我們完全可以嵌套div，把三列放進一個DIV中，就做到了底部對齊。下面是實現例子(白色背景框類比一個頁面)：
Body 這裡是#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}這裡是#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }包含了#menu,#sidebar和#content 這裡是#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; }這裡是#sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }，背景顏色用的是#main的背景色
這裡是#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}
這裡是主要內容，根據內容自動適應高度
這裡是主要內容，根據內容自動適應高度
這裡是主要內容，根據內容自動適應高度
這裡是#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。這個例子的頁面主要代碼如下：
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
具體樣式表都寫在相應版塊裡了。重點在於#mainbox層嵌套了#menu,#sidebar和#content三個層。當#content的內容增加，#content的高度就會增高，同時#mainbox的高度也會撐開，#footer層就自動下移。這樣就實現了高度的自適應。
另外值得注意的是：#menu和#content都是浮動在頁面右面"FLOAT: right;",#sidebar是浮動在#menu層的左面"FLOAT: left;"，這是浮動法定位，還可以採用絕對位置來實現這樣的效果。
這個方法存在另一個問題，就是側列#sidebar的背景無法百分之百。一般的解決辦法就是用body的背景色來填充滿。(不能使用#mainbox的背景色，因為在Mozilla等瀏覽器中#mainbox的背景色失效。)
好了，主要的架構已經搭建完畢,剩下的工作只是往裡面添磚加瓦。如果你希望嘗試其他布局，推薦看看以下文章:
Tips:[onestab 的"P.I.E"專題] 還有更多精彩介紹，推薦去看看。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
