day7 09 拼出自己名字 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>拼出自己的名字</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        span {
            display: inline-block;
            background: url( images/abcd.jpg ) no-repeat;
        }
        .m {
            width: 145px;
            height: 122px;
            background-position: -107px -270px;
            
        }
        .aa {
            width: 107px;
            height: 112px;
            background-position: 0px -7px ;       
             }
        .r {
            width: 117px;
            height: 107px;
            background-position: -135px -418px;
        }
        .y {
            width: 110px;
            height: 114px;
            background-position: -364px -555px;
        }
    </style>
</head>
<body>
    <span class="m"></span>
    <span class="aa"></span>
    <span class="r"></span>
    <span class="y"></span>

</body>
</html>

效果图如下：

 

 

posted @ 2020-01-31 15:06  竹石君  阅读(196)  评论(0)  编辑  收藏  举报