傳智播客旗下品牌:|||||

全國咨詢/投訴熱線:400-618-4000

CSS滑動門是什么?有什么用處?[web前端培訓]

更新時間:2019年11月28日18時43分 來源:傳智播客

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

CSS滑動門是什么?

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

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

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

在網頁設計時,滑動門技術非常有用,其好處體現在以下幾個方面。

(1)實用性:滑動門能夠根據導航文本長度自動調節寬度。

(2)簡潔性:滑動門可以用分割背景圖來實現炫彩的導航條風格,提升了圖片下載速度

(3)適用性:滑動門技術既可以用于設計導航條,也可以應用到其他大背景圖片的網頁模塊中。

使用滑動門制作導航條

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

1.  準備圖片

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

2. 拼接圖片

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

1574937263241_css滑動門圖片.png


滑動門技術的關鍵在于不要給中間的盒子指定寬度,其寬度由內部的內容撐開。

下面我們通過實例來演示:(推薦了解傳智播客web前端課程

1574937462409_滑動門代碼.jpg

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

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

1574937552958_滑動門代碼2.jpg


最終效果

1574937606657_滑動門效果.png


英豪彩票开户 2019免费网赚挂机 中创网赚 巨力网赚论坛 网赚宝盒 2019挂机网赚游戏 北京赛车 网赚钱项目 六福彩票 2019互联网赚钱项目