基于CSS技術上慣用的技巧

張棟梁

摘要：網頁制作目前比較流行使用DIV+CSS結構布局，這種結構與樣式，可以大大減少網頁的體積，提高網頁瀏覽速度，更適合當前網絡客戶的需求。DIV+CSS可將網頁內容與表現相分離、結構模塊化，對后期維護更是方便與便捷。基于CSS如此強大的功能，本文根據實際應用CSS過程中常見問題提出一些方法和技巧，以方便初學者及學生在學習過程中可以借鑒及學習。

關鍵詞：DIV+CSS結構;應用方法與技巧;網頁制作;結構與樣式;借鑒與學習

中圖分類號：G642? ? ? ? 文獻標識碼：A

文章編號：1009-3044（2019）22-0224-02

開放科學（資源服務）標識碼（OSID）：

從以往流行的Table布局，到目前結構與表現分離模式，實現了技術上的進步。基于DIV+CSS可以實現結構與表現分離，使網頁美觀、大方，并且升級輕松、維護方便，Dreamweaver軟件在網頁制作方面備受青睞。DIV+CSS也成了網頁制作課程的重要知識點與難點，如果在學習的過程中運用一些方法與技巧，可以達到事半功倍的效果。以下技巧與方法在網頁制作過程中被頻頻引用，合理的使用這些方法與技巧，即可以避免出現低級錯誤，又可以提高學習速度與精度。

1 DIV+CSS

首先理解盒子（DIV）概念，盒子（DIV）是一個范圍，有寬、高、邊框、邊距的區域。我們可以在這個區域（空間）里放任何東西，比如文本、圖像、視頻等。在實際制作網頁時，首先對網頁進行結構分析，網頁結構一般簡單分為上中下，左中右，當然這是整體的分法，內部的結構需要繼續細化。 實際操作中一般將整體的結構放置在一個最外層盒子里，此盒子的功能主要實現網頁居中位置，或者相似內容或信息放置在一個大盒子模塊里，盒子的功能依然是為了居中瀏覽器頁面。如圖所示

如上圖所示，從該結構中可以看到，此網頁分為兩大塊：類名main塊、類名foot塊，此兩模塊是最外層的模塊。功能是使模塊里的內容居中瀏覽器頁面。

2 CSS屬性margin

2.1屬性margin

Margin可以設置盒子模塊外邊距，即盒子與盒子之間的距離，設置外邊距屬性的方法：margin-top、margin-left、margin-right、margin-bottom。margin：上右下左邊距，按照上右下左的順序給屬性賦值，缺少某一邊距值找對面邊距值代替。

2.2 margin特殊屬性值auto

對盒子模塊設置寬度屬性width，并將左右外邊距設置為auto，可以將該盒子模塊水平方向居中，實際工作中常用這種方法進行網頁居中布局。CSS代碼：選擇器{margin： Npxauto;}，Npx代表上下邊距值，根據網站實際情況設置網頁上下邊距值，以達到網站效果上的舒適與美感;auto屬性值代表左右邊距值為auto，系統平臺會根據瀏覽器自動計算左右邊距，從而使網頁內容居中位置放置瀏覽器中。該屬性在網頁布局中經常使用，請注意使用前提要求對模塊設置寬度。

2.3 margin屬性值為負值

margin屬性值為負值時，可以使相鄰模塊重疊。常用于網頁導航條，通過滑動門技術，設置margin屬性值為負值，從而實現導航條模塊重疊，達到對導航條美化的效果。

3 CSS屬性line-height

line-height通常用于設置行間距，即字符的垂直間距，一般稱為行高。在實際應用中，該屬性一般作為模塊內容垂直居中功能。首先對模塊設置height值，即設置文本或者模塊的高，這種情況下，模塊內容會默認頂端對齊，如果想實現文本內容垂直方向居中，需要同步設置line-height值，且height值等于line-height值。例如：height：30px; line-height：30px;在height值與line-height值相同的情況下，可以實現文本內容在模塊中垂直居中。

4 CSS屬性border

4.1 屬性Border

Border用于設置盒子模塊邊框，設置邊框屬性的方法 綜合設置方法：border：邊框寬度 邊框樣式 邊框顏色，： 單邊綜合設置方法：border-top、border -left、border -right、border -bottom。綜合設置方法是經常被引用的方法，此方法可以同時設置邊框的三種樣式。如果單獨設置邊框顏色，要求先設置邊框樣式，因為只有邊框存在，顏色樣式才能顯現。如果遺漏邊框樣式直接設置顏色，則顏色是不顯示的。

4.2 Border測試功能

實際制作網頁過程中，當網頁布局出現問題且找不到問題所在時，可以通過border屬性解決，此時border起到測試功能，通過設置border可以讓模塊內容所占有的區域顯示，從而可以看到被隱藏起來的細小狀況，進而推測出現問題的地方。

5 精靈技術與滑動門技術

精靈技術與滑動門技術是針對導航條美化的技巧。其中精靈技術是為了解決網頁過多使用小圖片，導致網頁打開速度受到影響，為了解決服務器過多的次數訪問小圖片，將多個小圖片拼成一個大圖，通過background-position定位到大圖的確切位置來顯示需要的小圖片。滑動門技術是為了解決導航中文本字數不均及增加或減少字數帶來的大量代碼的修改，通過將導航背景圖切割為多個小圖，每個小圖單獨用HTML標記來定義，對中間切塊不設置寬度，寬度會隨著文本的數量自動增減，從而實現導航文本增減與背景寬度同步增減。

6 CSS功能界面

CSS代碼對初學者來說有些難度，學生對過多代碼的講解及編輯都會產生反感情緒，所以初次接觸CSS代碼或編寫CSS代碼，使用CSS界面更合適。圖形模式下編寫代碼對初學者來說，只需要一些基本的操作便可以取得很好的效果，所以更容易接受，更容易理解。

7 結語

網頁（網站）制作課程的學習及講授，需要實際與理論相結合，教材上提供的理論是概括性的概念，沒有涉及它的一些擴展功能，這就需要我們自己在實際應用時多摸索、多試驗、多借鑒。以上常用的技巧與方法，會對初學者及學生在學習DIV+CSS過程中起到一定的幫助作用，對理論的片面含義及概念起到擴充作用。設計及制作網頁中都離不開CSS的使用，尤其是對網頁的優化、美化，CSS的功能是顯而易見，通過學習這些常用技巧，在將來的學習過程中會對大家起到幫助與專業指導的效果。

參考文獻：

[1]傳智播客高教產品研發部.網頁設計與制作（HTML+CSS）[M].中國鐵道出版社，2014（8）.

[2]張麗霞，朱賢坤.Dreamweaver在網頁開發中的應用技巧[J].信息系統工程，2018（8）：97-98.

[3]馮小強. 基于CSS技術的網頁布局探究[J].電腦知識與技術.2018，14（28）：244-245.

[4]趙春燕.電子商務網站設計與制作[M].北京大學出版社，2011（4）.

[5]李建忠，牟風瑞，安剛.電子商務網站建設與維護[M].清華大學出版社，2013（10）.

[6]傳智播客高教產品研發部.HTML+CSS+JavaScript 網頁制作案例教程[M].中國工信出版集團，人民郵電出版社，2015（9）.

[7]陸郁.探析CSS技術在網頁制作中的應用與代碼優化[J].電子信息，2019（1）：110.

【通聯編輯：王力】