九宫格练习 - - php中文网博客

首页 > 博客列表 > 九宫格练习

博主信息

博文 5

粉丝 0

访问量 2486

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

九宫格练习

floraDeng?

原创

482人浏览过

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>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

简历制作CSS

2022-05-09 22:08:20