陳 焜 / 湖北職業(yè)技術(shù)學(xué)院

用div+css布局網(wǎng)頁(yè)

陳 焜 / 湖北職業(yè)技術(shù)學(xué)院

本文介紹了網(wǎng)頁(yè)設(shè)計(jì)中常用的布局方法，重點(diǎn)介紹了DIV和CSS的應(yīng)用規(guī)則和利弊，并結(jié)合實(shí)例探討了DIV+CSS布局技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用。

DIV ；CSS； 網(wǎng)頁(yè)

1.引言

隨著各種的網(wǎng)站制作技術(shù)的風(fēng)起云涌，利用DIV+CSS的設(shè)計(jì)方式也逐步稱為網(wǎng)站的主力軍之一，DIV及CSS作為制作網(wǎng)頁(yè)的重要組成部分，已經(jīng)成為網(wǎng)頁(yè)設(shè)計(jì)中必不可少的要素。本文將對(duì)使用DIV+CSS技術(shù)制作網(wǎng)頁(yè)方法和利弊進(jìn)行闡述。

2.DIV+CSS布局方法

2.1 DIV+CSS 盒模型

盒模型將頁(yè)面中的每個(gè)元素看做一個(gè)矩形框，這個(gè)框由元素的內(nèi)容、內(nèi)邊距（padding）、邊框（border）和外邊距（margin）組成。網(wǎng)頁(yè)就是由許多個(gè)盒子通過(guò)不同的排列方式（縱向排列、橫向排列和嵌套排列）堆積而成。

2.2 DIV+CSS 定位

定位是網(wǎng)頁(yè)布局的最重要的技術(shù)，CSS定位通過(guò) position 屬性的值實(shí)現(xiàn)，屬性值有以下 4 種，分別為：static、relative、absolute、fixed[1]。static:靜態(tài)定位，為默認(rèn)值，為無(wú)特殊定位，對(duì)象遵循HTML 定位規(guī)則，此時(shí)盒子按照普通布局在頁(yè)面上顯示。relative:相對(duì)定位，使用該屬性值時(shí)盒子仍然是普通布局，占據(jù)它所在的位置，在計(jì)算定位的時(shí)候，才通過(guò) left,right,top,bottom 等屬性，讓這個(gè)盒子相對(duì)于它的原始起點(diǎn)進(jìn)行移動(dòng)后顯示。absolute:絕對(duì)定位，絕對(duì)定位的盒子的位置相對(duì)于最接近的一個(gè)具有定位屬性的父塊進(jìn)行的，如果沒(méi)有已定位的父塊，則相對(duì)于 body對(duì)象，即瀏覽器窗口。

2.3 盒子浮動(dòng)

用盒子浮動(dòng)技術(shù)，能使盒子脫離文檔流向左或向右移動(dòng)，排列方式多樣，布局靈活方便。浮動(dòng)的元素會(huì)生成一個(gè)塊級(jí)框，它可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。盒子浮?dòng)通過(guò)設(shè)置 float 屬性值實(shí)現(xiàn)，屬性值有以下 3 種：none、left、right.其中 none 表示不浮動(dòng)；left 表示浮在左邊；right 表示浮在右邊。有時(shí)，浮動(dòng)使用不當(dāng)會(huì)導(dǎo)致頁(yè)面出現(xiàn)錯(cuò)位的情況，這時(shí)可以使用清除浮動(dòng)的方法。清除浮動(dòng)通過(guò)設(shè)置 clear 屬性值實(shí)現(xiàn)。

3.DIV+CSS的優(yōu)缺點(diǎn)

3.1 DIV+CSS有以下優(yōu)點(diǎn)[2]。

3.1.1 網(wǎng)頁(yè)載入比較快，由于DIV+CSS中的CSS富含豐富的樣式，失望也定位和表現(xiàn)更加靈活。

3.1.2 頁(yè)面內(nèi)容與樣式分離可以是網(wǎng)頁(yè)代碼減少，使頁(yè)面的樣式的調(diào)整變得更加方便。

3.1.3 表現(xiàn)和結(jié)構(gòu)分離，在團(tuán)隊(duì)開(kāi)發(fā)中更容易分工合作而減少相互關(guān)聯(lián)性。

3.2 DIV+CSS缺點(diǎn)：

3.2.1 DIV+CSS到現(xiàn)在還沒(méi)有實(shí)現(xiàn)所有瀏覽器的統(tǒng)一兼容，使得設(shè)計(jì)變得更復(fù)雜。

3.2.2 DIV+CSS比TABLE定位復(fù)雜得多，多層嵌套的DIV會(huì)嚴(yán)重影響網(wǎng)頁(yè)代碼的可閱讀性，對(duì)于網(wǎng)頁(yè)設(shè)計(jì)高手也很容易出現(xiàn)問(wèn)題，更不要說(shuō)初學(xué)者了。

4.實(shí)例

制作如圖所示的兩列排版方式的網(wǎng)頁(yè)效果：

操作步驟如下：

①首先，根據(jù)網(wǎng)頁(yè)內(nèi)容制作各個(gè)div塊，其中id為container的是最外層的div塊，里面包括top（標(biāo)題廣告區(qū)）、leftnav（左菜單導(dǎo)向區(qū)）、content（主要內(nèi)容區(qū)）以及footer（頁(yè)腳區(qū)）4個(gè)區(qū)域

②然后，在各個(gè)區(qū)域中加入一些內(nèi)容：

③最后定義各個(gè)區(qū)域的樣式表：外圍框元素container的寬度是整個(gè)屏幕寬的90%，設(shè)置左右邊距是auto使它居中對(duì)齊，并且加上背景色和邊框線，定義網(wǎng)頁(yè)內(nèi)容的字體顏色和行高：

設(shè)置標(biāo)題廣告區(qū)top的背景顏色、間距及底線，并清除h1元素的默認(rèn)間距和邊距值。設(shè)置左菜單導(dǎo)向區(qū)的寬度、間距和邊距，并且進(jìn)行左排列，然后重新設(shè)置其中p元素的間距和邊距值：

設(shè)置主要內(nèi)容區(qū)，為了空出左菜單導(dǎo)向區(qū)，設(shè)置左邊距為200px，并且加一條左邊框線，然后設(shè)置其允許的最大寬度、間距及其中h2元素的間距和邊距值。設(shè)置頁(yè)腳區(qū)，首先必須清除上述設(shè)置的左排列clear:both，然后設(shè)置其間距、邊距、背景色及上框線等，完成操作。限于篇幅這里不列出源代碼。

[1] 雷燁.運(yùn)用DIV+CSS技術(shù)對(duì)網(wǎng)頁(yè)進(jìn)行布局[J].電腦知識(shí)與技術(shù)，2016,7.

[2] 吳以欣，陳小寧.動(dòng)態(tài)網(wǎng)頁(yè)設(shè)計(jì)與制作[M].人民郵電出版社，2013,2.