彭偉國(guó) 邢立國(guó)

摘要：運(yùn)用CSS滑動(dòng)門(mén)技術(shù)，可以實(shí)現(xiàn)圓角圖像寬高的自適應(yīng)伸縮，根據(jù)頁(yè)面元素內(nèi)容多少動(dòng)態(tài)自適應(yīng)背景圖像的寬高變化，提高了頁(yè)面背景圖像素材的重用率，為網(wǎng)頁(yè)設(shè)計(jì)者帶來(lái)了全新的技術(shù)設(shè)計(jì)體驗(yàn)。

關(guān)鍵詞：滑動(dòng)門(mén)；CSS；導(dǎo)航菜單；圓角矩形

中圖分類(lèi)號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2018）22-0204-02

網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用圓角圖像最多的頁(yè)面元素就是圓角導(dǎo)航菜單和圓角矩形框了。早期的圓角導(dǎo)航條設(shè)計(jì)采用較多的是表格布局技術(shù)。這種實(shí)現(xiàn)方法最大的弊端就是導(dǎo)航菜單寬度無(wú)法自適應(yīng)內(nèi)容的變化，且導(dǎo)航菜單中文本內(nèi)容的變化都會(huì)導(dǎo)致表格布局的變化，有些變化是意想不到的。為解決網(wǎng)頁(yè)設(shè)計(jì)中存在的這個(gè)問(wèn)題，目前最好用的技術(shù)就是CSS滑動(dòng)門(mén)技術(shù)。

1 CSS滑動(dòng)門(mén)原理

利用CSS滑動(dòng)門(mén)技術(shù)實(shí)現(xiàn)圓角導(dǎo)航菜單之前，首先需要準(zhǔn)備一個(gè)背景圖像，這個(gè)背景圖像通常創(chuàng)建得比預(yù)期的寬高值大很多，以便能容納大的內(nèi)容量。寬高設(shè)置多大的值主要取決于圓角導(dǎo)航菜單內(nèi)部放置最多內(nèi)容時(shí)的大小。

CSS滑動(dòng)門(mén)原理是指兩個(gè)嵌套的HTML標(biāo)簽各使用一個(gè)背景圖像，背景圖像除兩端之外互相重疊在一起，中間重疊區(qū)間的寬或高根據(jù)文字大小和內(nèi)容量自適應(yīng)變化；兩個(gè)圖像就像兩扇門(mén)一樣可以滑動(dòng)，當(dāng)嵌套的HTML標(biāo)簽內(nèi)文字小或內(nèi)容量少時(shí)，兩幅圖像就重疊少一些，如圖1所示；相反，兩幅圖像就重疊多一些，如圖2所示。這個(gè)重疊區(qū)域（稱(chēng)為doorway）由內(nèi)容區(qū)域和padding兩部分組成，padding屬性的設(shè)置通常用于顯示標(biāo)簽的獨(dú)特性，如圖1左側(cè)的圓角[1]。

2 CSS滑動(dòng)門(mén)關(guān)鍵技術(shù)

2.1 借用行內(nèi)元素

除了、、、、等少數(shù)HTML標(biāo)記是行內(nèi)元素外，絕大多數(shù)標(biāo)記都是塊級(jí)元素。CSS規(guī)定每一個(gè)網(wǎng)頁(yè)元素都有默認(rèn)的display屬性，塊級(jí)元素默認(rèn)為“block”，行內(nèi)元素默認(rèn)為 “inline”；塊級(jí)元素有寬高屬性，而行內(nèi)元素沒(méi)有。行內(nèi)元素是實(shí)現(xiàn)圓角導(dǎo)航菜單的關(guān)鍵所在。

其中用于從左側(cè)顯示該標(biāo)簽的背景圖像，從右側(cè)顯示其標(biāo)簽的背景圖像。

為什么要添加行內(nèi)元素呢？li和a模擬滑動(dòng)門(mén)技術(shù)會(huì)產(chǎn)生盲點(diǎn)區(qū)域，即padding屬性引起的內(nèi)外嵌標(biāo)簽背景圖像之間產(chǎn)生的一段空白。行內(nèi)元素包含在元素里面，沒(méi)有默認(rèn)的margin、padding屬性值，可避免產(chǎn)生不必要的盲點(diǎn)區(qū)域。

2.2 圓角導(dǎo)航菜單CSS屬性

為了實(shí)現(xiàn)圓角導(dǎo)航菜單，需要引入CSS以下屬性：

1）display屬性：有block和inline兩種屬性值。因和都是行內(nèi)元素，默認(rèn)狀態(tài)下沒(méi)有寬、高、magin、padding屬性值，為了使導(dǎo)航菜單有一定的寬高值，需要強(qiáng)制轉(zhuǎn)換行內(nèi)元素的display的值為block。2）padding屬性：是CSS盒子模型中最重要的屬性了，用于設(shè)置盒子里面內(nèi)容與盒子邊框之間的距離。padding屬性有四種不同的賦值方式：如果給出1個(gè)屬性值，表示上下左右4個(gè)padding數(shù)值都相同；如果給出2個(gè)屬性值，前者表示上下padding的數(shù)值，后者表示左右padding的數(shù)值；如果給出3個(gè)屬性值，前者表示上padding的數(shù)值，中間表示左右padding的數(shù)值；如果給出4個(gè)屬性值，依次表示上、右、下、左padding的數(shù)值，即順時(shí)針順序[2]。

為了使圓角導(dǎo)航菜單的左右兩端的圓角顯示出來(lái)，padding屬性只能采用上述第四種賦值方法，顯示圓角左端背景，只能對(duì)padding左屬性賦值，其他為0，如padding：0 0 0 14px；用于顯示圓角導(dǎo)航菜單的右端背景，只能對(duì)padding右屬性賦值，其他為0，如padding：0 14px 0 0。

3）inline或float屬性：這兩個(gè)屬性都是為了讓圓角導(dǎo)航菜單排列在同一行上。前者使用比較普遍，優(yōu)勢(shì)是它的簡(jiǎn)易性，但對(duì)于滑動(dòng)門(mén)技術(shù)來(lái)講部分瀏覽器存在一些解釋上的問(wèn)題；后者通過(guò)浮動(dòng)的方法解決解決水平排列問(wèn)題，浮動(dòng)一個(gè)元素會(huì)有收縮，收縮最小至它所包含內(nèi)容的大小，但這種方法會(huì)對(duì)緊跟在其后的其他HTML頁(yè)面元素產(chǎn)生影響，常使用CSS中的clear功能來(lái)清除浮動(dòng)對(duì)象。

4）background屬性：這個(gè)屬性是為了給相互嵌套的兩個(gè)HTML標(biāo)記賦予背景圖像，書(shū)寫(xiě)格式是background：url（"left.gif"） no-repeat left，left（或right）表示背景圖像顯示的起始方向。

2.3 “當(dāng)前”標(biāo)簽更換圖像

對(duì)“當(dāng)前”狀態(tài)下的某個(gè)圓角背景進(jìn)行特殊設(shè)置，我們需要引入id="current"的CSS選擇符進(jìn)行設(shè)置，這里通過(guò)后代選擇符來(lái)分別設(shè)置相互嵌套的兩個(gè)HTML標(biāo)簽的“當(dāng)前”背景圖像，其CSS語(yǔ)法聲明格式是background-image：url（"*.gif"）。

2.4 鼠標(biāo)經(jīng)過(guò)CSS樣式設(shè)置

鼠標(biāo)經(jīng)過(guò)時(shí)的菜單效果實(shí)現(xiàn)方法主要是運(yùn)用了CSS中的a：hover來(lái)實(shí)現(xiàn)的。通常a：hover中的CSS樣式內(nèi)容和“當(dāng)前”狀態(tài)下的CSS樣式內(nèi)容要保持一致。

3 圓角導(dǎo)航菜單代碼實(shí)例分析

該文實(shí)例中除了當(dāng)前項(xiàng)（第1項(xiàng)）默認(rèn)的背景顏色是通過(guò)body選擇符的“background： white url（'background-header.png'） repeat-x”CSS語(yǔ)句來(lái)實(shí)現(xiàn)的。筆者對(duì)菜單的第1項(xiàng)做了前后修改，發(fā)現(xiàn)第一項(xiàng)文字背景色的寬度確實(shí)發(fā)生了自適應(yīng)改變，且鼠標(biāo)滑在第4項(xiàng)時(shí)，第4項(xiàng)文字背景色和文字顏色同時(shí)發(fā)生了改變。圖3是圓角導(dǎo)航菜單第1項(xiàng)文字內(nèi)容發(fā)生變化時(shí)的比較圖。

下面是實(shí)例中用到的CSS代碼及其作用，其中是實(shí)現(xiàn)滑動(dòng)門(mén)效果的關(guān)鍵：

1）#mainNavigation{color：white； font-weight：bold；} color屬性用于設(shè)置默認(rèn)導(dǎo)航菜單文字的顏色為白色，font-weight屬性用于對(duì)文字加粗顯示；

2）#mainNavigation li{float：left； padding：5px；}通過(guò)float屬性實(shí)現(xiàn)菜單水平排列，并設(shè)置各項(xiàng)菜單背景之間的間隔距離是5px；

3）#mainNavigation a{display：block； line-height：20px；text-decoration：none； padding：0 0 0 10px； color：white； float：left；} display屬性讓a元素有一定寬高屬性，這樣line-height和padding屬性的設(shè)置效果才能顯示出來(lái)，padding屬性值用于使左側(cè)圓角顯示出來(lái)，color屬性與float屬性與前述作用相同；

4）#mainNavigation a strong{display：block； padding：0 10px 0 0；} display作用與前述相同，padding用于使右側(cè)圓角顯示出來(lái)；

5）#mainNavigation .current a{color：white； background：transparent url（'current.png'） no-repeat； }用于設(shè)置當(dāng)前項(xiàng)a元素的字體顏色為白色，background屬性默認(rèn)從左側(cè)開(kāi)始顯示url中的背景圖像；

6）#mainNavigation .current a strong{color：white；background：transparent url（'current.png'） no-repeat right；} strong元素是實(shí)現(xiàn)滑動(dòng)門(mén)技術(shù)的關(guān)鍵，color屬性設(shè)置當(dāng)前項(xiàng)strong元素中文字的顏色，background屬性從右側(cè)開(kāi)始顯示url中的背景圖像；

7）#mainNavigation a：hover{color：white；background：transparenturl（' current -hover.png'） no-repeat；}設(shè)置鼠標(biāo)滑上去a元素中的文字顏色和背景圖像，默認(rèn)從左側(cè)開(kāi)始顯示背景圖像；

8）#mainNavigation a：hover strong{background：transparent url（' current -hover.png'） no-repeat right； color：#464F15；}用于設(shè)置鼠標(biāo)滑上去strong元素中的文字顏色和背景圖像，且從右側(cè)開(kāi)始顯示背景圖像。

4 滑動(dòng)門(mén)技術(shù)在圓角矩形中的應(yīng)用

我們?yōu)g覽網(wǎng)頁(yè)時(shí)經(jīng)常看到漂亮的圓角矩形背景圖像。圓角矩形在上下或左右方向要實(shí)現(xiàn)自適應(yīng)寬高變化，CSS滑動(dòng)門(mén)效果實(shí)現(xiàn)通常是一個(gè)圖像掩蓋住另一個(gè)圖片的一部分。通常我們并不希望上面一副圖像完全的遮蔽住下面一副（例如標(biāo)簽的圓角），為此，可以將上面一副圖像控制的盡可能得窄，但仍然要保證一定的寬度來(lái)顯現(xiàn)標(biāo)簽一側(cè)的獨(dú)特性[3]。因此，借助Photoshop或Firework等圖像處理軟件的切片工具將初始整個(gè)背景圖像分切成左右或上下方向一個(gè)側(cè)邊圖像和一個(gè)大圖像，如圖4所示。通常側(cè)邊圖像寬或高較小，且寬或高的值是固定的，留在左邊或上邊蓋住大圖像的硬邊緣。與此相對(duì)應(yīng)的是大圖像留在右邊或下邊，寬或高的值動(dòng)態(tài)自適應(yīng)改變，寬高值改變范圍應(yīng)該比可能用到的最大值要大，以方便適應(yīng)文字多少或大小的改變。

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

在網(wǎng)頁(yè)設(shè)計(jì)中，圓角導(dǎo)航菜單和圓角矩形經(jīng)常使用CSS滑動(dòng)門(mén)技術(shù)來(lái)自適應(yīng)導(dǎo)航菜單項(xiàng)和圓角矩形的寬高，提高了網(wǎng)頁(yè)圖像在頁(yè)面設(shè)計(jì)中的重用率；同時(shí)，對(duì)頁(yè)面設(shè)計(jì)背景圖像進(jìn)行瘦身，也能夠提高頁(yè)面素材的下載速度，這也是網(wǎng)頁(yè)設(shè)計(jì)者非常關(guān)注的重點(diǎn)。當(dāng)今，隨著多數(shù)瀏覽器版本的更新，都對(duì)CSS滑動(dòng)門(mén)技術(shù)有很好的支持。CSS滑動(dòng)門(mén)技術(shù)應(yīng)用普及，必將為網(wǎng)頁(yè)設(shè)計(jì)者帶來(lái)全新的設(shè)計(jì)體驗(yàn)。

參考文獻(xiàn)：

[1] 盛永華. 基于CSS滑動(dòng)門(mén)技術(shù)的網(wǎng)頁(yè)圖像陰影設(shè)計(jì)與實(shí)現(xiàn)[J]. 硅谷， 2012（19）： 42.

[2] 溫謙， 王觶程. 別具光芒_CSS網(wǎng)頁(yè)布局案例剖析[M]. 北京： 人民郵電出版社， 2010： 49.

[3] 陳其嶙. 利用“滑動(dòng)門(mén)”技術(shù)制作動(dòng)感導(dǎo)航條[J]. 現(xiàn)代計(jì)算機(jī)， 2012（3）： 17.

【通聯(lián)編輯：謝媛媛】