CSS樣式表在網(wǎng)頁(yè)制作的優(yōu)點(diǎn)與特效實(shí)現(xiàn)

沙茉

【摘 要】互聯(lián)網(wǎng)時(shí)代，網(wǎng)頁(yè)已經(jīng)成為公司、個(gè)人展示自我的最好途徑和手段，網(wǎng)站、網(wǎng)頁(yè)制作是目前最常用的展示個(gè)人能力的手段和方法，文章通過(guò)介紹CSS（層疊式樣式表）網(wǎng)頁(yè)制作流程，并與傳統(tǒng)的frontpage網(wǎng)頁(yè)制作進(jìn)行對(duì)比，總結(jié)更好的網(wǎng)頁(yè)制作技巧。

【關(guān)鍵詞】CSS樣式表;網(wǎng)頁(yè)設(shè)計(jì);表格

【中圖分類(lèi)號(hào)】TP393.092 【文獻(xiàn)標(biāo)識(shí)碼】A 【文章編號(hào)】1674-0688（2019）04-0211-02

0 引言

樣式表CSS的英文名為Cascading Style Sheets，又翻譯為層疊式樣式表，在很多網(wǎng)頁(yè)制作的課程中都提及如何使用CSS樣式表實(shí)現(xiàn)網(wǎng)頁(yè)制作的特定效果的技巧，通過(guò)CSS的定義，可以定義整體網(wǎng)頁(yè)的顯示定位、字體的格式大小、元素定位、超級(jí)鏈接的樣式，還便于導(dǎo)航欄的制作，能實(shí)現(xiàn)圖片、文字環(huán)繞等一些特定的網(wǎng)頁(yè)展示效果，既能減少代碼量，又可以增強(qiáng)設(shè)計(jì)效果，而且頁(yè)面也更靈活多變。

1 CSS相較傳統(tǒng)Table制作的優(yōu)點(diǎn)

通常，CSS可以嵌入html頁(yè)面中，但是通常的做法是生成一個(gè).css的腳本文件，然后通過(guò)html調(diào)用該.css文件，如<link href="*.css" type="text/css" rel="stylesheet">。

CSS一般會(huì)配合DIV一起使用，在結(jié)構(gòu)上的優(yōu)勢(shì)主要體現(xiàn)在以下幾個(gè)方面。

（1）設(shè)計(jì)手段靈活，可將表現(xiàn)與設(shè)計(jì)分離，網(wǎng)站建設(shè)形式更為靈活。我們?cè)诮ㄔO(shè)網(wǎng)站的時(shí)候，可以將頁(yè)面進(jìn)行單獨(dú)的CSS設(shè)計(jì)，各功能也只需要進(jìn)行文字的顯示即可。

（2）布局更規(guī)范、代碼更清晰易懂，有利于網(wǎng)站管理員的維護(hù)與操作。當(dāng)網(wǎng)站的整體基調(diào)需要變換顏色時(shí)，可以直接在css文件里調(diào)整布局的顏色;同樣，當(dāng)某幾個(gè)欄目位置需要變動(dòng)時(shí)，也僅需要在頁(yè)面將對(duì)應(yīng)的div的位置重新定位;調(diào)整某些欄目時(shí)，只需修改若干樣式文件。這種區(qū)域化、“塊”理念的設(shè)計(jì)大大減輕了網(wǎng)站維護(hù)人員的工作量，為以后網(wǎng)頁(yè)的設(shè)計(jì)、改版打下了良好的基礎(chǔ)。

（3）具備更好的控制結(jié)構(gòu)排版能力。我們通過(guò)框架結(jié)構(gòu)定位需要顯示的元素的位置，可以有效修正原h(huán)tml表格中一些實(shí)現(xiàn)起來(lái)比較困難的地方，比如整體頁(yè)面的定位、表格內(nèi)容的顯示等，在傳統(tǒng)html中經(jīng)常會(huì)出現(xiàn)錯(cuò)位的情況，因此對(duì)行間距的設(shè)置、行數(shù)的設(shè)置都需要非常精確，否則設(shè)計(jì)的頁(yè)面表格就會(huì)出現(xiàn)錯(cuò)位偏差。

（4）更易于維護(hù)及改版工作。上述特點(diǎn)決定了使用樣式表格在維護(hù)和改版時(shí)，修改的工作量可以集中到某一點(diǎn)，避免重復(fù)的設(shè)計(jì)和布局，大大減輕代碼設(shè)計(jì)人員的工作量。

2 利用CSS制作特效

2.1 濾鏡效果

簡(jiǎn)單來(lái)說(shuō)，濾鏡就是類(lèi)似于我們Photoshop里面的圖文特效，CSS的濾鏡屬性的標(biāo)識(shí)符是Filter，我們通過(guò)對(duì)Filter各屬性的配置數(shù)值的不同[如brightness（）設(shè)置亮度，blur（）設(shè)置模糊度，contrast（）設(shè)置對(duì)比度，drop-shadow（）設(shè)置陰影效果]，將多個(gè)屬性值配合，就可以實(shí)現(xiàn)很多我們意想不到的效果。

在遇到特殊的紀(jì)念日時(shí)，如南京大屠殺紀(jì)念日或某些特別的日子，我們需要將網(wǎng)頁(yè)頁(yè)面設(shè)置成灰色，這時(shí)可以使用CSS，通過(guò)其中的Gray濾鏡就可以輕松實(shí)現(xiàn)這一效果（如圖1所示）;結(jié)合Javascript和濾鏡技術(shù)我們還可以制作許多動(dòng)態(tài)的效果，如自定義鼠標(biāo)移動(dòng)到特定區(qū)域位置或離開(kāi)時(shí)顯示不同效果圖或背景顏色。

2.2 文字特效

針對(duì)顯示信息的網(wǎng)站，其對(duì)文字經(jīng)常會(huì)有一些特效要求，如陰影、3D特效、霓虹燈、凸出浮雕效果等。而在在html中沒(méi)有太多可展示文字特色的手段，只有字體、大小、下劃線幾種表現(xiàn)手段，但是如果使用CSS樣式應(yīng)就不同了，其屬性text-shadow有兩個(gè)作用，產(chǎn)生陰影和模糊主體，不同的屬性取值可以表達(dá)出多種文字效果，即使不使用圖片，也可以給文字增加質(zhì)感。

2.3 動(dòng)態(tài)下拉菜單效果

在網(wǎng)站的首頁(yè)導(dǎo)航欄，經(jīng)常需要通過(guò)下拉菜單的方式實(shí)現(xiàn)二級(jí)頁(yè)鏈接打開(kāi)，具體表現(xiàn)為當(dāng)鼠標(biāo)放在導(dǎo)航菜單上時(shí)，出現(xiàn)下拉菜單選項(xiàng)，這時(shí)可點(diǎn)擊鏈接進(jìn)入二級(jí)頁(yè)，當(dāng)鼠標(biāo)移走時(shí)，下拉菜單消失（如圖2、圖3所示）。

一些網(wǎng)頁(yè)制作論壇上經(jīng)常有介紹一些特效的實(shí)現(xiàn)方法，但是通過(guò)CSS最容易實(shí)現(xiàn)一些特定的特效。CSS可以通過(guò)設(shè)置二級(jí)列表標(biāo)簽ul的display屬性實(shí)現(xiàn)特定特效，初始狀態(tài)的display屬性設(shè)為none代表初始不顯示，通過(guò)修改二級(jí)菜單對(duì)應(yīng)的一級(jí)菜單項(xiàng)的hover狀態(tài)的display屬性值，配合ul，li標(biāo)簽的屬性設(shè)置就可以很快地實(shí)現(xiàn)下拉菜單，比傳統(tǒng)的JavaScript及jQuery實(shí)現(xiàn)起來(lái)更快捷、簡(jiǎn)單。

多個(gè)屬性的結(jié)合使用在CSS設(shè)計(jì)時(shí)，效果特別顯著，一些網(wǎng)頁(yè)制作論壇還介紹了很多有趣的特效，我們可以根據(jù)實(shí)際的需求選擇應(yīng)用。

3 結(jié)語(yǔ)

總之，CSS+DIV的網(wǎng)頁(yè)設(shè)計(jì)和使用，在很大程度上解決了傳統(tǒng)html表格設(shè)計(jì)網(wǎng)站頁(yè)面的某些缺陷，諸如響應(yīng)速度較慢、頁(yè)面定位難、網(wǎng)頁(yè)布局遷移難、規(guī)范度較低、代碼靈活性差等;同時(shí)，CSS使用“塊”設(shè)計(jì)的理念和思路使網(wǎng)站結(jié)構(gòu)更具框架性、版面更清晰、網(wǎng)站功能更完善、頁(yè)面表現(xiàn)形式更富。區(qū)域化設(shè)計(jì)、代碼縮減、樣式文件定義等手段使網(wǎng)頁(yè)設(shè)計(jì)更規(guī)范，同時(shí)大大減輕了網(wǎng)站管理員的工作量，方便網(wǎng)站改版及維護(hù)、操作。

參 考 文 獻(xiàn)

[1]錢(qián)勇萍，王光杰.CSS+DIV布局方法在網(wǎng)頁(yè)制作中的應(yīng)用[J].現(xiàn)代制造技術(shù)與裝備，2014（3）.

[2]高娟，閻知知，黃龍.網(wǎng)頁(yè)制作中下拉菜單的制作方法解析[J].數(shù)碼世界，2017（10）.

[3]張英.DIV+CSS網(wǎng)站設(shè)計(jì)的研究和探討[J].電子技術(shù)與軟件工程，2013（24）.

[責(zé)任編輯：高海明]