楊曉?shī)?/p>

摘?要：布局對(duì)網(wǎng)頁(yè)的作用類(lèi)似于設(shè)計(jì)圖對(duì)地產(chǎn)開(kāi)發(fā)商的作用，制作商務(wù)網(wǎng)頁(yè)的首要內(nèi)容是對(duì)網(wǎng)頁(yè)進(jìn)行布局。常見(jiàn)的布局方式有：表格布局、框架布局、層布局，鑒于以上布局方式均存在一定的缺陷逐漸退出歷史潮流。目前流行的布局方式是DIV+CSS來(lái)制作頁(yè)面，DIV主要解決網(wǎng)頁(yè)中的元素（如文字、圖片、表格、音視頻等）放置在網(wǎng)頁(yè)顯示位置的問(wèn)題，而CSS主要解決網(wǎng)頁(yè)元素美觀性的問(wèn)題。本文主要探討DIV+CSS布局方式用法及要注意的問(wèn)題。

關(guān)鍵詞：DIV+CSS;浮動(dòng)布局;定位布局

一個(gè)商務(wù)網(wǎng)頁(yè)是否吸引用戶(hù)，布局至關(guān)重要。所謂布局就是對(duì)網(wǎng)頁(yè)元素進(jìn)行定位，網(wǎng)頁(yè)整體結(jié)構(gòu)是上中下還是左中右，網(wǎng)頁(yè)的LOGO、導(dǎo)航、網(wǎng)頁(yè)標(biāo)題、網(wǎng)頁(yè)核心內(nèi)容、版權(quán)信息等內(nèi)容顯示的位置。鑒于表格布局導(dǎo)致表格標(biāo)簽的嵌套瀏覽器解析較慢，框架布局不夠靈活，DIV+CSS布局方式逐漸成為主流，DIV實(shí)現(xiàn)把頁(yè)面進(jìn)行切割，不同的DIV放置不同的內(nèi)容，CSS實(shí)現(xiàn)對(duì)內(nèi)容進(jìn)行美化，如添加背景色、設(shè)置不同塊之間的間距等等。

1 DIV+CSS的概念

DIV是HTML語(yǔ)言中的一個(gè)標(biāo)簽元素即

，該標(biāo)簽代表一個(gè)容器本身沒(méi)有實(shí)際意義，是一個(gè)塊級(jí)元素，在該標(biāo)簽中可以放置文字、圖片、鏈接、音樂(lè)、div等，一個(gè)頁(yè)面可以通過(guò)多個(gè)div標(biāo)簽的嵌套實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)進(jìn)行分割，通過(guò)設(shè)置div中的內(nèi)容與div的內(nèi)邊距、不同div之間的外邊距來(lái)對(duì)頁(yè)面進(jìn)行布局。

CSS（Cascading Style Sheets）指層疊樣式表，作用是對(duì)網(wǎng)頁(yè)元素進(jìn)行美化，CSS可以出現(xiàn)在HTML標(biāo)簽行中、HTML的標(biāo)簽中、外部樣式表三個(gè)位置，在DIV+CSS布局中常常把CSS獨(dú)立形成一個(gè).css文件，實(shí)現(xiàn)與HTML文件完全分離，可以實(shí)現(xiàn)樣式表的重復(fù)使用、網(wǎng)頁(yè)的結(jié)構(gòu)與表現(xiàn)可以實(shí)現(xiàn)完全分離。CSS中主要有類(lèi)選擇器、ID選擇器、復(fù)合選擇器和標(biāo)簽選擇器四種，優(yōu)先級(jí)順序?yàn)椋簭?fù)合選擇器>ID選擇器>類(lèi)選擇器>標(biāo)簽選擇器，復(fù)合選擇器的優(yōu)先級(jí)最高、標(biāo)簽選擇器的優(yōu)先級(jí)最低，ID選擇器只能使用一次，類(lèi)選擇器可以重復(fù)使用，在實(shí)際制作網(wǎng)頁(yè)過(guò)程中要根據(jù)需求靈活選擇CSS選擇器的類(lèi)型。

2 DIV+CSS的運(yùn)用

2.1 標(biāo)準(zhǔn)布局

標(biāo)準(zhǔn)布局是指網(wǎng)頁(yè)元素按HTML代碼的順序自上而下或自左向右逐步分布的，就像流水一樣，我們將這種流動(dòng)方式稱(chēng)為標(biāo)準(zhǔn)流或文檔流。標(biāo)準(zhǔn)流布局具有以下兩個(gè)比較典型的特征。塊級(jí)元素會(huì)在所處的包含元素內(nèi)自上而下按順序垂直分布。因?yàn)樵谀J(rèn)狀態(tài)下，不管把塊級(jí)元素的寬度設(shè)置多窄，它都會(huì)獨(dú)占一行。內(nèi)聯(lián)元素會(huì)在所處的包含元素內(nèi)自左向右水平分布顯示，超出一行后，會(huì)自動(dòng)自上而下?lián)Q行顯示，然后繼續(xù)自左向右按順序流動(dòng)，依次類(lèi)推。

2.2 浮動(dòng)布局

標(biāo)準(zhǔn)布局不能完全滿(mǎn)足網(wǎng)頁(yè)設(shè)計(jì)的需求，有時(shí)設(shè)計(jì)需要把兩個(gè)或者多個(gè)DIV在一行顯示，此時(shí)需用到浮動(dòng)布局，浮動(dòng)布局的主要作用是打破標(biāo)準(zhǔn)流布局的自上而下、自左向右的布局方式，使得塊元素不獨(dú)占一行。此時(shí)可有多種方式實(shí)現(xiàn)效果。

方法一：left、rihgt同時(shí)左浮動(dòng)或者右浮動(dòng)，#left #right{float：left;};方法二：left左浮動(dòng)、right右浮動(dòng)，即#left{float：left;}，#right{flaot：right};方法三：left設(shè)置寬度和左浮動(dòng)，right設(shè)置左外邊距值，即#left{width：200px;float：left;}，#right{margin-left：200px;};方法四：類(lèi)似與方法三，right設(shè)置右浮動(dòng)，left設(shè)置右外邊距。設(shè)置浮動(dòng)后會(huì)給right后面的元素產(chǎn)生影響，為了清除這種影響通常做法是在right后添加一個(gè)空白div1，并設(shè)置改空白div的樣式#div1{clear：both;}。

2.3 定位布局

定位布局分為相對(duì)定位和絕對(duì)定位，主要是通過(guò)元素的position、z-index、overflow、clip屬性來(lái)實(shí)現(xiàn)，相對(duì)定位通過(guò)設(shè)置水平位置和垂直位置來(lái)實(shí)現(xiàn)，其在標(biāo)準(zhǔn)流中的位置仍然存在。絕對(duì)定位的使用其祖先元素必須設(shè)置定位屬性，在絕對(duì)定位中，標(biāo)準(zhǔn)流中其他元素的布局對(duì)絕對(duì)定位的元素不影響，所以會(huì)導(dǎo)致絕對(duì)定位的元素覆蓋其他元素，這時(shí)就通過(guò)設(shè)置z-index屬性來(lái)控制元素的層級(jí)順序?qū)崿F(xiàn)想要的效果。在實(shí)際應(yīng)用中相對(duì)定位很少單獨(dú)使用，相對(duì)定位一般作為祖先元素的定位，從而輔助設(shè)置其子孫元素的絕對(duì)定位。

3 DIV+CSS布局要注意的問(wèn)題

頁(yè)面的整體布局一般都采用標(biāo)準(zhǔn)流方式，當(dāng)頁(yè)面中有多個(gè)塊元素要在一行顯示時(shí)，可通過(guò)浮動(dòng)布局和定位布局來(lái)實(shí)現(xiàn)，采用浮動(dòng)布局，要注意清除對(duì)后面元素的影響，定位布局通常設(shè)置祖先元素的相對(duì)定位作為參考對(duì)象，即祖先元素必須擁有定位position屬性，屬性值為relative或absolute，其次要設(shè)置絕對(duì)定位的坐標(biāo)值，參考點(diǎn)是祖先元素4個(gè)頂點(diǎn)中的任意一點(diǎn)，只能設(shè)置兩個(gè)值即水平方向：left或right;垂直方向：top或bottom。

4 結(jié)語(yǔ)

使用DIV+CSS布局可以完美地實(shí)現(xiàn)結(jié)構(gòu)、表現(xiàn)的分離，DIV的主要作用是把頁(yè)面分割成一個(gè)個(gè)區(qū)域，然后運(yùn)用標(biāo)準(zhǔn)布局、浮動(dòng)布局、定位布局三種布局方式實(shí)現(xiàn)頁(yè)面的結(jié)構(gòu)，CSS對(duì)設(shè)置每一個(gè)區(qū)域的樣式以及區(qū)域內(nèi)網(wǎng)頁(yè)元素的樣式。DIV+CSS的布局方式使得網(wǎng)頁(yè)的開(kāi)發(fā)速度、執(zhí)行效率以及代碼的可讀性都有了很大的提高，但如果要熟練的運(yùn)用DIV+CSS的布局完整頁(yè)面需要不停的學(xué)習(xí)和積累經(jīng)驗(yàn)。

參考文獻(xiàn)：

[1]李居蘭.談網(wǎng)頁(yè)設(shè)計(jì)常用的布局方法[J].計(jì)算機(jī)產(chǎn)品與流通，2019（11）：253.

[2]黃楚鵬.基于CSS頁(yè)面布局的網(wǎng)頁(yè)設(shè)計(jì)[J].電腦知識(shí)與技術(shù)，2017，13（04）：45+55.

[3]雷燁.運(yùn)用DIV+CSS技術(shù)對(duì)網(wǎng)頁(yè)進(jìn)行布局[J].電腦知識(shí)與技術(shù)，2016，12（07）：212-213.