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>

 

posted @ 2020-06-23 19:09  Fortuneteller  阅读(131)  评论(0)  编辑  收藏  举报