張棟梁

摘要：網(wǎng)頁(yè)制作目前比較流行使用DIV+CSS結(jié)構(gòu)布局，這種結(jié)構(gòu)與樣式，可以大大減少網(wǎng)頁(yè)的體積，提高網(wǎng)頁(yè)瀏覽速度，更適合當(dāng)前網(wǎng)絡(luò)客戶(hù)的需求。DIV+CSS可將網(wǎng)頁(yè)內(nèi)容與表現(xiàn)相分離、結(jié)構(gòu)模塊化，對(duì)后期維護(hù)更是方便與便捷?；贑SS如此強(qiáng)大的功能，本文根據(jù)實(shí)際應(yīng)用CSS過(guò)程中常見(jiàn)問(wèn)題提出一些方法和技巧，以方便初學(xué)者及學(xué)生在學(xué)習(xí)過(guò)程中可以借鑒及學(xué)習(xí)。

關(guān)鍵詞：DIV+CSS結(jié)構(gòu);應(yīng)用方法與技巧;網(wǎng)頁(yè)制作;結(jié)構(gòu)與樣式;借鑒與學(xué)習(xí)

中圖分類(lèi)號(hào)：G642? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2019）22-0224-02

開(kāi)放科學(xué)（資源服務(wù)）標(biāo)識(shí)碼（OSID）：

從以往流行的Table布局，到目前結(jié)構(gòu)與表現(xiàn)分離模式，實(shí)現(xiàn)了技術(shù)上的進(jìn)步。基于DIV+CSS可以實(shí)現(xiàn)結(jié)構(gòu)與表現(xiàn)分離，使網(wǎng)頁(yè)美觀、大方，并且升級(jí)輕松、維護(hù)方便，Dreamweaver軟件在網(wǎng)頁(yè)制作方面?zhèn)涫芮嗖A。DIV+CSS也成了網(wǎng)頁(yè)制作課程的重要知識(shí)點(diǎn)與難點(diǎn)，如果在學(xué)習(xí)的過(guò)程中運(yùn)用一些方法與技巧，可以達(dá)到事半功倍的效果。以下技巧與方法在網(wǎng)頁(yè)制作過(guò)程中被頻頻引用，合理的使用這些方法與技巧，即可以避免出現(xiàn)低級(jí)錯(cuò)誤，又可以提高學(xué)習(xí)速度與精度。

1 DIV+CSS

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

如上圖所示，從該結(jié)構(gòu)中可以看到，此網(wǎng)頁(yè)分為兩大塊：類(lèi)名main塊、類(lèi)名foot塊，此兩模塊是最外層的模塊。功能是使模塊里的內(nèi)容居中瀏覽器頁(yè)面。

2 CSS屬性margin

2.1屬性margin

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

2.2 margin特殊屬性值auto

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

2.3 margin屬性值為負(fù)值

margin屬性值為負(fù)值時(shí)，可以使相鄰模塊重疊。常用于網(wǎng)頁(yè)導(dǎo)航條，通過(guò)滑動(dòng)門(mén)技術(shù)，設(shè)置margin屬性值為負(fù)值，從而實(shí)現(xiàn)導(dǎo)航條模塊重疊，達(dá)到對(duì)導(dǎo)航條美化的效果。

3 CSS屬性line-height

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

4 CSS屬性border

4.1 屬性Border

Border用于設(shè)置盒子模塊邊框，設(shè)置邊框?qū)傩缘姆椒?綜合設(shè)置方法：border：邊框?qū)挾?邊框樣式 邊框顏色，： 單邊綜合設(shè)置方法：border-top、border -left、border -right、border -bottom。綜合設(shè)置方法是經(jīng)常被引用的方法，此方法可以同時(shí)設(shè)置邊框的三種樣式。如果單獨(dú)設(shè)置邊框顏色，要求先設(shè)置邊框樣式，因?yàn)橹挥羞吙虼嬖冢伾珮邮讲拍茱@現(xiàn)。如果遺漏邊框樣式直接設(shè)置顏色，則顏色是不顯示的。

4.2 Border測(cè)試功能

實(shí)際制作網(wǎng)頁(yè)過(guò)程中，當(dāng)網(wǎng)頁(yè)布局出現(xiàn)問(wèn)題且找不到問(wèn)題所在時(shí)，可以通過(guò)border屬性解決，此時(shí)border起到測(cè)試功能，通過(guò)設(shè)置border可以讓模塊內(nèi)容所占有的區(qū)域顯示，從而可以看到被隱藏起來(lái)的細(xì)小狀況，進(jìn)而推測(cè)出現(xiàn)問(wèn)題的地方。

5 精靈技術(shù)與滑動(dòng)門(mén)技術(shù)

精靈技術(shù)與滑動(dòng)門(mén)技術(shù)是針對(duì)導(dǎo)航條美化的技巧。其中精靈技術(shù)是為了解決網(wǎng)頁(yè)過(guò)多使用小圖片，導(dǎo)致網(wǎng)頁(yè)打開(kāi)速度受到影響，為了解決服務(wù)器過(guò)多的次數(shù)訪問(wèn)小圖片，將多個(gè)小圖片拼成一個(gè)大圖，通過(guò)background-position定位到大圖的確切位置來(lái)顯示需要的小圖片。滑動(dòng)門(mén)技術(shù)是為了解決導(dǎo)航中文本字?jǐn)?shù)不均及增加或減少字?jǐn)?shù)帶來(lái)的大量代碼的修改，通過(guò)將導(dǎo)航背景圖切割為多個(gè)小圖，每個(gè)小圖單獨(dú)用HTML標(biāo)記來(lái)定義，對(duì)中間切塊不設(shè)置寬度，寬度會(huì)隨著文本的數(shù)量自動(dòng)增減，從而實(shí)現(xiàn)導(dǎo)航文本增減與背景寬度同步增減。

6 CSS功能界面

CSS代碼對(duì)初學(xué)者來(lái)說(shuō)有些難度，學(xué)生對(duì)過(guò)多代碼的講解及編輯都會(huì)產(chǎn)生反感情緒，所以初次接觸CSS代碼或編寫(xiě)CSS代碼，使用CSS界面更合適。圖形模式下編寫(xiě)代碼對(duì)初學(xué)者來(lái)說(shuō)，只需要一些基本的操作便可以取得很好的效果，所以更容易接受，更容易理解。

7 結(jié)語(yǔ)

網(wǎng)頁(yè)（網(wǎng)站）制作課程的學(xué)習(xí)及講授，需要實(shí)際與理論相結(jié)合，教材上提供的理論是概括性的概念，沒(méi)有涉及它的一些擴(kuò)展功能，這就需要我們自己在實(shí)際應(yīng)用時(shí)多摸索、多試驗(yàn)、多借鑒。以上常用的技巧與方法，會(huì)對(duì)初學(xué)者及學(xué)生在學(xué)習(xí)DIV+CSS過(guò)程中起到一定的幫助作用，對(duì)理論的片面含義及概念起到擴(kuò)充作用。設(shè)計(jì)及制作網(wǎng)頁(yè)中都離不開(kāi)CSS的使用，尤其是對(duì)網(wǎng)頁(yè)的優(yōu)化、美化，CSS的功能是顯而易見(jiàn)，通過(guò)學(xué)習(xí)這些常用技巧，在將來(lái)的學(xué)習(xí)過(guò)程中會(huì)對(duì)大家起到幫助與專(zhuān)業(yè)指導(dǎo)的效果。

參考文獻(xiàn)：

[1]傳智播客高教產(chǎn)品研發(fā)部.網(wǎng)頁(yè)設(shè)計(jì)與制作（HTML+CSS）[M].中國(guó)鐵道出版社，2014（8）.

[2]張麗霞，朱賢坤.Dreamweaver在網(wǎng)頁(yè)開(kāi)發(fā)中的應(yīng)用技巧[J].信息系統(tǒng)工程，2018（8）：97-98.

[3]馮小強(qiáng). 基于CSS技術(shù)的網(wǎng)頁(yè)布局探究[J].電腦知識(shí)與技術(shù).2018，14（28）：244-245.

[4]趙春燕.電子商務(wù)網(wǎng)站設(shè)計(jì)與制作[M].北京大學(xué)出版社，2011（4）.

[5]李建忠，牟風(fēng)瑞，安剛.電子商務(wù)網(wǎng)站建設(shè)與維護(hù)[M].清華大學(xué)出版社，2013（10）.

[6]傳智播客高教產(chǎn)品研發(fā)部.HTML+CSS+JavaScript 網(wǎng)頁(yè)制作案例教程[M].中國(guó)工信出版集團(tuán)，人民郵電出版社，2015（9）.

[7]陸郁.探析CSS技術(shù)在網(wǎng)頁(yè)制作中的應(yīng)用與代碼優(yōu)化[J].電子信息，2019（1）：110.

【通聯(lián)編輯：王力】