首页 > 代码库 > [CSS]三层嵌套的滑动门

[CSS]三层嵌套的滑动门

原理:

最外层放水平平铺的背景,第二层放左边,第三层放右边,注意这个做法背景图不能透明

结构:

<div class="module-title">

    <span class="left">

        <span class="right"></span>

    </span>

</div>

样式:

.module-title {
    height:33px;
    background: url(../images/more-title.png) 0 -33px repeat-x;
    text-indent: 0;
}
.module-title .left{
    display:inline-block;
    height: 33px;
    line-height: 34px;
    padding-left:30px;
    background: url(../images/more-title.png) 0 0 no-repeat;
}
.module-title .right{
    display:inline-block;
    min-width:4em;
    height: 33px;
    padding-right:48px;
    line-height: 34px;
    background: url(../images/more-title.png) right -66px no-repeat;
    text-align:center;
}

背景图: