CSS 小結(jié)筆記之滑動門技術(shù)

lykops 發(fā)布于2019-04-23 13:22 / 1550人閱讀

摘要：所謂的滑動門技術(shù)，就是指盒子背景能夠自動拉伸以適應(yīng)不同長度的文本。大多數(shù)應(yīng)用于導(dǎo)航欄之中，如微信導(dǎo)航欄具體實現(xiàn)方法如下首先每一塊文本內(nèi)容是由標(biāo)簽與標(biāo)簽組成標(biāo)簽只指定高度，而不指定寬度。

所謂的滑動門技術(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è)半圓大小相同，（這樣保證左邊背景不變，中間的背景進(jìn)行拉伸即可）。

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>