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

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

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

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

文章編號(hào)：1009-3044（2022）14-0049-02

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

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

2 CSS盒子模型

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

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

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

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

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

3.2 浮動(dòng)式布局

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

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

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

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

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

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

3.3 定位式布局

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

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

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

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

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

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

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

4 結(jié)束語(yǔ)

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

參考文獻(xiàn)：

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

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

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

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

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

收稿日期：2022-03-09

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

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