CSS 实现滑动门的实例代码

2024-01-17 11:20 小编
 1、首先每一块文本内容是由a标签与span标签组成
        <span></span>
        2、a标签只指定高度,而不指定宽度。
    3、a标签设置好背景图后,指定一个padding-left值,大小与左侧半圆大小相同,(这样保证左边背景不变,中间的背景进行拉伸即可)。
    4、span标签同样指定该背景图片,不指定宽度,并且指定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;
    }
    aspan{
    display:inline-block;
    height:33px;
    background:url(Images/vx.png)no-repeatright;
    padding-right:15px;
    }
    span的背景要指定为right
        <span>一</span>
        <span>一句</span>
        <span>一句话</span>
        <span>一句长长的话</span>
        <span>一句超级超级超级超级超级超级长的话</span>


Tag: 代码
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码