Web前端培訓(xùn)之CSS滑動門技術(shù)應(yīng)用

在制作網(wǎng)頁導(dǎo)航時，經(jīng)常會碰到導(dǎo)航欄長度不同，但背景相同的情形。此時如果通過拉伸背景圖的方式來適應(yīng)文本內(nèi)容，就會造成背景圖變形。在制作網(wǎng)頁時，為了使各種特殊形狀的背景能夠自適應(yīng)元素中的文本內(nèi)容，并且不會變形，CSS提供了滑動門技術(shù)。下面我們詳細介紹CSS滑動門的使用技巧。

CSS滑動門是什么？

滑動門是CSS引入的一項用來創(chuàng)造漂亮實用界面的新技術(shù)。之所以命名為“滑動門”，是因為它的工作原理和生活中的滑動推拉門類似，通過向兩側(cè)滑動門板，來擴大中間的空間。

滑動門技術(shù)非常簡單，其技術(shù)操作的關(guān)鍵在于圖片拼接。通?；瑒娱T技術(shù)需要將一個不規(guī)則的大圖切為幾個小圖(通常為三個)，然后將每一個小圖用一個單獨的HTML標記來定義，最后將這幾個小圖拼接在一起，組成一個完整的背景。

在使用滑動門技術(shù)時，分別在第一個標記中放入左側(cè)圓角圖，在第二個標記中平鋪第二張圖片，在第三個標記中放入右側(cè)圓角圖。

在網(wǎng)頁設(shè)計時，滑動門技術(shù)非常有用，其好處體現(xiàn)在以下幾個方面。

(1)實用性：滑動門能夠根據(jù)導(dǎo)航文本長度自動調(diào)節(jié)寬度。

(2)簡潔性：滑動門可以用分割背景圖來實現(xiàn)炫彩的導(dǎo)航條風(fēng)格，提升了圖片下載速度

(3)適用性：滑動門技術(shù)既可以用于設(shè)計導(dǎo)航條，也可以應(yīng)用到其他大背景圖片的網(wǎng)頁模塊中。

使用滑動門制作導(dǎo)航條

滑動門技術(shù)的使用非常簡單，主要分為準備圖片和拼接圖片兩個步驟，具體介紹如下。

1.  準備圖片

滑動門技術(shù)的關(guān)鍵在于圖片拼接，它將一個不規(guī)則的大圖切為幾個小圖，每一個小圖都需要一個單獨的HTML標記來定義。需要注意的是，在切圖的時候，設(shè)計師一定要明白哪些是不可平鋪的背景圖，哪些是可以平鋪的背景圖，對于不可平鋪的背景圖需要單獨切出，可以平鋪的背景圖，只需切出最小的像素，然后設(shè)置平鋪即可。

2. 拼接圖片

完成切圖工作之后，完成切圖工作之后，就需要用HTML標記來拼接這些圖像。定義三個盒子，將三張小圖分別作為盒子的背景。其中左右兩個盒子的大小固定，用于定義左側(cè)、右側(cè)的不規(guī)。則形狀的背景，中間的盒子只指定高度，靠文本內(nèi)容撐開盒子，同時將中間的小圖平鋪作為盒子的背景。

滑動門技術(shù)的關(guān)鍵在于不要給中間的盒子指定寬度，其寬度由內(nèi)部的內(nèi)容撐開。

下面我們通過實例來演示：

上面案例中，第8-24行代碼用于定義無序列表，在無序列表中每對<1i></li>標記中都包含兩對<span></span>標記和一對<a></a>標記，其中第一對<span></span>標記用于定義左側(cè)的小圓角背景圖像，第二對<span></span>標記用于定義右側(cè)的尖角背景圖像，<a></a>標記用于定義中間的漸變背景。

接下來我們通過CSS來為頁面添加樣式。

最終效果

推薦了解：黑馬程序員web前端培訓(xùn)課程。