基于CSS技術(shù)的網(wǎng)頁(yè)布局探究

馮小強(qiáng)

摘要：基于CSS技術(shù)，配合使用DIV是當(dāng)前常用的網(wǎng)頁(yè)布局方式，文中詳細(xì)分析探討了CSS技術(shù)以及DIV的功能和特點(diǎn)，提出了實(shí)際應(yīng)用CSS進(jìn)行網(wǎng)頁(yè)頁(yè)面設(shè)計(jì)的方法和技巧。

關(guān)鍵詞：CSS；DIV；頁(yè)面布局

中圖分類(lèi)號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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

布局是設(shè)計(jì)制作網(wǎng)頁(yè)的基礎(chǔ)，網(wǎng)頁(yè)的響應(yīng)速度以及美觀程度決定了網(wǎng)頁(yè)的瀏覽頻次，因此，對(duì)網(wǎng)頁(yè)的優(yōu)化與美工處理是整個(gè)網(wǎng)頁(yè)制作過(guò)程中非常重要的環(huán)節(jié)[1]。從最初的Table布局方式到目前大量使用的DIV+CSS布局，CSS技術(shù)的廣泛應(yīng)用，使網(wǎng)頁(yè)的樣式制作變得更加靈活便利，也極大地提高了網(wǎng)頁(yè)代碼的執(zhí)行效率。

1 DIV與CSS

實(shí)際應(yīng)用中，CSS的技術(shù)總是和DIV標(biāo)簽一起使用，通過(guò)與DIV搭配，實(shí)現(xiàn)對(duì)網(wǎng)頁(yè)中各個(gè)元素精確定位與控制，靈活、方便地制作出設(shè)計(jì)者預(yù)期的頁(yè)面效果。

1.1 DIV

DIV是HTML中的一個(gè)標(biāo)簽，表示一個(gè)塊，就像一個(gè)容器，可以容納組合其他各種HTML元素。如果單獨(dú)使用DIV，而不加任何CSS樣式，將看不到任何效果，沒(méi)有實(shí)際意義。實(shí)際的網(wǎng)頁(yè)設(shè)計(jì)中，一般是使用DIV來(lái)將頁(yè)面劃分組合成各個(gè)區(qū)塊，再引入CSS來(lái)定位設(shè)置各個(gè)區(qū)塊，真正實(shí)現(xiàn)了網(wǎng)頁(yè)的內(nèi)容與顯示的分離。

1.2 CSS

CSS，即：層疊樣式表。是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，不僅可以靜態(tài)修飾網(wǎng)頁(yè)，還可以配合腳本語(yǔ)言動(dòng)態(tài)格式化網(wǎng)頁(yè)元素。[2]

2 CSS技術(shù)

使用HTML標(biāo)簽只是簡(jiǎn)單的搭建起網(wǎng)頁(yè)骨架，CSS技術(shù)可以對(duì)網(wǎng)頁(yè)中元素進(jìn)行像素級(jí)精確控制，支持幾乎所有字體字號(hào)樣式[2]，使我們對(duì)網(wǎng)頁(yè)骨架和網(wǎng)頁(yè)內(nèi)容進(jìn)行美化和裝飾。CSS可以改變網(wǎng)頁(yè)中文字的大小、字體、顏色；改變網(wǎng)頁(yè)元素的性質(zhì)、位置、背景色、背景圖片等。

2.1 CSS引入方式

使用CSS的目的是使的網(wǎng)頁(yè)的顯示與內(nèi)容分離，CSS樣式的引入方式非常靈活，既可以將樣式規(guī)則嵌入到網(wǎng)頁(yè)代碼中，又可以單獨(dú)存儲(chǔ)為一個(gè)樣式文件，這些樣式規(guī)則都可以完成對(duì)網(wǎng)頁(yè)元素的格式化。

1） 外部樣式：在網(wǎng)頁(yè)文件外部新建一個(gè)擴(kuò)展名為css的文件，例如：demo.css，將樣式規(guī)則代碼寫(xiě)入CSS文件中。在網(wǎng)頁(yè)文件標(biāo)簽中寫(xiě)入固定格式代碼：，這樣就將demo.css文件樣式規(guī)則應(yīng)用到網(wǎng)頁(yè)元素上。

2） 內(nèi)頁(yè)樣式：直接在網(wǎng)頁(yè)文件內(nèi)的標(biāo)簽中加入

3） 行內(nèi)樣式：直接在網(wǎng)頁(yè)標(biāo)簽行內(nèi)使用style屬性，設(shè)置style屬性值。如：

我是段落

三種方式可以混合使用，在優(yōu)先級(jí)上，行內(nèi)樣式>內(nèi)頁(yè)樣式>外部樣式。

2.2 選擇器

CSS的語(yǔ)法規(guī)則主要是選擇器和聲明。選擇器是用來(lái)選中需要操作的網(wǎng)頁(yè)元素，CSS選擇器的寫(xiě)法非常靈活，需要在實(shí)際的項(xiàng)目應(yīng)用中靈活使用，目前CSS的最新版本是CSS3，而新版本常常存在與瀏覽器的兼容性問(wèn)題，常用的兼容性較好的是下面前3種選擇器。

1） id選擇器：給html文件的標(biāo)簽加一個(gè)id屬性，屬性的值是按語(yǔ)法規(guī)則自定義的名稱(chēng)，一個(gè)id名在頁(yè)面中是唯一的，不能重復(fù)。通過(guò)#id名稱(chēng){...}選中網(wǎng)頁(yè)元素進(jìn)行操作。

2） 類(lèi)（class）選擇器：給html文件的標(biāo)簽加class屬性，屬性值是按語(yǔ)法規(guī)則自定義的類(lèi)名。通過(guò) .類(lèi)名{...}選中網(wǎng)頁(yè)元素進(jìn)行操作。相較于id名的唯一性，不同的標(biāo)簽可以使用相同的類(lèi)名，同一個(gè)標(biāo)簽也可以有多個(gè)類(lèi)名，充分體現(xiàn)了用類(lèi)名來(lái)歸類(lèi)標(biāo)簽的特性。

3） 標(biāo)簽選擇器，直接使用html標(biāo)簽名選中網(wǎng)頁(yè)元素，比如：p{font-size：20px；color：red；}

4） 復(fù)雜選擇器：根據(jù)頁(yè)面標(biāo)簽的嵌套層次，組合id選擇器、標(biāo)簽選擇器、類(lèi)選擇器來(lái)選擇元素。比如：div.mycolor{color：red；}選中div標(biāo)簽下的類(lèi)名為mycolor的元素；div#myfont{font-size：20px；}選中div標(biāo)簽下的id名為myfont的元素；div p{color：red；}選中div標(biāo)簽下的p標(biāo)簽；div，p，div.moycolor，div#myfont{color：red；}被逗號(hào)分隔開(kāi)的選擇器都被選中。

5） 偽類(lèi)選擇器：根據(jù)狀態(tài)來(lái)選擇。a：hover{color：red}當(dāng)有鼠標(biāo)移動(dòng)到a標(biāo)簽上時(shí)，選中a標(biāo)簽。

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

2.3 盒模型概念

盒模型是CSS中非常中重要的概念，是對(duì)網(wǎng)頁(yè)元素進(jìn)行精確定位的基礎(chǔ)。頁(yè)面中所有的標(biāo)記都可以看作一個(gè)盒子，盒模型規(guī)定了盒內(nèi)包含的“內(nèi)容”（content）、內(nèi)容四周距離盒子邊框的“內(nèi)邊距”（padding）、盒子四周的“外邊距”（margin）、盒子本身的“邊框”（border）。例如：padding：10px 20px 30px 40px；按上、右、下、左的順序設(shè)置內(nèi)邊距。

2.4 定位與浮動(dòng)

為了得到更好的頁(yè)面效果，就必須調(diào)整好元素的位置，CSS可以對(duì)頁(yè)面元素進(jìn)行精確靈活的定位。

1） 相對(duì)定位：相對(duì)于元素原來(lái)的位置進(jìn)行偏移定位。例如：#div{position：relative；left：10px；top：10px；}相對(duì)原來(lái)位置，div左邊和頂部各偏移留空10像素。設(shè)置相對(duì)定位后，元素依舊在標(biāo)準(zhǔn)流中。

2） 絕對(duì)定位：相對(duì)于body元素的起始點(diǎn)進(jìn)行偏移定位。例如： #div{position：absolute；left：10px；top：10px}相對(duì)整個(gè)頁(yè)面的左上角，div左邊和頂部各偏移留空10像素。設(shè)置絕對(duì)定位后，元素會(huì)脫離標(biāo)準(zhǔn)流。

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

4） 浮動(dòng)也是一種對(duì)頁(yè)面元素進(jìn)行定位的方法，由于塊級(jí)元素在頁(yè)面中是獨(dú)占一行，為了實(shí)現(xiàn)多個(gè)塊級(jí)元素排在一行，在不改變?cè)匦再|(zhì)的情況下，就要使用到浮動(dòng)。浮動(dòng)可以讓DIV等塊級(jí)元素脫離標(biāo)準(zhǔn)流，依次緊挨從左到右形成一個(gè)新的流，漂浮在標(biāo)準(zhǔn)流之上，直到超出父元素的寬度，才會(huì)換到下一行排列，使用float屬性來(lái)實(shí)現(xiàn)浮動(dòng)。使用浮動(dòng)必然會(huì)影響到未使用浮動(dòng)的標(biāo)準(zhǔn)流中的元素位置，可以使用clear屬性來(lái)清除浮動(dòng)的影響。

3 網(wǎng)頁(yè)布局技術(shù)的實(shí)際應(yīng)用

布局是整個(gè)網(wǎng)頁(yè)制作的基礎(chǔ)，實(shí)際的項(xiàng)目中，需要將頁(yè)面分成不同的區(qū)塊，由DIV容器來(lái)存放這些區(qū)塊。首先要整體規(guī)劃，根據(jù)網(wǎng)站的內(nèi)容、風(fēng)格、特點(diǎn)繪制出布局圖，明確DIV層的嵌套關(guān)系，搭建出網(wǎng)頁(yè)的框架結(jié)構(gòu)。再使用CSS技術(shù)對(duì)頁(yè)面各個(gè)元素實(shí)現(xiàn)精準(zhǔn)控制。具體的布局方式很多，最常用的是“固定浮動(dòng)布局”，需要先將元素的寬度設(shè)為固定的值，再配合浮動(dòng)技術(shù)實(shí)現(xiàn)頁(yè)面內(nèi)容的劃分。

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

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

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

布局是網(wǎng)頁(yè)制作的基礎(chǔ)，各種新技術(shù)的出現(xiàn)，使得網(wǎng)頁(yè)制作變得更加便捷、高效，做出的網(wǎng)站功能更加強(qiáng)大，頁(yè)面更加美觀悅目。CSS便是眾多新技術(shù)的一種，配合使用DIV，使得網(wǎng)頁(yè)制作的水平和效果得到了很大提高。筆者結(jié)合自身網(wǎng)頁(yè)制作的經(jīng)驗(yàn)，分析研究了CSS技術(shù)在網(wǎng)頁(yè)頁(yè)面布局中的強(qiáng)大功能，提出了實(shí)際應(yīng)用CSS技術(shù)制作網(wǎng)頁(yè)的相關(guān)方法和技巧。今后，隨著HTML5技術(shù)以及CSS3技術(shù)的應(yīng)用，Web開(kāi)發(fā)將會(huì)得到更多更先進(jìn)的技術(shù)支持，作為Web開(kāi)發(fā)前端的網(wǎng)頁(yè)制作水平也必將大幅提高，必將制作出更加優(yōu)秀的網(wǎng)頁(yè)。

參考文獻(xiàn)：

[1] 黃榮喜.CSS與表格布局在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用 [J].廣西農(nóng)學(xué)報(bào)，2017（2）：27-29.

[2] 黃雪琴，耿強(qiáng)，陳顯軍.基于CSS+DIV的自適應(yīng)寬度網(wǎng)頁(yè)布局方法[J].計(jì)算機(jī)與現(xiàn)代化，2014（6）：53-55

[3] 楊瑞梅.探討HTML5和CSS3.0在網(wǎng)頁(yè)設(shè)計(jì)中的新特性[J].電子制作，2017（6）52-53

【通聯(lián)編輯：梁書(shū)】