front-end-css-knowledge-points
/
5.8精灵图案例.html


    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <br>
        <hr>
        <span class="p">1</span>
        <span class="i">2</span>
        <span class="n">3</span>
        <span class="k">4</span>
    </body>
    <style>
        .box1 {
            width: 60px;
            height: 60px;
            background-color: pink;
            margin: 100px auto;
            /* 精灵图对齐 */
            background: url(./4.5学成在线案例根目录/images/pic_sprites.png) -182px 0 no-repeat;
            /* 也可以单独调整位置 */
            /* background-position: -182px 0; */
        }

        .box2 {
            width: 27px;
            height: 25px;
            background-color: pink;
            margin: 200px;
            background: url(./4.5学成在线案例根目录/images/pic_sprites.png) no-repeat -155px -106px;
        }
        span {
            display: inline-block;

        }
        .p {
            width: 100px;
            height: 112px;
            background: url(./4.5学成在线案例根目录/images/26字母精灵图.jpg) no-repeat -493px -276px;
        }
        .i {
            width: 60px;
            height: 108px;
            background: url(./4.5学成在线案例根目录/images/26字母精灵图.jpg) no-repeat -327px -142px;
        }
    </style>

    </html>