CSS滑动门

如下图所示,每个导航栏目的文字个数不一样多，有的长，有的短,如何用一张背景图片，适应不同字数”的导航条,“滑动门”设计的非常巧妙，采用两个相同的背景图像，一左一右，一个负责提供左边框，一个负责提供右边框。如下图所示，当需要容纳较多文字时，重叠就少一些，而需要较少文字时，重叠就多一些。两个图像可以滑动，重叠的部分的宽度会根据里面的文字的字数而自动调整，就像两扇推拉门一样，因此这种技术就叫做“滑动门”。(鼠标经过有凹凸感)

图片准备如下:

html结构:

<body>
    <div class="wrap">
        <div class="head">
            <ul>
                <li><a href="#"><span>首页</span></a></li>
                <li><a href="#"><span>帮助与反馈</span></a></li>
                <li><a href="#"><span>公众平台</span></a></li>
                <li><a href="#"><span>开放平台</span></a></li>
                <li><a href="#"><span>微信支付</span></a></li>
                <li><a href="#"><span>微信网页版</span></a></li>
                <li><a href="#"><span>表情开放平台</span></a></li>
                <li><a href="#"><span>微信广告</span></a></li>
            </ul>
        </div>
    </div>
</body>

css样式

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrap{
           background: url("wx2.jpg") repeat-x;(背景颜色图片)
        }
        .head{
            width: 1000px;/*甚至高度宽度,盒子居中,文字居中*/
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
        }
        .head li {
            list-style:none;/*浮动,调整距离*/
            float: left;
            margin: 0 10px;
        }
        .head li a {
            /* a 里面放置左圆角 设置左padding值 */
            text-decoration: none;
            color: #fff;
            display: inline-block;
            height: 33px;
            line-height: 33px;
            padding-left: 15px;
            background: url(ao.png) no-repeat;
        }
        .head li span{
            /* span 里面放置右圆角 设置右padding值 */
            display: inline-block;
            height: 33px;
            line-height: 33px;
            background: url(ao.png) no-repeat right;
            padding-right: 15px;
        }
        .head li a:hover, .head li a:hover span{
            /* 鼠标经过a 和鼠标经过a 里面的span 的背景图像变化 */
            background-image: url(to.png);
        }
    </style>