關(guān)于DIV+CSS網(wǎng)頁布局的設(shè)計與實現(xiàn)

劉心美

摘 要： 按W3C標(biāo)準(zhǔn)，Web前端開發(fā)技術(shù)要實現(xiàn)結(jié)構(gòu)、表現(xiàn)、行為相分離的設(shè)計方式。前端技術(shù)內(nèi)容主要是利用HTML進(jìn)行頁面的結(jié)構(gòu)排版、CSS進(jìn)行頁面的樣式設(shè)計、Javascript實現(xiàn)頁面的交互、Ajax技術(shù)進(jìn)行數(shù)據(jù)的請求。該文以DIV+CSS網(wǎng)頁布局技術(shù)為核心，論述了其網(wǎng)頁布局技術(shù)的設(shè)計流程、設(shè)計思路和具體過程。

關(guān)鍵詞：DIV+CSS ?普通流 ?浮動流 ?定位流

中圖分類號：TP393.092 ? 文獻(xiàn)標(biāo)識碼：A ? ? ?文章編號：1672-3791（2021）10（c）-0000-00

Design and Implementation of DIV + CSS Web Page Layout

LIU ?Xinmei

（Changchun Polytechnic， Changchun， Jilin Province，130033 China）

Abstract： According to W3C standard， Web front-end development technology should realize the design method of separating structure， performance and behavior. The front-end technology mainly uses HTML for page structure layout， CSS for page style design， Javascript for page interaction， and Ajax technology for data request. Taking DIV + CSS web page layout technology as the core， this article discusses the design process， design ideas and specific process of its web page layout technology.

Key Words： DIV + CSS ; Status; Float; Position

隨著Internet技術(shù)飛速發(fā)展與普及，Web技術(shù)也在不斷更新與前進(jìn)，網(wǎng)頁布局技術(shù)歷程已經(jīng)過了table、DIV+CSS、彈性、Grid布局共4個階段。W3C標(biāo)準(zhǔn)明確提出，要實現(xiàn)結(jié)構(gòu)（HTML）、表現(xiàn)（CSS）和行為（JavaScript）相分離的原則。該文著重于HTML和CSS相結(jié)合，實現(xiàn)網(wǎng)頁頁面的布局和樣式設(shè)計[1-2]。

1關(guān)于DIV+CSS網(wǎng)頁布局的分析

DIV+CSS就是以HTML設(shè)計頁面骨架，以CSS設(shè)計頁面美化效果，以JavaScript設(shè)計頁面的功能和某些特效[3]。

1.1 HTML5標(biāo)準(zhǔn)，確定頁面中功能塊的區(qū)域、位置信息

按照人類閱讀習(xí)慣，對頁面效果圖，按照先行再列進(jìn)行分割，繪制頁面區(qū)域塊結(jié)構(gòu)如圖1所示。在DIV+CSS布局中DIV主要用于定位，每個信息區(qū)域?qū)?yīng)一個DIV標(biāo)簽[4]。

1.2 按CSS3標(biāo)準(zhǔn)，實現(xiàn)DIV塊區(qū)域的定位與美化

網(wǎng)頁布局就是頁面排版，HTML標(biāo)簽繪制結(jié)構(gòu)，CSS將完成位置、大小、配色、特效等設(shè)計，關(guān)鍵是盒模型和定位機(jī)制[5-6]。

1.2.1 理解box模型

用CSS設(shè)計和布局時，牢記“所有 HTML 元素都可以視為方框”的原則。明確盒模型的“外邊距、邊框、內(nèi)邊距以及實際的內(nèi)容”之間的相互關(guān)系，以靈活的設(shè)計。

1.2.2 理解CSS的定位機(jī)制

CSS的定位機(jī)制有3種，分別是普通流、浮動流、定位流，下面分別進(jìn)行闡述。

（1）普通流：普通流是瀏覽器默認(rèn)方式。HTML元素按CSS顯示模式分為塊元素（block）、行元素（inline）、行內(nèi)塊元素（inline-block），三類元素可通過display屬性自由轉(zhuǎn)換，在普通流中HTML按元素類型排列如下。

①普通流中元素排列由自身位置決定。

②塊元素從上到下、垂直方向排列，自動換行。

③行元素在從左到右、水平方向排列。高度總是足以容納它包含的所有行元素。

④行內(nèi)塊元素從左到右、水平方向排列，可設(shè)置寬度和高度。

（2）浮動流（float）浮動流是一種半脫離標(biāo)準(zhǔn)流的排版方式。在浮動流中HTML元素排列方式如下。

①浮動元素脫離普通流，水平方向排列，浮動方向向左或向右，可實現(xiàn)一行多列的布局。

②當(dāng)元素沒有設(shè)置寬度值，而設(shè)置了浮動屬性，元素的寬度會隨內(nèi)容的變化而變化（若沒有內(nèi)容，則寬度為0）。

③浮動元素只對緊鄰它后面的元素產(chǎn)生影響，對它前面的元素沒影響。

（3）定位流（position）：定位流可通過定位模式和邊偏移屬性進(jìn)行元素精確定位，position屬性有4種定位形式。

①靜態(tài)定位（static）：默認(rèn)定位方式。

②相對定位（relative）：相對于原有位置進(jìn)行偏移;元素仍占有普通流中的空間;元素具有偏移屬性和z-index屬性，可產(chǎn)生空間層堆疊。

③絕對定位（absolute）：元素完全脫離普通流，原流中的空間會關(guān)閉;元素定位以父容器為參照，默認(rèn)父容器為body，通過設(shè)置ponsition：relative;可改變。

④固定定位（fixed）：元素相對于瀏覽器是靜止的，脫離文檔流限制，浮在文檔流上方，不會隨著頁面滾動而變換位置。

2 DIV+CSS網(wǎng)頁布局的實現(xiàn)過程

下面以傳智頁說明DIV+CSS布局過程。

2.1 網(wǎng)頁效果圖的設(shè)計分析

在網(wǎng)頁代碼實現(xiàn)前，一定要理清設(shè)計思路，按照網(wǎng)頁的“從上到下、從左到右、從外到內(nèi)、從大到小、逐步細(xì)化”方式，設(shè)計布局結(jié)構(gòu)如圖1所示。

圖1傳智頁結(jié)構(gòu)圖

2.2設(shè)計頁面的HTML結(jié)構(gòu)與CSS樣式

（1）確定樣式表設(shè)計方案，傳智網(wǎng)站中有多個頁面，且共用網(wǎng)頭、導(dǎo)航、網(wǎng)底的樣式，從優(yōu)化代碼角度，CSS樣式表分為基礎(chǔ)表（base.css）和個體頁面表，本頁表名為course.css。

（2）網(wǎng)頭區(qū)域（header）技術(shù)實現(xiàn)，網(wǎng)頭區(qū)域中利用普通流和浮動流技術(shù)。

①HTML部分代碼實現(xiàn)：本區(qū)域采用浮動技術(shù)中一行三欄布局結(jié)構(gòu)，技術(shù)要點是前二欄（hleft、hmiddle）向左浮動，第三欄向右浮動（hright）。

<header>

<div id="hleft"> ...... </div>

<div id="hmiddle"> ......</div>

<div id="hright"> ...... </div>

</header>

②CSS部分樣式實現(xiàn)：

header{

width： 1000px;

height： 78px;

margin： 0 auto;

.....

}

#hleft{

width： 307px;

height： 78px;

float： left;

}

#hmiddle{

width： 289px;

height： 78px;

float： left;

margin-left： 10px;

}

#hright{

width：384px;

height： 78px;

float： right;

.......

}

......

（3）網(wǎng)底區(qū)域（footer）技術(shù)實現(xiàn)，網(wǎng)底區(qū)域中用到定位流技術(shù)和普通流技術(shù)，其中top圖標(biāo)利用定位流實現(xiàn)了精確定位。

①HTML代碼實現(xiàn)：

<div id="bottom">

<div id="bott">

<div id="bott_top"><img src="img/top_btn.gif" height="10" width="20" alt=""></div>

......

</div>

</div>

②CSS部分樣式實現(xiàn)：為top圖標(biāo)設(shè)置父容器bott，偏移量為上-7px左120px。

#bott{

width： 1000px;

height： 150px;

margin： 0 auto;

position： relative;

}

#bott_top{

position： absolute;

top： -7px;

left： 120px;

}

3結(jié)語

在DIV+CSS布局在應(yīng)用中可以實現(xiàn)任意布局的需要，在網(wǎng)站開發(fā)過程中較為常用。但是在應(yīng)用中最大的問題是瀏覽器的兼容性，比如：chrome中設(shè)置塊元素居中{margin ：0 auto;}、文本水平居中{text-align： center;}，諸如此類的問題，都需要一定的技巧，綜合運(yùn)用各種布局技術(shù)才可以進(jìn)行實現(xiàn)。

在實踐中有效運(yùn)用浮動屬性、定位屬性，同時將overflow屬性與z-index屬性融入其中，靈活動用，在應(yīng)用中可以取得較好效果。在應(yīng)用中一定要注意使用的規(guī)范性，尤其是命名規(guī)范性。規(guī)范的命名可以有效地提高程序的查錯與修改效率。

參考文獻(xiàn)

[1] 陳娟.網(wǎng)頁布局中解決浮動塌陷問題研究[J].信息技術(shù)與信息化，2021（9）：117-119.

[2] 李慧.DIV+CSS布局技術(shù)在網(wǎng)頁設(shè)計中的應(yīng)用[J].電腦編程技巧與維護(hù)，2021（7）：20-22.

[3] 陳娟.基于DIV+CSS的網(wǎng)頁布局技術(shù)探究[J].信息與電腦：理論版，2021，33（13）：4-6.

[4] 李英.基于DIV和CSS的網(wǎng)頁布局技術(shù)應(yīng)用與研究[J].電腦編程技巧與維護(hù)，2021（5）：17-18.

[5] 楊秋.課程教學(xué)網(wǎng)站設(shè)計與實現(xiàn)[D].長春：吉林大學(xué)，2016.

[6] 柳健.政協(xié)門戶網(wǎng)站設(shè)計與實現(xiàn)[D].長春：吉林大學(xué)，2016.

基金項目：本文是全國高校計算機(jī)基礎(chǔ)教育研究會2021年度課題“基于泛在學(xué)習(xí)的高職《Nosql》數(shù)據(jù)庫課程建設(shè)研究”（項目編號：2021-AFCEC-495）的部分研究成果。