基于HTML5+CSS3的網頁布局

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

關鍵詞：Web前端;HTML5;CSS3;盒子模型;網頁布局

中圖分類號：TP393.09? ? ? 文獻標識碼：A

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

1 網頁布局概念

網頁布局是指將網頁中的所有元素進行排版和定位。在設計與制作網頁時，合理的布局可以使頁面內容及結構清晰，元素疏密適當，色彩對比分明，讓用戶擁有良好的頁面瀏覽體驗。在CSS3中，使用盒子模型對元素定位，淘汰了傳統的采用表格布局的頁面排版方法。

2 CSS盒子模型

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

3 網頁布局技術

3.1 標準流布局

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

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

3.2 浮動式布局

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

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

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

對于企事業單位的門戶網站，特別是電子商務之類的網站，因為頁面內容分類眾多，通常需要進行左中右等三欄布局的頁面效果，而浮動后的盒子都會脫離標準流，并排顯示在同一行，從而呈現出三欄的劃分效果。圖3給出了三列布局架構示意圖，實現時HTML部分源代碼如下。

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

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

3.3 定位式布局

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

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

采用絕對定位時，首先要找到絕對定位的父元素即參考對象，父元素必須擁有定位屬性，如果父元素需要保留在標準流中的位置，一般應設置為relative，當然也需要精確的坐標值。

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

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

當然，對結構比較復雜的頁面，甚至可以采用標準流、浮動式和定位方式相結合的綜合布局模式。圖5給出了浮動、相對定位和絕對定位互相搭配的一種布局示意圖，實現時HTML部分源代碼如下。

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

4 結束語

頁面布局對于改善網站的外觀非常重要，是為了使網站頁面結構更加清晰、有條理，而對頁面進行的排版，達到以最適合用戶瀏覽的形式將文字、圖片等頁面元素予以展示的效果。相比傳統的表格排版布局，DIV和CSS布局技術不僅順應了技術開發的需求，而且也更加符合Web前端開發標準。

參考文獻：

[1] 汪嬋嬋，徐興雷.Web前端開發任務驅動式教程：HTML5+CSS3+JavaScript[M].北京：電子工業出版社，2019.

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

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

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

[5] 呂云翔，歐陽植昊，徐碩.HTML5+CSS3+JavaScript網頁設計案例開發[M].北京：清華大學出版社，2018.

收稿日期：2022-03-09

基金項目：2019年度陜西省職業技術教育學會基金項目：技能大賽引領高職物聯網專業課程體系構建研究（項目編號：SZJYB19-118）

作者簡介：李小遐（1968—），女，陜西西安人，教授，碩士，研究方向為軟件技術。