基于HTML5+CSS3的網(wǎng)頁布局

摘要：網(wǎng)站是常見的信息傳播平臺，是通過互聯(lián)網(wǎng)向人們發(fā)布信息和提供網(wǎng)絡(luò)服務(wù)的載體。網(wǎng)站是一組相關(guān)網(wǎng)頁的集合，除了文字、圖像、超鏈接等HTML元素外，網(wǎng)頁布局是網(wǎng)頁制作中的核心技術(shù)，隨著WEB前端開發(fā)技術(shù)的發(fā)展，網(wǎng)頁已經(jīng)從以前普遍使用的表格布局方法過渡到如今的DIV和CSS布局思想，即使用CSS來控制DIV盒子的大小及其在頁面中的位置是制作網(wǎng)頁時的關(guān)鍵問題。

關(guān)鍵詞：Web前端;HTML5;CSS3;盒子模型;網(wǎng)頁布局

中圖分類號：TP393.09? ? ? 文獻(xiàn)標(biāo)識碼：A

文章編號：1009-3044（2022）14-0049-02

1 網(wǎng)頁布局概念

網(wǎng)頁布局是指將網(wǎng)頁中的所有元素進(jìn)行排版和定位。在設(shè)計與制作網(wǎng)頁時，合理的布局可以使頁面內(nèi)容及結(jié)構(gòu)清晰，元素疏密適當(dāng)，色彩對比分明，讓用戶擁有良好的頁面瀏覽體驗(yàn)。在CSS3中，使用盒子模型對元素定位，淘汰了傳統(tǒng)的采用表格布局的頁面排版方法。

2 CSS盒子模型

盒子模型是目前CSS3布局技術(shù)所使用的一種思維模型。在盒子模型中，所有的網(wǎng)頁元素都可以被看作一個盒子，它們在網(wǎng)頁中占據(jù)一定的空間，在盒子里面可以放置內(nèi)容，這些盒子又相互影響，那么通過設(shè)置盒子內(nèi)部的屬性和盒子間的位置關(guān)系，從而實(shí)現(xiàn)整個網(wǎng)頁的布局排版。盒子模型通常借助div標(biāo)簽實(shí)現(xiàn)網(wǎng)頁布局和網(wǎng)頁結(jié)構(gòu)。在CSS3中，一個獨(dú)立的盒子由content（內(nèi)容）、padding（內(nèi)邊距）、border（邊框）和margin（外邊距）組成[1]。元素內(nèi)容（content）通常包含文字、圖像、聲音、影像、超鏈接、表格和表單等，這些元素都可以被處理成塊級元素（block），即被形象看作為一個個長方形的盒子（div），那么網(wǎng)頁元素的布局實(shí)質(zhì)上就是如何在頁面中擺放、甚至是嵌套這些大大小小的盒子。使用盒子模型時需要關(guān)注盒子的尺寸大小，即盒子的寬度和高度。盒子的寬度除了考慮元素內(nèi)容的寬度外，還要包含左右外邊距、左右內(nèi)邊距以及左右邊框的像素，而盒子的高度也是除了元素內(nèi)容的高度外，還要包含上下外邊距、上下內(nèi)邊距以及上下邊框的像素。

3 網(wǎng)頁布局技術(shù)

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

網(wǎng)頁布局中最基本的布局是標(biāo)準(zhǔn)流或稱文檔流布局，它使用的是網(wǎng)頁元素默認(rèn)的位置和顯示順序[2]。在HTML中一般使用塊元素（div）定義網(wǎng)頁布局，而由于塊元素是要獨(dú)立占一行或者多行，在沒有為網(wǎng)頁元素添加CSS定位或浮動等屬性的情況下，這些元素會自然地按照從上到下的順序依次顯示。標(biāo)準(zhǔn)流是默認(rèn)的布局模式，適用于單列布局的子頁面。比如，針對圖1所示的頁面單列布局架構(gòu)，實(shí)現(xiàn)時的HTML部分的源代碼如下。

在HTML代碼基礎(chǔ)上，CSS代碼需要給出每個div盒子里面id選擇器的width、height和background-color。通常情況下，頁面的整體布局大都采用標(biāo)準(zhǔn)流方式。

3.2 浮動式布局

浮動式網(wǎng)頁布局是網(wǎng)頁制作中常用的方法。浮動就是對網(wǎng)頁元素使用float屬性，屬性值為left或right，浮動后的元素則脫離文檔流，呈現(xiàn)出漂浮狀態(tài)，直到遇到父元素的包含框或是其他浮動元素攔截為止，可以實(shí)現(xiàn)良好的布局效果，從而使網(wǎng)頁的布局和結(jié)構(gòu)更加豐富、自由、合理。浮動元素會影響標(biāo)準(zhǔn)流中的網(wǎng)頁元素，掌握浮動元素盒子模型的計算方法，根據(jù)不同的浮動方案靈活設(shè)計HTML結(jié)構(gòu)，在CSS中采用浮動法的塊元素將重新設(shè)置寬度，否則將按照實(shí)際大小呈現(xiàn)在網(wǎng)頁上[3]。

浮動屬性被頻繁地應(yīng)用在網(wǎng)頁設(shè)計中，除了常用于圖文排版的頁面外，更適用于兩列或多列布局的網(wǎng)頁。兩列布局其實(shí)與一列布局相似，只不過是頁面內(nèi)容要分為左右兩欄。圖2給出了一種兩列布局示意圖，實(shí)現(xiàn)時HTML部分源代碼如下。

此處的CSS代碼除了需要給出每個id選擇器的width、height和background-color以外，還需要設(shè)置id選擇器#leftside和#rightside的浮動屬性，即#leftside{float：left;width：30%;}、#leftright{float：right;width：70%}，以便讓原本處于標(biāo)準(zhǔn)流的兩個盒子浮動，并排顯示在同一行，呈現(xiàn)出兩欄的頁面劃分效果。

對于企事業(yè)單位的門戶網(wǎng)站，特別是電子商務(wù)之類的網(wǎng)站，因?yàn)轫撁鎯?nèi)容分類眾多，通常需要進(jìn)行左中右等三欄布局的頁面效果，而浮動后的盒子都會脫離標(biāo)準(zhǔn)流，并排顯示在同一行，從而呈現(xiàn)出三欄的劃分效果。圖3給出了三列布局架構(gòu)示意圖，實(shí)現(xiàn)時HTML部分源代碼如下。

與兩欄布局相似，此處的CSS代碼除了需要給出每個id選擇器的width、height和background以外，還需要設(shè)置id選擇器#leftside（左邊欄）、#main（主欄）和#rightside（右邊欄）的浮動屬性，即#leftside{float：left;width：30%;}、#main{float：left;width：70%;}#leftright{float：left;width：30%}。

浮動是一種比較便利的布局實(shí)現(xiàn)方式，無須額外的元素輔助定位，同時兼容性也比較優(yōu)秀，但存在一定的局限性，無法精確定位元素的位置，因此通常用于實(shí)現(xiàn)左右兩列寬度固定、中間自適應(yīng)這種三列布局。采用浮動時需要注意對普通標(biāo)準(zhǔn)流中元素的影響，必要時需要清除（clear）浮動[4]。

3.3 定位式布局

CSS的定位布局可以精確擺放盒子的位置，從而完成比較復(fù)雜的網(wǎng)頁布局效果。根據(jù)定位屬性position的屬性值來確定具體的定位模式，position的屬性值有多個，其中較為常用的是固定定位（fixed）、絕對定位（absolute）和相對定位（relative）三種[3]。

固定定位是相對于瀏覽器窗口進(jìn)行的定位的。當(dāng)元素設(shè)置為固定定位（position：fixed）時，會脫離原文檔流進(jìn)行定位，原有的位置會被其他元素占據(jù)，而且無論瀏覽器窗口如何改變，瀏覽器滾動條如何拖動，固定定位的元素都將顯示在瀏覽器的固定位置，準(zhǔn)確位置由左偏移（left）和右偏移（right）設(shè)置水平方向，上偏移（top）和下偏移（bottom）設(shè)置垂直方向。

采用絕對定位時，首先要找到絕對定位的父元素即參考對象，父元素必須擁有定位屬性，如果父元素需要保留在標(biāo)準(zhǔn)流中的位置，一般應(yīng)設(shè)置為relative，當(dāng)然也需要精確的坐標(biāo)值。

當(dāng)頁面中元素按照標(biāo)準(zhǔn)流布局，需要對位置進(jìn)行調(diào)整而保留原來的位置時，可以采用相對定位。使用相對定位時，參考點(diǎn)是元素本身在標(biāo)準(zhǔn)流中的位置，坐標(biāo)值的設(shè)置原理與其他定位方式相同?；诙ㄎ环绞降奶匦?，一般不會單獨(dú)采用相對定位方式，通常需要結(jié)合絕對定位使用，也就是把相對定位的元素作為絕對定位的父元素，這樣可以保證子元素與其父元素之間的位置不發(fā)生變化[5]。圖4給出了一種定位布局示意圖，實(shí)現(xiàn)時HTML部分源代碼如下。

此處，父容器# wrapper設(shè)置為相對定位，# wrapper{position： relative; }，兩個子元素h2和#face分別設(shè)置為絕對定位，h2{position：absolute;left：150px;bottom： 10px; }，#face{position： absolute;left：30px;bottom：-30px; }，如此定位布局后，無論父容器# wrapper如何變動頁面位置，h2和#face相對于# wrapper的位置不會受影響。

當(dāng)然，對結(jié)構(gòu)比較復(fù)雜的頁面，甚至可以采用標(biāo)準(zhǔn)流、浮動式和定位方式相結(jié)合的綜合布局模式。圖5給出了浮動、相對定位和絕對定位互相搭配的一種布局示意圖，實(shí)現(xiàn)時HTML部分源代碼如下。

此處，父容器# contrainer設(shè)置為相對定位，# contrainer { position： relative; width： 260px;height： 80px; background-color： #aaa; }，其子元素#btn設(shè)置為絕對定位，并且位于父容器#contrainer的右下角，#btn{position： absolute;height： 20px;width： 100px;right： 5px;bottom： 3px;}，子元素#fang使用了浮動法，以使4個數(shù)字按鈕顯示在同一行中，.fang{float： left;width： 20px;height： 20px;margin-left： 5px;font-size：12px;color： #FFF; background-color： #555;text-align： center;}，這樣布局以后，無論父容器# contrainer的位置如何變動，4個數(shù)字按鈕相對于# contrainer的位置不會受到影響。

4 結(jié)束語

頁面布局對于改善網(wǎng)站的外觀非常重要，是為了使網(wǎng)站頁面結(jié)構(gòu)更加清晰、有條理，而對頁面進(jìn)行的排版，達(dá)到以最適合用戶瀏覽的形式將文字、圖片等頁面元素予以展示的效果。相比傳統(tǒng)的表格排版布局，DIV和CSS布局技術(shù)不僅順應(yīng)了技術(shù)開發(fā)的需求，而且也更加符合Web前端開發(fā)標(biāo)準(zhǔn)。

參考文獻(xiàn)：

[1] 汪嬋嬋，徐興雷.Web前端開發(fā)任務(wù)驅(qū)動式教程：HTML5+CSS3+JavaScript[M].北京：電子工業(yè)出版社，2019.

[2] 楊松.網(wǎng)頁設(shè)計案例教程（HTML5+CSS3+JavaScript）[M].北京：航空工業(yè)出版社，2019.

[3] 黑馬程序員.網(wǎng)頁設(shè)計與制作：HTML5+CSS3+JavaScript[M].北京：中國鐵道出版社，2018.

[4] 殷正坤，魏紅偉，朱希偉.網(wǎng)頁設(shè)計與制作案例教程：HTML+CSS+JavaScript[M].成都：電子科技大學(xué)出版社，2019.

[5] 呂云翔，歐陽植昊，徐碩.HTML5+CSS3+JavaScript網(wǎng)頁設(shè)計案例開發(fā)[M].北京：清華大學(xué)出版社，2018.

收稿日期：2022-03-09

基金項目：2019年度陜西省職業(yè)技術(shù)教育學(xué)會基金項目：技能大賽引領(lǐng)高職物聯(lián)網(wǎng)專業(yè)課程體系構(gòu)建研究（項目編號：SZJYB19-118）

作者簡介：李小遐（1968—），女，陜西西安人，教授，碩士，研究方向?yàn)檐浖夹g(shù)。