骰子一点摆放位置

谁抢我豆豆

于 2020-09-04 13:56:42 发布

阅读量769

点赞数

文章标签： css html flex

本文链接：https://blog.csdn.net/SLL_boy/article/details/108402847

版权

ps：本人初学者 小白
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 180px;
            height: 180px;
            background-color: #fff;
            border-radius: 25%;
            display: flex;

        }

        div span {
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
        }

        .main {
            width: 600px;
            height: 600px;
            justify-content: space-between;
            flex-wrap: wrap;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 50px;
        }

        .main .one {
            background-color: #ccc;
            /* justify-content: flex-start; */
        }

        .one .one_01 {
            align-self: flex-start;
            margin-left: 20px;
        }
        .one-center {
            background-color: #ccc;
            
        }
        .one-center .one_02 {
            align-self: center;
        }
        .main .one-bottom  {
            background-color: #ccc;
            
        }
        .one-bottom .one_03 {
            
            align-self: flex-end;
            margin-left: 20px;
        }
        .main .one-bom {
            background-color: #ccc;
            justify-content: center;
            align-items:  flex-end;
        }
        .one-right {
            background-color: #ccc;
            flex-direction: column;
            justify-content: center;
            align-items: flex-end;
        }
        .up {
            background-color: #ccc;
            justify-content: center;
        }
        .center {
            background-color: #ccc;
            justify-content: center;
            align-items: center;
        }

        .up_01 {
            background-color: #ccc;
            justify-content: flex-end;
            
        }
        .up_01 .one_08 {
            margin-right: 20px;
        }
        .bom01{
            background-color: #ccc;
            flex-direction: row-reverse;
            align-items: flex-end;
            
        }
        .bom01 .one_09 {
            margin-right: 20px;
        }
    </style>
</head>

<body>
    <!-- 骰子一点 开始 -->
    <div class="main">
        <div class="one">
            <span class="one_01"></span>
        </div>
        <div class="one-center">
            <span class="one_02"></span>
        </div>
        <div class="one-bottom">
            <span class="one_03"></span>
        </div>
        <div class="one-bom">
            <span class="one_04"></span>
        </div>
        <div class="center">
            <span class="one_07"></span>
        </div>
        <div class="bom01">
            <span class="one_09"></span>
        </div>
        <div class="one-right">
            <span class="one_05"></span>
        </div>
        <div class="up_01">
            <span class="one_08"></span>
        </div>
        
        <div class="up">
            <span class="one_06"></span>
        </div>
        
        
       
        
        
      
    </div>
    <!-- 骰子一点结束 -->
</body>

</html>

谁抢我豆豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
骰子一点摆放位置

ps：本人初学者小白<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div {
复制链接

扫一扫