接下來(lái)開始要真正設(shè)計(jì)布局了。和傳統(tǒng)的方法一樣，你首先要在腦海里有大致的輪廓構(gòu)想，然后用photoshop把它畫出來(lái)。你可能看到有關(guān)web標(biāo)準(zhǔn)的站點(diǎn)大都很樸素，因?yàn)閣eb標(biāo)準(zhǔn)更關(guān)注結(jié)構(gòu)和內(nèi)容，實(shí)際上它與網(wǎng)頁(yè)的美觀沒(méi)有根本沖突，你想怎么設(shè)計(jì)就怎么設(shè)計(jì)，用傳統(tǒng)表格方法實(shí)現(xiàn)的布局，用DIV也可以實(shí)現(xiàn)。技術(shù)有一個(gè)成熟的過(guò)程，把DIV看成和TABLE一樣的工具，如何運(yùn)用就看你的想象力了。
注：在實(shí)際應(yīng)用過(guò)程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取舍在于你的價(jià)值判斷。好，不羅嗦了，我們開始：
1.確定布局
w3cn的最初設(shè)計(jì)草圖如下：
用表格的設(shè)計(jì)方法的話，一般都是上中下三行布局。
用DIV的話，我考慮使用三列來(lái)布局,成為這樣
2.定義body樣式
先定義整個(gè)頁(yè)面的body的樣式,代碼如下：
以上代碼的作用在上一天的教程有詳細(xì)說(shuō)明，大家應(yīng)該一看就明白。定義了邊框邊距為0；背景顏色為#FEFEFE，背景圖片為bg_logo.gif，圖片位于頁(yè)面右下角，不重復(fù)；定義了字體尺寸為12px；字體顏色為#666;行高150%。
3.定義主要的div
初次使用CSS布局，我決定采用固定寬度的三列布局(比自適應(yīng)分辨率的設(shè)計(jì)簡(jiǎn)單,hoho，別說(shuō)我偷懶，先實(shí)現(xiàn)簡(jiǎn)單的，增加點(diǎn)信心嘛！)。分別定義左中右的寬度為200:300:280，在CSS中如下定義:
注意： 定義中列和右列div我都采用了POSITION:absolute;，然后分別定義了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;這是這個(gè)布局的關(guān)鍵，我采用了層的絕對(duì)定位。定義中間列距離頁(yè)面左邊框200px，距離頂部0px；定義右列距離頁(yè)面左邊框500px，距離頂部0px；。
這時(shí)候整個(gè)頁(yè)面的代碼是：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
這時(shí)候頁(yè)面的效果僅僅可以看到三個(gè)并列的灰色矩形，和一個(gè)背景圖。但是我希望高度是滿屏的，怎么辦呢？
4.100%自適應(yīng)高度?
為了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設(shè)置"height:100%;"，但發(fā)現(xiàn)完全沒(méi)有預(yù)想的自適應(yīng)高度效果。經(jīng)過(guò)一番嘗試后，我只好給每個(gè)div一個(gè)絕對(duì)高度:"height:1000px;"，并且隨著內(nèi)容的增加，需要不斷修正這個(gè)值。難道沒(méi)有辦法自適應(yīng)高度了嗎？隨著小魚自己學(xué)習(xí)的深入，發(fā)現(xiàn)一個(gè)變通的解決辦法，實(shí)際上根本不需要設(shè)置100%，我們已經(jīng)被table思維禁錮太深了，這個(gè)辦法在下一節(jié)的學(xué)習(xí)中詳細(xì)介紹。
注：在實(shí)際應(yīng)用過(guò)程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取舍在于你的價(jià)值判斷。好，不羅嗦了，我們開始：
1.確定布局
w3cn的最初設(shè)計(jì)草圖如下：
用表格的設(shè)計(jì)方法的話，一般都是上中下三行布局。
用DIV的話，我考慮使用三列來(lái)布局,成為這樣
2.定義body樣式
先定義整個(gè)頁(yè)面的body的樣式,代碼如下：
程序代碼
body{MARGIN:0px;
PADDING:0px;
BACKGROUND:url(../images/bg_logo.gif)#FEFEFEno-repeatrightbottom;
FONT-FAMILY:'LucidaGrande','LucidaSansUnicode','宋體','新宋體',arial,verdana,sans-serif;
COLOR:#666;
FONT-SIZE:12px;
LINE-HEIGHT:150%;}
PADDING:0px;
BACKGROUND:url(../images/bg_logo.gif)#FEFEFEno-repeatrightbottom;
FONT-FAMILY:'LucidaGrande','LucidaSansUnicode','宋體','新宋體',arial,verdana,sans-serif;
COLOR:#666;
FONT-SIZE:12px;
LINE-HEIGHT:150%;}
以上代碼的作用在上一天的教程有詳細(xì)說(shuō)明，大家應(yīng)該一看就明白。定義了邊框邊距為0；背景顏色為#FEFEFE，背景圖片為bg_logo.gif，圖片位于頁(yè)面右下角，不重復(fù)；定義了字體尺寸為12px；字體顏色為#666;行高150%。
3.定義主要的div
初次使用CSS布局，我決定采用固定寬度的三列布局(比自適應(yīng)分辨率的設(shè)計(jì)簡(jiǎn)單,hoho，別說(shuō)我偷懶，先實(shí)現(xiàn)簡(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;}
#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)鍵，我采用了層的絕對(duì)定位。定義中間列距離頁(yè)面左邊框200px，距離頂部0px；定義右列距離頁(yè)面左邊框500px，距離頂部0px；。
這時(shí)候整個(gè)頁(yè)面的代碼是：
HTML代碼
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
這時(shí)候頁(yè)面的效果僅僅可以看到三個(gè)并列的灰色矩形，和一個(gè)背景圖。但是我希望高度是滿屏的，怎么辦呢？
4.100%自適應(yīng)高度?
為了保持三列有同樣的高度，我嘗試在#left、#middle和#right中設(shè)置"height:100%;"，但發(fā)現(xiàn)完全沒(méi)有預(yù)想的自適應(yīng)高度效果。經(jīng)過(guò)一番嘗試后，我只好給每個(gè)div一個(gè)絕對(duì)高度:"height:1000px;"，并且隨著內(nèi)容的增加，需要不斷修正這個(gè)值。難道沒(méi)有辦法自適應(yīng)高度了嗎？隨著小魚自己學(xué)習(xí)的深入，發(fā)現(xiàn)一個(gè)變通的解決辦法，實(shí)際上根本不需要設(shè)置100%，我們已經(jīng)被table思維禁錮太深了，這個(gè)辦法在下一節(jié)的學(xué)習(xí)中詳細(xì)介紹。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
