基于CSS技術的網頁布局探究

馮小強

摘要：基于CSS技術，配合使用DIV是當前常用的網頁布局方式，文中詳細分析探討了CSS技術以及DIV的功能和特點，提出了實際應用CSS進行網頁頁面設計的方法和技巧。

關鍵詞：CSS；DIV；頁面布局

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2018）28-0244-02

Research on Web Page Layout Based on CSS Technology

FENG Xiao-qiang

（School of Mathematics and Computer Science， Shaanxi Sci-Tech University， Hanzhong 723000， China）

Abstract：Based on CSS technology， the use of div is a commonly used web page layout method. This paper analyzes CSS technology and the functions and characteristics of div in detail， and puts forward the methods and techniques of using CSS in web page design.

Key words： CSS； DIV； Research； Page Layout

布局是設計制作網頁的基礎，網頁的響應速度以及美觀程度決定了網頁的瀏覽頻次，因此，對網頁的優化與美工處理是整個網頁制作過程中非常重要的環節[1]。從最初的Table布局方式到目前大量使用的DIV+CSS布局，CSS技術的廣泛應用，使網頁的樣式制作變得更加靈活便利，也極大地提高了網頁代碼的執行效率。

1 DIV與CSS

實際應用中，CSS的技術總是和DIV標簽一起使用，通過與DIV搭配，實現對網頁中各個元素精確定位與控制，靈活、方便地制作出設計者預期的頁面效果。

1.1 DIV

DIV是HTML中的一個標簽，表示一個塊，就像一個容器，可以容納組合其他各種HTML元素。如果單獨使用DIV，而不加任何CSS樣式，將看不到任何效果，沒有實際意義。實際的網頁設計中，一般是使用DIV來將頁面劃分組合成各個區塊，再引入CSS來定位設置各個區塊，真正實現了網頁的內容與顯示的分離。

1.2 CSS

CSS，即：層疊樣式表。是一種用來表現HTML或XML等文件樣式的計算機語言，不僅可以靜態修飾網頁，還可以配合腳本語言動態格式化網頁元素。[2]

2 CSS技術

使用HTML標簽只是簡單的搭建起網頁骨架，CSS技術可以對網頁中元素進行像素級精確控制，支持幾乎所有字體字號樣式[2]，使我們對網頁骨架和網頁內容進行美化和裝飾。CSS可以改變網頁中文字的大小、字體、顏色；改變網頁元素的性質、位置、背景色、背景圖片等。

2.1 CSS引入方式

使用CSS的目的是使的網頁的顯示與內容分離，CSS樣式的引入方式非常靈活，既可以將樣式規則嵌入到網頁代碼中，又可以單獨存儲為一個樣式文件，這些樣式規則都可以完成對網頁元素的格式化。

1） 外部樣式：在網頁文件外部新建一個擴展名為css的文件，例如：demo.css，將樣式規則代碼寫入CSS文件中。在網頁文件標簽中寫入固定格式代碼：，這樣就將demo.css文件樣式規則應用到網頁元素上。

2） 內頁樣式：直接在網頁文件內的標簽中加入

3） 行內樣式：直接在網頁標簽行內使用style屬性，設置style屬性值。如：

我是段落

三種方式可以混合使用，在優先級上，行內樣式>內頁樣式>外部樣式。

2.2 選擇器

CSS的語法規則主要是選擇器和聲明。選擇器是用來選中需要操作的網頁元素，CSS選擇器的寫法非常靈活，需要在實際的項目應用中靈活使用，目前CSS的最新版本是CSS3，而新版本常常存在與瀏覽器的兼容性問題，常用的兼容性較好的是下面前3種選擇器。

1） id選擇器：給html文件的標簽加一個id屬性，屬性的值是按語法規則自定義的名稱，一個id名在頁面中是唯一的，不能重復。通過#id名稱{...}選中網頁元素進行操作。

2） 類（class）選擇器：給html文件的標簽加class屬性，屬性值是按語法規則自定義的類名。通過 .類名{...}選中網頁元素進行操作。相較于id名的唯一性，不同的標簽可以使用相同的類名，同一個標簽也可以有多個類名，充分體現了用類名來歸類標簽的特性。

3） 標簽選擇器，直接使用html標簽名選中網頁元素，比如：p{font-size：20px；color：red；}

4） 復雜選擇器：根據頁面標簽的嵌套層次，組合id選擇器、標簽選擇器、類選擇器來選擇元素。比如：div.mycolor{color：red；}選中div標簽下的類名為mycolor的元素；div#myfont{font-size：20px；}選中div標簽下的id名為myfont的元素；div p{color：red；}選中div標簽下的p標簽；div，p，div.moycolor，div#myfont{color：red；}被逗號分隔開的選擇器都被選中。

5） 偽類選擇器：根據狀態來選擇。a：hover{color：red}當有鼠標移動到a標簽上時，選中a標簽。

6） 通配符選擇器：*{color：red；}選中html中所有元素。

2.3 盒模型概念

盒模型是CSS中非常中重要的概念，是對網頁元素進行精確定位的基礎。頁面中所有的標記都可以看作一個盒子，盒模型規定了盒內包含的“內容”（content）、內容四周距離盒子邊框的“內邊距”（padding）、盒子四周的“外邊距”（margin）、盒子本身的“邊框”（border）。例如：padding：10px 20px 30px 40px；按上、右、下、左的順序設置內邊距。

2.4 定位與浮動

為了得到更好的頁面效果，就必須調整好元素的位置，CSS可以對頁面元素進行精確靈活的定位。

1） 相對定位：相對于元素原來的位置進行偏移定位。例如：#div{position：relative；left：10px；top：10px；}相對原來位置，div左邊和頂部各偏移留空10像素。設置相對定位后，元素依舊在標準流中。

2） 絕對定位：相對于body元素的起始點進行偏移定位。例如： #div{position：absolute；left：10px；top：10px}相對整個頁面的左上角，div左邊和頂部各偏移留空10像素。設置絕對定位后，元素會脫離標準流。

3） 固定定位。相對于瀏覽器窗口進行偏移定位。#div{position：fixed；left：10px；top：10px；}相對于瀏覽器窗口，始終保持div的左邊和頂部留空10像素，即使滑動滾動條div的位置也始終不變。

4） 浮動也是一種對頁面元素進行定位的方法，由于塊級元素在頁面中是獨占一行，為了實現多個塊級元素排在一行，在不改變元素性質的情況下，就要使用到浮動。浮動可以讓DIV等塊級元素脫離標準流，依次緊挨從左到右形成一個新的流，漂浮在標準流之上，直到超出父元素的寬度，才會換到下一行排列，使用float屬性來實現浮動。使用浮動必然會影響到未使用浮動的標準流中的元素位置，可以使用clear屬性來清除浮動的影響。

3 網頁布局技術的實際應用

布局是整個網頁制作的基礎，實際的項目中，需要將頁面分成不同的區塊，由DIV容器來存放這些區塊。首先要整體規劃，根據網站的內容、風格、特點繪制出布局圖，明確DIV層的嵌套關系，搭建出網頁的框架結構。再使用CSS技術對頁面各個元素實現精準控制。具體的布局方式很多，最常用的是“固定浮動布局”，需要先將元素的寬度設為固定的值，再配合浮動技術實現頁面內容的劃分。

由于不同種類和版本的瀏覽器存在兼容性問題，使得網頁代碼的執行會出現各種問題，所以在網頁制作的過程中，需要在不同的主流瀏覽器上測試網頁代碼，以確保代碼在這些瀏覽器上都能正確的執行和顯示。實際的項目中，可以借助“瀏覽器兼容性測試工具”，來測試網頁代碼在不同瀏覽器中的顯示情況，從而及時修正問題。如：“Spoon Browser Sandbox”，可以測試IE、Chrome、FireFox、Safari、Opera等主流瀏覽器；“IETester”，可以測試IE5.5到IE10等不同版本的IE瀏覽器。

網頁頁面中的每個元素都有默認的內外邊距，在不同種類和版本的瀏覽器中，實際默認的顯示距離都有不同，具體的項目中，需要一開始在CSS中將相關元素的內、外邊距初始化為“0”，如：body，div，p，img{margin：0px；padding：0px；}，就可以消除元素默認值對于定位和布局的影響；設置img，a img{border：none；} a{text-decoration：none；} a：hover{text-decoration：underline；}，可以消除圖像顯示時的默認邊框，并且只有當鼠標滑過超鏈接才會顯示下劃線；圖片等資源文件最好與CSS文件放在同一個目錄下，這樣在CSS中引入圖片時就可以直接使用圖片文件的名稱，而不用考慮路徑問題。

4 結束語

布局是網頁制作的基礎，各種新技術的出現，使得網頁制作變得更加便捷、高效，做出的網站功能更加強大，頁面更加美觀悅目。CSS便是眾多新技術的一種，配合使用DIV，使得網頁制作的水平和效果得到了很大提高。筆者結合自身網頁制作的經驗，分析研究了CSS技術在網頁頁面布局中的強大功能，提出了實際應用CSS技術制作網頁的相關方法和技巧。今后，隨著HTML5技術以及CSS3技術的應用，Web開發將會得到更多更先進的技術支持，作為Web開發前端的網頁制作水平也必將大幅提高，必將制作出更加優秀的網頁。

參考文獻：

[1] 黃榮喜.CSS與表格布局在網頁設計中的應用 [J].廣西農學報，2017（2）：27-29.

[2] 黃雪琴，耿強，陳顯軍.基于CSS+DIV的自適應寬度網頁布局方法[J].計算機與現代化，2014（6）：53-55

[3] 楊瑞梅.探討HTML5和CSS3.0在網頁設計中的新特性[J].電子制作，2017（6）52-53

【通聯編輯：梁書】