演示代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"/>
        <!-- 以下引用阿里云图标库在线链接 -->
        <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_2036439_0h96479wv2lb.css"/>
        <style type="text/css">
            .wyzx{
                width: 400px;height: 50px;
                background-color: aliceblue;
                margin: 100px auto;line-height: 50px;
            }
            .wyzx a{
                display: block;
                float: left;
                width: 100px;
                text-align: right;
                padding-right: 20px;
                background: url(wyzxbj1.png) no-repeat;
            }
            #a1{
                background-position: 0 0;
            }
            #a2{
                background-position: 0 -50px;
            }
            #a3{
                background-position: 0 -100px;
            }
            #a4{
                background-position: 0 -150px;
            }
        </style>
    </head>
    <body>
        <!-- 
        一张大图有很多小图片，用背景定位显示图片
         -->
        <!-- div.wyzx>a*4 -->
        <div class="wyzx">
            <a id="a1" href=""><span>首页</span></a>
            <a id="a2" href=""><span>搜索</span></a>
            <a id="a3" href=""><span>关于</span></a>
            <a id="a4" href=""><span>手机</span></a>
        </div>
    </body>
</html>
打开支付宝首页搜“559920739”领红包，领到大红包的小伙伴赶紧使用哦！ （如果你觉得本文不错，请扫描下面二维码随意打赏哦）
最后修改：2020 年 09 月 15 日
© 禁止转载
如果觉得我的文章对你有用，请随意赞赏