基于“DIV+CSS”盒子模型的網頁布局初探

摘 要：為了滿足新時代人們對信息獲取和對外展示的需求，網頁設計越來越受人關注。從表格布局到框架設計，再到如今流行的“DIV+CSS”盒子模型設計，網頁設計技術的發展日新月異。本文以一個簡單的實例，探究“DIV+CSS”網頁布局方式的技術特點和優勢，以期為廣大網頁設計技術愛好者和從業人員提供參考。

關鍵詞：網頁設計；DIV+CSS；盒子模型實例

中圖分類號：TP393.092 文獻標識碼：A 文章編號：2096-4706（2019）03-0088-03

Preliminary Study on Web Page Layout Based on “DIV+CSS” Box Model

ZHONG Jincheng

（Maoming Transport Senior Technical School，Maoming 525000，China）

Abstract：In order to meet people’s demand for information acquisition and external display in the new era，web design has attracted more and more attention. From table layout to frame design to the popular “DIV + CSS” box model design nowadays，the development of web page design technology is changing with each passing day. With a simple example，this paper explores the technical characteristics and advantages of “DIV + CSS” web page layout，in order to provide reference for the vast number of web page design technology enthusiasts and practitioners.

Keywords：web design；DIV+CSS；box model instance

0 引 言

信息時代，互聯網作為信息傳播的重要載體，憑借快速、高效、便捷、成本低廉等特點，對人們的生活產生了重要的影響，已成為人們生活中不可或缺的一部分。網頁成為人們獲取信息、查找資源、發布消息的重要工具?，F代社會，無論是個人、團體、政府機構、企業單位，都可以利用自己的主頁進行對外溝通、交流。越來越多的人，甚至是非計算機相關專業或者沒有接受高等教育的人，也在努力掌握網頁設計技能。本文正是基于這種背景，對網頁設計方法展開探索，結合網頁設計新模式和方式尋求一種易于人們接受、學習的網頁設計方法。

1 相關技術簡析

1.1 HTML與CSS的分工

超文本標記語言（Hyper Text Mark-up Language，簡寫HTML）是網頁設計使用的標準語言，其可以把文本、圖片、多媒體等內容通過客戶端瀏覽器呈現出來。一個好的網頁不是對內容的無序堆砌，而是對內容的有序呈現，從而使用戶擁有良好體驗。在實際應用中，將HTML與CSS相結合可以實現此目標。HTML標簽負責呈現內容，CSS作為層疊樣式表（Cascading Style Sheets），負責格式化、標準化HTML呈現的內容以及維護樣式的統一性，使其更加清晰、美觀。例如，若把一段文字或者一張圖片呈現在網頁上，則需要用到HTML中相應的標簽（文本的標簽為“

”，圖片的標簽為“”），那么，我需要設置文本的相關格式，比如字體、字號或者顏色等，或者給圖片加一個邊框、設置大小等，又或者給網頁中所有的文本和圖片設置統一格式，那么則會用到CSS。這就是HTML和CSS的根本區別。

1.2 盒子模型（Box Model）

在設計網頁之前，我們先要對該頁面進行內容空間分配，即頁面的布局。頁面布局比較常用的方式有三種：一是傳統的表格布局（Table Layout），二是具有特殊用途的框架布局（Frame Layout），三是現在最流行的盒子模型布局，這種布局在網頁設計中應用最為廣泛。

為什么稱之為“盒子模型”？在網頁設計中，每一個塊級元素基本都有內容（content）、邊框（border）、內邊距（padding）和外邊距（margin）等屬性，這些屬性可以用日常生活中的常見物體——盒子作比喻來理解，所以叫它盒子模型。理解盒子模型網頁設計常用的思維模型，對于開發拓展性強、可維護性高的頁面相當重要，同時其也是網頁前端布局開發的基礎。以元素的邊框（border）為界定，邊框自身有一定的寬度（例如設置邊框寬度為2px）；邊框以外為外邊距（margin），即元素與元素之間的距離；邊框與元素內容（content）之間的距離成為內邊距（padding）。每個屬性都可分為上（top）、右（right）、下（bottom）、左（left），以方便在實際操作中設置。

1.3 CSS的使用方式

CSS作為一種輔助HTML樣式的格式化語言，與HTML的使用需要遵循一定的規則，當然也可以靈活運用。在HTML中使用CSS的方法有三種，分別是行內樣式、內嵌樣式和外部樣式。這三種不同的方法有不一樣的表達方式和寫法，也可以對代碼產生一些影響。

（1）行內樣式。行內樣式主要寫法是把CSS代碼直接內嵌到HTML的具體元素中，該寫法的優點是可以一步到位，清晰地呈現設置的目標元素；缺點則是會使得代碼顯得雜亂無章，可讀性下降，因此不推薦使用該寫法?！皊tyle”的CSS行內樣式代碼寫法如下：

（2）內嵌樣式。內嵌樣式的寫法依然把是HTML代碼和CSS代碼放在同一個文件中，與行內樣式不同，內嵌樣式寫法不把CSS代碼直接寫在HTML元素中，而是統一把CSS代碼寫在一個“”元素中，然后把整個“style”代碼放在中，該寫法可以實現HTML和CSS代碼的分離，可讀性提高，但該CSS代碼只能為它所在文件所用，其他HTML文件不能引用。

（3）外部樣式。外部樣式實現了HTML文件和CSS文件的分離，它把CSS代碼獨立成一個“*.css”，既提高了可讀性，又能實現CSS文件的重用性，能同時被多個HTML文件加載使用。

2 “DIV+CSS”盒子模型網頁布局的優勢

2.1 高度的可維護性

可維護性是衡量一個網站好與壞的標準之一。高度的可維護性需要代碼具有高度可讀性，且代碼結構清晰、合理，當頁面出現問題（例如瀏覽器兼容出錯、頁面校對出現偏差等）時，可以快速地檢索代碼，分析其原因，找出癥結，使得修改代碼更加容易。

2.2 較好的可擴展性

頁面的可擴展性表現在兩個方面：一是模塊的可擴展性，即可快速、方便地增、減頁面模塊或者變動模塊位置，保持頁面結構的靈活性；二是頁面內容的可擴展性，對頁面內容進行調整也相當方便、快捷。

2.3 靈活的可定制性

商業網站對是否可定制有著極高的要求，其需要面對喜好不同、審美不同，甚至語言不同的客戶，且需要給客戶一定的選擇空間，由客戶決定網站的樣式、顏色、語言等?；凇癉IV+CSS”盒子模型建造的網站可以在一定程度上滿足以上要求，結合JavaScript，并在網頁上進行相應的設置，就可以達到此效果。

3 “DIV+CSS”盒子模型頁面布局過程

3.1 盒子式頁面布局設計簡圖

盒子式頁面布局設計相當于建立一個完整的頁面分模塊，并為每一個模塊分配特定的內容。在頁面設計開始階段，我們可以根據內容的重要程度、內容的量度、內容的性質等因素設計頁面布局及尺寸，即為頁面內容確定一個大體的位置。

頁面的初始設計圖可以靈活變動，無論是尺寸還是位置皆可視情況而定，內容部分可根據實際情況增添模塊，在代碼上可以簡單地用一組DIV塊來實現，可操作性高。代碼如下：

添加模塊前代碼：

<！--con_left模塊內容-->

添加模塊后代碼：

<！--con_left模塊內容-->

<！--con_right模塊內容-->

根據代碼所示，在container模塊中原本只有con_left模塊，如果需要添加另外一個模塊，則可以利用DIV標簽輕松添加一個con_right模塊。

3.2 實現盒子式“占位圖”

在盒子式網頁設計實現的過程中，我們可以采取“先占位后定位”的原則，即可以根據盒子式頁面設計簡圖，用不同顏色的版塊為各模塊占位，使用代碼實現由簡圖到“占位圖”。在本例中，我們設計了一個“占位圖”，紅色表示頁面頭部，黃色表示頁面底部，頁面主題內容分為兩大部分，分別用藍色和綠色占位，效果如圖1所示。

在代碼編寫方面，HTML關鍵代碼如下，其中header模塊為頁面頭部部分，main模塊為主體內容部分（內分為main_left模塊和main_right模塊），footer模塊為頁面底部部分，另外，nav部分為各模塊之間的間隙而設。

HTML代碼中只是利用DIV元素創建了一個空白的框架，在沒有添加任何樣式的設置之前，你會發現什么都看不見，為了完成如圖1所示的“占位圖”，需要在HTML代碼中加入相應的CSS樣式設置，CSS代碼也相對應地對HTML代碼中相應模塊進行樣式設置。

3.3 以“占位圖”為基礎填充內容

“占位圖”的頁面布局方法能起到為內容“占位”，確定內容模塊區域的作用。這種做法具有諸多優勢，一是邏輯上非常清晰，一目了然；二是代碼的運用相對簡單，是網頁設計中頁面布局的經典做法；三是設計模板化，擴展性強，可重復使用，可以提高網頁開發的效率，對于網頁設計初學者來說尤其受用。在此“占位圖”的基礎上，我們把內容添加在合適的位置，并對其進行調整使其美化，一個網頁設計即完成。

4 結 論

將HTML標簽和CSS樣式結合，是網頁設計的基礎，如本文中所述實例所示，通過使用HTML設定內容，用DIV標簽限定內容的區域（即建立一個“塊”），用CSS中的顏色、大小標識“塊”，建立一個以顏色為標識的“占位圖”，再在每一“塊”中填入相應內容，就是簡單網頁設計的整個流程?！癉IV+CSS”盒子模型網頁布局方法，相對來講邏輯更清晰，入門門檻更低，對初學者來說相當受用。而要建造一個好看而又受歡迎的網頁，涉及到的因素會很多，例如內容要具有有足夠的吸引力、網頁特效夠豐富等，這就對網頁設計者提出了更高的技術要求。

參考文獻：

[1] [美]邁耶著.CSS權威指南（第3版） [M].尹志忠，侯妍，譯.北京：中國電力出版社，2010.

[2] 喻浩.CSS+DIV網頁樣式與布局從入門到精通 [M].北京：清華大學出版社，2013.

作者簡介：鐘金成（1990.05-），男，漢族，廣東高州人，計算機教師，初級職稱，本科，研究方向：計算機程序設計、網站開發。