更新時(shí)間:2019-11-28 來(lái)源:黑馬程序員 瀏覽量:
在制作網(wǎng)頁(yè)導(dǎo)航時(shí),經(jīng)常會(huì)碰到導(dǎo)航欄長(zhǎng)度不同,但背景相同的情形。此時(shí)如果通過(guò)拉伸背景圖的方式來(lái)適應(yīng)文本內(nèi)容,就會(huì)造成背景圖變形。在制作網(wǎng)頁(yè)時(shí),為了使各種特殊形狀的背景能夠自適應(yīng)元素中的文本內(nèi)容,并且不會(huì)變形,CSS提供了滑動(dòng)門(mén)技術(shù)。下面我們?cè)敿?xì)介紹CSS滑動(dòng)門(mén)的使用技巧。
CSS滑動(dòng)門(mén)是什么?
滑動(dòng)門(mén)是CSS引入的一項(xiàng)用來(lái)創(chuàng)造漂亮實(shí)用界面的新技術(shù)。之所以命名為“滑動(dòng)門(mén)”,是因?yàn)樗墓ぷ髟砗蜕钪械幕瑒?dòng)推拉門(mén)類似,通過(guò)向兩側(cè)滑動(dòng)門(mén)板,來(lái)擴(kuò)大中間的空間。
滑動(dòng)門(mén)技術(shù)非常簡(jiǎn)單,其技術(shù)操作的關(guān)鍵在于圖片拼接。通?;瑒?dòng)門(mén)技術(shù)需要將一個(gè)不規(guī)則的大圖切為幾個(gè)小圖(通常為三個(gè)),然后將每一個(gè)小圖用一個(gè)單獨(dú)的HTML標(biāo)記來(lái)定義,最后將這幾個(gè)小圖拼接在一起,組成一個(gè)完整的背景。
在使用滑動(dòng)門(mén)技術(shù)時(shí),分別在第一個(gè)標(biāo)記中放入左側(cè)圓角圖,在第二個(gè)標(biāo)記中平鋪第二張圖片,在第三個(gè)標(biāo)記中放入右側(cè)圓角圖。
在網(wǎng)頁(yè)設(shè)計(jì)時(shí),滑動(dòng)門(mén)技術(shù)非常有用,其好處體現(xiàn)在以下幾個(gè)方面。
(1)實(shí)用性:滑動(dòng)門(mén)能夠根據(jù)導(dǎo)航文本長(zhǎng)度自動(dòng)調(diào)節(jié)寬度。
(2)簡(jiǎn)潔性:滑動(dòng)門(mén)可以用分割背景圖來(lái)實(shí)現(xiàn)炫彩的導(dǎo)航條風(fēng)格,提升了圖片下載速度
(3)適用性:滑動(dòng)門(mén)技術(shù)既可以用于設(shè)計(jì)導(dǎo)航條,也可以應(yīng)用到其他大背景圖片的網(wǎng)頁(yè)模塊中。
使用滑動(dòng)門(mén)制作導(dǎo)航條
滑動(dòng)門(mén)技術(shù)的使用非常簡(jiǎn)單,主要分為準(zhǔn)備圖片和拼接圖片兩個(gè)步驟,具體介紹如下。
1. 準(zhǔn)備圖片
滑動(dòng)門(mén)技術(shù)的關(guān)鍵在于圖片拼接,它將一個(gè)不規(guī)則的大圖切為幾個(gè)小圖,每一個(gè)小圖都需要一個(gè)單獨(dú)的HTML標(biāo)記來(lái)定義。需要注意的是,在切圖的時(shí)候,設(shè)計(jì)師一定要明白哪些是不可平鋪的背景圖,哪些是可以平鋪的背景圖,對(duì)于不可平鋪的背景圖需要單獨(dú)切出,可以平鋪的背景圖,只需切出最小的像素,然后設(shè)置平鋪即可。
2. 拼接圖片
完成切圖工作之后,完成切圖工作之后,就需要用HTML標(biāo)記來(lái)拼接這些圖像。定義三個(gè)盒子,將三張小圖分別作為盒子的背景。其中左右兩個(gè)盒子的大小固定,用于定義左側(cè)、右側(cè)的不規(guī)。則形狀的背景,中間的盒子只指定高度,靠文本內(nèi)容撐開(kāi)盒子,同時(shí)將中間的小圖平鋪?zhàn)鳛楹凶拥谋尘啊?/p>
滑動(dòng)門(mén)技術(shù)的關(guān)鍵在于不要給中間的盒子指定寬度,其寬度由內(nèi)部的內(nèi)容撐開(kāi)。
下面我們通過(guò)實(shí)例來(lái)演示:
上面案例中,第8-24行代碼用于定義無(wú)序列表,在無(wú)序列表中每對(duì)<1i></li>標(biāo)記中都包含兩對(duì)<span></span>標(biāo)記和一對(duì)<a></a>標(biāo)記,其中第一對(duì)<span></span>標(biāo)記用于定義左側(cè)的小圓角背景圖像,第二對(duì)<span></span>標(biāo)記用于定義右側(cè)的尖角背景圖像,<a></a>標(biāo)記用于定義中間的漸變背景。
接下來(lái)我們通過(guò)CSS來(lái)為頁(yè)面添加樣式。
最終效果
推薦了解:黑馬程序員web前端培訓(xùn)課程。