陳翠娥

摘 要：利用DIV+CSS代替表格進(jìn)行網(wǎng)頁布局是目標(biāo)比較流行的頁面排版方式。使用這樣的布局方式實現(xiàn)了網(wǎng)頁的表現(xiàn)與內(nèi)容相分離，增加了代碼的可讀性，從而使開發(fā)和維護(hù)都變得簡單，增加了信息跨平臺的可用性。

關(guān)鍵詞：DIV+CSS；網(wǎng)頁布局

1 DIV+CSS布局案例解析

本案例通過一個網(wǎng)頁首頁布局實例（如圖1所示）來講解如何通過DIV+CSS來進(jìn)行網(wǎng)頁布局，并通過詳細(xì)講解網(wǎng)頁頭部的制作來讓大家體會使用DIV+CSS來進(jìn)行網(wǎng)頁布局的神奇功效。

1.1 確定布局

圖片大致分為以下幾個部分：⑴頂部部分，其中包括menu菜單和baaner圖片；⑵內(nèi)容部分包括側(cè)邊欄和主體內(nèi)容；⑶底部包括一些版權(quán)信息。根據(jù)以上分析，我們可以得出該頁面的布局結(jié)構(gòu)，說明一下層的嵌套關(guān)系。至此，頁面布局規(guī)劃已經(jīng)完成，接下來我們需要做的就是開始書寫HTML代碼和CSS。

1.2 定義語義結(jié)構(gòu)

根據(jù)結(jié)構(gòu)規(guī)劃，在index頁面中的標(biāo)簽對中采用DIV將這些結(jié)構(gòu)定義下來，代碼如下：

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

1.3 通過CSS進(jìn)行定位

首先確定網(wǎng)頁的全局樣式，然后在寫每一塊的單獨(dú)樣式，全局樣式的代碼如下：

body{padding：0； margin：0； background：url（images/body_bg.gif） 0 0 repeat-x #FFFFF2；

color：#676749；}

div， h1， h2， p， form， label， input， textarea， img， span{margin：0； padding：0；}

ul{margin：0； padding：0； list-style-type：none；}

全局樣式定義好以后，再定義網(wǎng)頁中幾大主要板塊的樣式，其代碼如下：

#container{width：768px；margin：0 auto；}

#header{ background：url（../images/header.gif） 0 0 no-repeat； width：768px；height：208px；

margin：0 auto； padding：7px 0 0 0； position：relative；}

#mainbody{width：762px； margin：0 auto； padding：21px 0 29px 10px；}

#leftside{ width：314px； border-right：#F5F5E2 solid 2px； float：left； }

#content{ width：408px； padding：0 0 0 38px； float：left； }

#footer{width：100%；height：50px； margin：0 auto； position：relative； background：url（../images/footer_bg.gif） 0 0 repeat-x #84845F； }

完成頁面整體框架的搭建，就可以開始對每個細(xì)致的部分進(jìn)行制作了，接下來開始制作網(wǎng)頁的header部分。Header部分包括menu菜單和banner圖片部分。本案例中菜單的制作采用li列表制作菜單，首先在header DIV標(biāo)簽對之間插入以下代碼：

• home
• about us
• service
• destiny
• chat
• detailing
• solutions

打開css文件創(chuàng)建header下ul和li的樣式，代碼如下：

#header ul{width：601px； height：38px； margin：0 auto； padding：0； }

#header ul li{ float：left； }

#header ul li a{display：block； padding：0 16px 0 16px； font：bold 10px/38px "Trebuchet MS"， Arial， Helvetica， sans-serif； color：#fff； background-color：#2A2A2A； text-decoration：none； text-transform：uppercase； float：left； }

#header ul li a：hover{background：url（images/nav_hover.gif） 0 0 repeat-x #330A0A； padding：0 15px 0 15px； border-left：#D63030 solid 1px； border-right：#D63030 solid 1px； color：#ECE8C3； }

#header ul li.home{ float：left； font：bold 10px/38px "Trebuchet MS"， Arial， Helvetica， sans-serif； color：#ECE8C3； text-decoration：none； text-transform：uppercase； background：url（images/nav_hover.gif） 0 0 repeat-x #330A0A； padding：0 15px 0 15px； border-left：#D63030 solid 1px； border-right：#D63030 solid 1px； }

接下來是banner部分的制作，包括logo和標(biāo)題說明，在ul后面插入一下代碼：

the best outputs for you Aliquam commodo purus sed orci.

打開css文件，寫入圖片、標(biāo)題和超鏈接css樣式，代碼：

#header img{ background：url（../images/logo.gif） 0 0 no-repeat； position：absolute； left：39px； top：77px；}

#header h1{display：block； width：215px； height：39px；background：url（../images/slogan.gif） 0 0 no-repeat； text-indent：-10000px； position：absolute； top：120px； left：45px；}

#header a.click{display：block； background：url（../images/click_nor.gif） 0 0 no-repeat； width：107px； height：85px； position：absolute； left：618px； top：121px； padding：0； margin：0； }

#header a.click：hover{ background：url（../images/click_hover.gif） 0 0 no-repeat； }

2 結(jié)語

采用Div+CSS技術(shù)進(jìn)行頁面布局是當(dāng)前比較流行的布局方式。它最大的優(yōu)勢是實現(xiàn)結(jié)構(gòu)與設(shè)計分離，并且擺脫了傳統(tǒng)表格布局的局限性。當(dāng)對頁面進(jìn)行更新時，只需調(diào)整相應(yīng)需要修改的代碼。這樣既減輕了維護(hù)者的工作量，又提高了網(wǎng)頁開發(fā)的效率和頁面下載的速度，提高了網(wǎng)站維護(hù)和修改的效率。

[參考文獻(xiàn)]

[1]曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社.

[2]鄭寧寧.淺析DIV+CSS網(wǎng)頁設(shè)計技術(shù).山東省農(nóng)業(yè)管理干部學(xué)院學(xué)報.

[3]王儉敏，等.CSS+DIV網(wǎng)頁樣式與布局案例指導(dǎo)[M].北京：電子工業(yè)出版社.

打開css文件創(chuàng)建header下ul和li的樣式，代碼如下：

#header ul{width：601px； height：38px； margin：0 auto； padding：0； }

#header ul li{ float：left； }

#header ul li a{display：block； padding：0 16px 0 16px； font：bold 10px/38px "Trebuchet MS"， Arial， Helvetica， sans-serif； color：#fff； background-color：#2A2A2A； text-decoration：none； text-transform：uppercase； float：left； }

#header ul li a：hover{background：url（images/nav_hover.gif） 0 0 repeat-x #330A0A； padding：0 15px 0 15px； border-left：#D63030 solid 1px； border-right：#D63030 solid 1px； color：#ECE8C3； }

#header ul li.home{ float：left； font：bold 10px/38px "Trebuchet MS"， Arial， Helvetica， sans-serif； color：#ECE8C3； text-decoration：none； text-transform：uppercase； background：url（images/nav_hover.gif） 0 0 repeat-x #330A0A； padding：0 15px 0 15px； border-left：#D63030 solid 1px； border-right：#D63030 solid 1px； }

接下來是banner部分的制作，包括logo和標(biāo)題說明，在ul后面插入一下代碼：

the best outputs for you Aliquam commodo purus sed orci.

打開css文件，寫入圖片、標(biāo)題和超鏈接css樣式，代碼：

#header img{ background：url（../images/logo.gif） 0 0 no-repeat； position：absolute； left：39px； top：77px；}

#header h1{display：block； width：215px； height：39px；background：url（../images/slogan.gif） 0 0 no-repeat； text-indent：-10000px； position：absolute； top：120px； left：45px；}

#header a.click{display：block； background：url（../images/click_nor.gif） 0 0 no-repeat； width：107px； height：85px； position：absolute； left：618px； top：121px； padding：0； margin：0； }

#header a.click：hover{ background：url（../images/click_hover.gif） 0 0 no-repeat； }

2 結(jié)語

采用Div+CSS技術(shù)進(jìn)行頁面布局是當(dāng)前比較流行的布局方式。它最大的優(yōu)勢是實現(xiàn)結(jié)構(gòu)與設(shè)計分離，并且擺脫了傳統(tǒng)表格布局的局限性。當(dāng)對頁面進(jìn)行更新時，只需調(diào)整相應(yīng)需要修改的代碼。這樣既減輕了維護(hù)者的工作量，又提高了網(wǎng)頁開發(fā)的效率和頁面下載的速度，提高了網(wǎng)站維護(hù)和修改的效率。

[參考文獻(xiàn)]

[1]曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社.

[2]鄭寧寧.淺析DIV+CSS網(wǎng)頁設(shè)計技術(shù).山東省農(nóng)業(yè)管理干部學(xué)院學(xué)報.

[3]王儉敏，等.CSS+DIV網(wǎng)頁樣式與布局案例指導(dǎo)[M].北京：電子工業(yè)出版社.

打開css文件創(chuàng)建header下ul和li的樣式，代碼如下：

#header ul{width：601px； height：38px； margin：0 auto； padding：0； }

#header ul li{ float：left； }

#header ul li a{display：block； padding：0 16px 0 16px； font：bold 10px/38px "Trebuchet MS"， Arial， Helvetica， sans-serif； color：#fff； background-color：#2A2A2A； text-decoration：none； text-transform：uppercase； float：left； }

#header ul li a：hover{background：url（images/nav_hover.gif） 0 0 repeat-x #330A0A； padding：0 15px 0 15px； border-left：#D63030 solid 1px； border-right：#D63030 solid 1px； color：#ECE8C3； }

#header ul li.home{ float：left； font：bold 10px/38px "Trebuchet MS"， Arial， Helvetica， sans-serif； color：#ECE8C3； text-decoration：none； text-transform：uppercase； background：url（images/nav_hover.gif） 0 0 repeat-x #330A0A； padding：0 15px 0 15px； border-left：#D63030 solid 1px； border-right：#D63030 solid 1px； }

接下來是banner部分的制作，包括logo和標(biāo)題說明，在ul后面插入一下代碼：

the best outputs for you Aliquam commodo purus sed orci.

打開css文件，寫入圖片、標(biāo)題和超鏈接css樣式，代碼：

#header img{ background：url（../images/logo.gif） 0 0 no-repeat； position：absolute； left：39px； top：77px；}

#header h1{display：block； width：215px； height：39px；background：url（../images/slogan.gif） 0 0 no-repeat； text-indent：-10000px； position：absolute； top：120px； left：45px；}

#header a.click{display：block； background：url（../images/click_nor.gif） 0 0 no-repeat； width：107px； height：85px； position：absolute； left：618px； top：121px； padding：0； margin：0； }

#header a.click：hover{ background：url（../images/click_hover.gif） 0 0 no-repeat； }

2 結(jié)語

采用Div+CSS技術(shù)進(jìn)行頁面布局是當(dāng)前比較流行的布局方式。它最大的優(yōu)勢是實現(xiàn)結(jié)構(gòu)與設(shè)計分離，并且擺脫了傳統(tǒng)表格布局的局限性。當(dāng)對頁面進(jìn)行更新時，只需調(diào)整相應(yīng)需要修改的代碼。這樣既減輕了維護(hù)者的工作量，又提高了網(wǎng)頁開發(fā)的效率和頁面下載的速度，提高了網(wǎng)站維護(hù)和修改的效率。

[參考文獻(xiàn)]

[1]曾順.精通CSS+DIV網(wǎng)頁樣式與布局[M].北京：人民郵電出版社.

[2]鄭寧寧.淺析DIV+CSS網(wǎng)頁設(shè)計技術(shù).山東省農(nóng)業(yè)管理干部學(xué)院學(xué)報.

[3]王儉敏，等.CSS+DIV網(wǎng)頁樣式與布局案例指導(dǎo)[M].北京：電子工業(yè)出版社.