首页 > 其他 > 详细

grid网格制作骰子

时间:2021-01-23 10:18:25      阅读:30      评论:0      收藏:0      [点我收藏+]

运用grid-template-areas:"";定位格子 制作

  

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- <meta http-equiv="refresh" content="3"> -->
    <style type="text/css">
        * {padding: 0;margin: 0;box-sizing: border-box;}
        body {background-color: #777;}
        .box {width: 150px;height: 900px;background-color: white;margin: 10px auto;}
        .box div {width: 150px;height: 150px;border: 1px solid #c00;display: grid;grid-template-columns: repeat(3,1fr);grid-template-rows: repeat(3,1fr);align-items: center;justify-items:center;grid-template-areas: 
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9"
        }
        i {display: block;width: 30px;height: 30px;border-radius: 50%;background-color: #000;}
        .box div:nth-child(1) i {grid-area: a5;}
        .box div:nth-child(2) i {grid-area: a1;}
        .box div:nth-child(2) i:last-child {grid-area: a9;}
        .box div:nth-child(3) i:nth-child(1) {grid-area: a1;}
        .box div:nth-child(3) i:nth-child(2) {grid-area: a5;}
        .box div:nth-child(3) i:nth-child(3) {grid-area: a9;}
        .box div:nth-child(4) i:nth-child(1) {grid-area: a1;}
        .box div:nth-child(4) i:nth-child(2) {grid-area: a3;}
        .box div:nth-child(4) i:nth-child(3) {grid-area: a7;}
        .box div:nth-child(4) i:nth-child(4) {grid-area: a9;}
        .box div:nth-child(5) i:nth-child(1) {grid-area: a1;}
        .box div:nth-child(5) i:nth-child(2) {grid-area: a3;}
        .box div:nth-child(5) i:nth-child(3) {grid-area: a5;}
        .box div:nth-child(5) i:nth-child(4) {grid-area: a7;}
        .box div:nth-child(5) i:nth-child(5) {grid-area: a9;}
        .box div:nth-child(6) i:nth-child(1) {grid-area: a1;}
        .box div:nth-child(6) i:nth-child(2) {grid-area: a3;}
        .box div:nth-child(6) i:nth-child(3) {grid-area: a4;}
        .box div:nth-child(6) i:nth-child(4) {grid-area: a6;}
        .box div:nth-child(6) i:nth-child(5) {grid-area: a7;}
        .box div:nth-child(6) i:nth-child(6) {grid-area: a9;}
    </style>
</head>
<body>
    <div class="box">
        <div>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</html>

 

grid网格制作骰子

原文:https://www.cnblogs.com/inkser/p/14315763.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!