關于DIV+CSS網頁布局的設計與實現

劉心美

摘 要： 按W3C標準，Web前端開發技術要實現結構、表現、行為相分離的設計方式。前端技術內容主要是利用HTML進行頁面的結構排版、CSS進行頁面的樣式設計、Javascript實現頁面的交互、Ajax技術進行數據的請求。該文以DIV+CSS網頁布局技術為核心，論述了其網頁布局技術的設計流程、設計思路和具體過程。

關鍵詞：DIV+CSS ?普通流 ?浮動流 ?定位流

中圖分類號：TP393.092 ? 文獻標識碼：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技術飛速發展與普及，Web技術也在不斷更新與前進，網頁布局技術歷程已經過了table、DIV+CSS、彈性、Grid布局共4個階段。W3C標準明確提出，要實現結構（HTML）、表現（CSS）和行為（JavaScript）相分離的原則。該文著重于HTML和CSS相結合，實現網頁頁面的布局和樣式設計[1-2]。

1關于DIV+CSS網頁布局的分析

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

1.1 HTML5標準，確定頁面中功能塊的區域、位置信息

按照人類閱讀習慣，對頁面效果圖，按照先行再列進行分割，繪制頁面區域塊結構如圖1所示。在DIV+CSS布局中DIV主要用于定位，每個信息區域對應一個DIV標簽[4]。

1.2 按CSS3標準，實現DIV塊區域的定位與美化

網頁布局就是頁面排版，HTML標簽繪制結構，CSS將完成位置、大小、配色、特效等設計，關鍵是盒模型和定位機制[5-6]。

1.2.1 理解box模型

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

1.2.2 理解CSS的定位機制

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

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

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

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

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

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

（2）浮動流（float）浮動流是一種半脫離標準流的排版方式。在浮動流中HTML元素排列方式如下。

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

②當元素沒有設置寬度值，而設置了浮動屬性，元素的寬度會隨內容的變化而變化（若沒有內容，則寬度為0）。

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

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

①靜態定位（static）：默認定位方式。

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

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

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

2 DIV+CSS網頁布局的實現過程

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

2.1 網頁效果圖的設計分析

在網頁代碼實現前，一定要理清設計思路，按照網頁的“從上到下、從左到右、從外到內、從大到小、逐步細化”方式，設計布局結構如圖1所示。

圖1傳智頁結構圖

2.2設計頁面的HTML結構與CSS樣式

（1）確定樣式表設計方案，傳智網站中有多個頁面，且共用網頭、導航、網底的樣式，從優化代碼角度，CSS樣式表分為基礎表（base.css）和個體頁面表，本頁表名為course.css。

（2）網頭區域（header）技術實現，網頭區域中利用普通流和浮動流技術。

①HTML部分代碼實現：本區域采用浮動技術中一行三欄布局結構，技術要點是前二欄（hleft、hmiddle）向左浮動，第三欄向右浮動（hright）。

<header>

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

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

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

</header>

②CSS部分樣式實現：

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）網底區域（footer）技術實現，網底區域中用到定位流技術和普通流技術，其中top圖標利用定位流實現了精確定位。

①HTML代碼實現：

<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部分樣式實現：為top圖標設置父容器bott，偏移量為上-7px左120px。

#bott{

width： 1000px;

height： 150px;

margin： 0 auto;

position： relative;

}

#bott_top{

position： absolute;

top： -7px;

left： 120px;

}

3結語

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

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

參考文獻

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

[2] 李慧.DIV+CSS布局技術在網頁設計中的應用[J].電腦編程技巧與維護，2021（7）：20-22.

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

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

[5] 楊秋.課程教學網站設計與實現[D].長春：吉林大學，2016.

[6] 柳健.政協門戶網站設計與實現[D].長春：吉林大學，2016.

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