CSS精灵图

效果图

css

  <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .cssSprite {
            margin: 100px auto;
            /* background-color: hotpink; */
            width: 567px;
            height: 378px;
            border: 1px solid black;
        }
        
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        li {
            float: left;
            width: 189px;
            height: 189px;
            background-image: url("img/CSSsprite.jpg");
            background-repeat: no-repeat;
        }
        
        .img2 {
            background-position: -189px 0px;
        }
        
        .img3 {
            background-position: -378px 0px;
        }
        
        .img4 {
            background-position: 0px -189px;
        }
        
        .img5 {
            background-position: -189px -189px;
        }
        
        .img6 {
            background-position: -378px -189px;
        }
    </style>

html

<body>
    <div class="cssSprite">
        <ul>
            <li class="img1">
                <a href="#" target="_blank"></a>
            </li>
            <li class="img2">
                <a href="#" target="_blank"></a>
            </li>
            <li class="img3">
                <a href="#" target="_blank"></a>
            </li>
            <li class="img4">
                <a href="#" target="_blank"></a>
            </li>
            <li class="img5">
                <a href="#" target="_blank"></a>
            </li>
            <li class="img6">
                <a href="#" target="_blank"></a>
            </li>
        </ul>
    </div>

</body>

相关阅读:
问题 B: 投简历
问题 C: P4 游戏中的Human角色
绘制直方图
绘制条形图
绘制散点图
问题 A: E2 驾驭const
问题 B: 矩形类中运算符重载【C++】
extjs tips
extjs
struts1

原文地址：https://www.cnblogs.com/fortuneteller-li/p/13183910.html