【HTML+CSS】精灵图

需求：实现下图效果（精灵图）

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .huawei {
            display:inline-block;
            width: 20px;
            height: 18px;
            background: url(./loginv4.png) no-repeat -1px -31px;
        }
        .weixin {
            display:inline-block;
            width: 20px;
            height: 18px;
            background: url(./loginv4.png) no-repeat -30px -32px;
        }
        .weibo {
            display:inline-block;
            width: 20px;
            height: 18px;
            background: url(./loginv4.png) no-repeat -56px -33px;
        }
        .qq {
            display:inline-block;
            width: 20px;
            height: 18px;
            background: url(./loginv4.png) no-repeat -7px -53px;
        }
        .c5 {
            display:inline-block;
            width: 20px;
            height: 18px;
            background: url(./loginv4.png) no-repeat -31px -55px;
        }
        .c6 {
            display:inline-block;
            width: 20px;
            height: 18px;
            background: url(./loginv4.png) no-repeat -55px -55px;
        }
    </style>
</head>
<body>
    <a href="https://www.huawei.com/cn/" class="huawei"></a>
    <a href="http://weixin.qq.com/" class="weixin"></a>
    <a href="https://weibo.com/" class="weibo"></a>
    <a href="https://www.qq.com/cn/" class="qq"></a>
    <a href="#" class="c5"></a>
    <a href="#" class="c6"></a>
</body>
</html>

 

posted @ 2018-08-13 21:00  NeymarGoal  阅读(561)  评论(0)  编辑  收藏  举报