zoukankan html css js c++ java

【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>

查看全文

相关阅读:
JS和Jquery获取this
写SQL经验积累2
转载学习
 java开发3个月总结
 学习规划
 Spring Boot详解
 webSocketDemo
spring boot中 redis配置类（4.0）
c语言操作字符串
 聊聊面试常问的HashMap中红黑树

原文地址：https://www.cnblogs.com/neymargoal/p/9470892.html