Flex筛子布局 

<!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>
        /* 分别调整每个面中的布局 */
        .first-face{
            display: flex;
            justify-content:center;
            align-items:center;
        }

        .second-face{
            display: flex;
            justify-content:space-between;
        }
        /* 单独调整第二面中的第二个圆点 */
        .second-face .circle:nth-of-type(2){
            align-self: flex-end;
        }

        .third-face{
            display: flex;
            justify-content: space-between;
        }
        .third-face .circle:nth-of-type(2){
            align-self: center;
        }
        .third-face .circle:nth-of-type(3){
            align-self: flex-end;
        }

        .forth-face{
            display: flex;
            justify-content: space-between;
        }
        /* 调整第四面中的所有列 */
        .forth-face .line{
            display: flex;
            flex-direction: column;
            justify-content: space-between;    
        }

        .fifth-face{
            display: flex;
            justify-content: space-between;
        }
        .fifth-face .line{
            display: flex;
            flex-direction: column;
            justify-content: space-between;    
        }
        /* 调整第五面中的第二列 */
        .fifth-face .line:nth-of-type(2){
            justify-content: center;
        }

        .sixth-face{
            display: flex;
            justify-content: space-between;
        }
        .sixth-face .line{
            display: flex;
            flex-direction: column;
            justify-content: space-between;    
        }
        
        *{
            box-sizing: border-box;
        }

        html,body{
            height: 100%;
        }

        body{
            /* 调整六个骰子的整体布局 */
            display: flex;
            align-items: center;
            justify-content: center;
            align-content: center;
            vertical-align: center;
            flex-wrap: wrap;
        }
        
        [class$="face"]{
            /* 凡是带有“face”，即第几面的调整 */
            width: 104px;
            height: 104px;
            background-color: whitesmoke;
            margin: 16px;
            padding: 4px;
            object-fit: contain;
             /* 将白色正方形的圆角变为十五度 */
            border-radius: 15%;
        }
        
        .circle{
            /* 圆点的设计 */
            width: 24px;
            height: 24px;
            /* 将小正方形的圆角变为五十度，变为圆点 */
            border-radius: 50%;
            margin: 4px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="first-face">
        <div class="circle"></div>
    </div>

    <div class="second-face">
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

    <div class="third-face">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
    </div>

    <div class="forth-face">
        <div class="line">
            <!-- 定义一列来管理两个圆点 -->
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="line">
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>

    <div class="fifth-face">
        <div class="line">
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="line">
            <div class="circle"></div>
        </div>
        <div class="line">
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>

    <div class="sixth-face">
        <div class="line">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
        <div class="line">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
        
    
</body>
</html>
posted @ 2024-03-22 21:38  NaMialyzms  阅读(42)  评论(1)    收藏  举报