九宫格练习 - - php.cn博客

9宫格
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>number</title>
</head>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-image: url("img/123456.jpg");
        }
        .big{
            width: 300px;
            height: 300px;
        }
        .squ1{
            background-position: -11px -8px;
        }
        .squ2{
            position: relative;
            top:-100px;
            left:100px;
            background-position: -121px -9px;
        }
        .squ3{
            background-color: #f6c090;
            position: relative;
            top:-200px;
            left:200px;
            background-position: -231px -9px;
        }
        .squ4{
            background-color: pink;
            position: relative;
            top:-200px;
            background-position: -340px -9px;
        }
        .squ5{
            background-color: blueviolet;
            position: relative;
            top:-300px;
            left:100px;
            background-position: -450px -9px;
        }
        .squ6{
            position: relative;
            top:-400px;
            left:200px;
            background-position: -560px -9px;
        }
        .squ7{
            position: relative;
            top:-400px;
            background-position: -670px -9px;
        }
        .squ8{
            position: relative;
            top:-500px;
            left:100px;
            background-position: -782px -9px;
        }
        .squ9{
            position: relative;
            top:-600px;
            left:200px;
            background-position: -892px -9px;
        }
    </style>
<body>
    <div class="big">
        <div class="squ1"></div>
        <div class="squ2"></div>
        <div class="squ3"></div>
        <div class="squ4"></div>
        <div class="squ5"></div>
        <div class="squ6"></div>
        <div class="squ7"></div>
        <div class="squ8"></div>
        <div class="squ9"></div>
    </div>
</body>
</html>