陳翠娥

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

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

1 DIV+CSS布局案例解析

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

1.1 確定布局

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

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

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

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

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

首先確定網(wǎng)頁(yè)的全局樣式，然后在寫(xiě)每一塊的單獨(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)頁(yè)中幾大主要板塊的樣式，其代碼如下：

#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； }

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

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

打開(kāi)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； }

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

the best outputs for you Aliquam commodo purus sed orci.

打開(kāi)css文件，寫(xiě)入圖片、標(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é)語(yǔ)

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

[參考文獻(xiàn)]

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

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

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

打開(kāi)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； }

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

the best outputs for you Aliquam commodo purus sed orci.

打開(kāi)css文件，寫(xiě)入圖片、標(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é)語(yǔ)

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

[參考文獻(xiàn)]

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

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

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

打開(kāi)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； }

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

the best outputs for you Aliquam commodo purus sed orci.

打開(kāi)css文件，寫(xiě)入圖片、標(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é)語(yǔ)

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

[參考文獻(xiàn)]

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

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

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