所謂的滑動門技術(shù)，就是指盒子背景能夠自動拉伸以適應(yīng)不同長度的文本。即當(dāng)文字增多時，背景看起來也會變長。
大多數(shù)應(yīng)用于導(dǎo)航欄之中，如微信導(dǎo)航欄:
具體實現(xiàn)方法如下：
1、首先每一塊文本內(nèi)容是由a標(biāo)簽與span標(biāo)簽組成
| <a href="#"> <span></span> </a> |
2、a標(biāo)簽只指定高度，而不指定寬度。
3、a標(biāo)簽 設(shè)置好背景圖后，指定一個padding-left值，大小與左側(cè)半圓大小相同，（這樣保證左邊背景不變，中間的背景進行拉伸即可）。
4、span標(biāo)簽同樣指定該背景圖片，不指定寬度，并且指定padding-right值將圖片右半部分顯示出來（這是要是定圖片位置為右）
具體代碼如下：
| a { color: white; line-height: 33px; margin: 100px; display: inline-block; text-decoration: none; /* a不能給寬度 */ /* */ height: 33px; background: url(Images/vx.png) no-repeat; padding-left: 15px; } a span { display: inline-block; height: 33px; background: url(Images/vx.png) no-repeat right; padding-right: 15px; } |
span 的背景要指定為right
| <a href="#"> <span>一</span> </a> <a href="#"> <span>一句</span> </a> <a href="#"> <span>一句話</span> </a> <a href="#"> <span>一句長長的話</span> </a> <a href="#"> <span>一句超級超級超級超級超級超級長的話</span> </a> |
顯示結(jié)果為
可以發(fā)現(xiàn)隨著span標(biāo)簽中文本長度的變化將會帶動背景圖片的拉伸。
總結(jié)
以上所述是小編給大家介紹的CSS 實現(xiàn)滑動門的實例代碼 ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對錯新站長站網(wǎng)站的支持！
新聞熱點
疑難解答
