[CSS]三层嵌套的滑动门

标签：blog   http   width   2014   line   div   

原理：

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

结构:

<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;
}

背景图:

[CSS]三层嵌套的滑动门,布布扣,bubuko.com

[CSS]三层嵌套的滑动门

标签：blog   http   width   2014   line   div   

原文地址：http://www.cnblogs.com/zhangwenkan/p/3817748.html