彭偉國 邢立國

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

關鍵詞：滑動門；CSS；導航菜單；圓角矩形

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2018）22-0204-02

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

1 CSS滑動門原理

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

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

2 CSS滑動門關鍵技術

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

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

其中用于從左側顯示該標簽的背景圖像，從右側顯示其標簽的背景圖像。

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

2.2 圓角導航菜單CSS屬性

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

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

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

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

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

2.3 “當前”標簽更換圖像

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

2.4 鼠標經(jīng)過CSS樣式設置

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

3 圓角導航菜單代碼實例分析

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

下面是實例中用到的CSS代碼及其作用，其中是實現(xiàn)滑動門效果的關鍵：

1）#mainNavigation{color：white； font-weight：bold；} color屬性用于設置默認導航菜單文字的顏色為白色，font-weight屬性用于對文字加粗顯示；

2）#mainNavigation li{float：left； padding：5px；}通過float屬性實現(xiàn)菜單水平排列，并設置各項菜單背景之間的間隔距離是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屬性的設置效果才能顯示出來，padding屬性值用于使左側圓角顯示出來，color屬性與float屬性與前述作用相同；

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

5）#mainNavigation .current a{color：white； background：transparent url（'current.png'） no-repeat； }用于設置當前項a元素的字體顏色為白色，background屬性默認從左側開始顯示url中的背景圖像；

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

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

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

4 滑動門技術在圓角矩形中的應用

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

5 結束語

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

參考文獻：

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

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

[3] 陳其嶙. 利用“滑動門”技術制作動感導航條[J]. 現(xiàn)代計算機， 2012（3）： 17.

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