滑动门

作者: Yuann | 来源:发表于2017-06-21 19:43 被阅读0次
    ![bg.png](https://img.haomeiwen.com/i6085154/f2acbb7c8c33be27.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) ![weixin_bg1d20af.jpg](https://img.haomeiwen.com/i6085154/bd926d65f3a3f709.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    效果是下面的图片组成的,同样是li里面有a里面放左边背景图,a里面有个span,span放文字和右边的背景图 ,a和span要改成inline-Block,

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                .box{
                    height: 74px;
                    background-image: url(images1/weixin_bg1d20af.jpg);
                    padding-left: 300px;
                }
                li{
                    list-style: none;
                    float: left;
                    margin-right: 20px;
                    margin-top: 20px;
                }
                li a{
                    height: 33px;
                    display: inline-block;
                    background-image: url(images1/bg.png);
                    background-position:  0 -192px;
                    line-height: 33px;
                    padding-left: 17px;
                    color: white;
                    text-decoration: none;
                }
                li span{
                    height: 33px;
                    display: inline-block;
                    background-image: url(images1/bg.png);
                    background-position: right -192px;
                    padding-right: 17px;
                }
                li a:hover{
                    color: green;
                }
            </style>
        </head>
        <body>
            <div class="box">
                <ul>
                    <li><a href="#"><span>我是大美女</span></a></li>
                    <li><a href="#"><span>丽丽</span></a></li>
                    <li><a href="#"><span>蓝蓝的白云天,悠悠水边流</span></a></li>
                </ul>
            </div>
        </body>
    </html>
    
    

    相关文章

      网友评论

          本文标题:滑动门

          本文链接:https://www.haomeiwen.com/subject/atvtcxtx.html