WEB2.0標準教程：第九天 第一個CSS布局執行個體

接下來開始要真正設計布局了。和傳統的方法一樣，你首先要在腦海裡有大致的輪廓構想，然後用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; }