zoukankan      html  css  js  c++  java
  • display:flex 布局之 骰子

    代码部分

    html

    <body>
        <div class="box">
            <div class="a a1">
                <span class="b"></span>
            </div>
            <div class="a a2">
                <span class="b"></span>
                <span class="b"></span>
            </div>
            <div class="a a3">
                <span class="b b1"></span>
                <span class="b"></span>
                <span class="b b2"></span>
            </div>
            <div class="a a4">
                <div class="c" style="margin-top:20px;">
                        <span class="b"></span>
                        <span class="b"></span>
                </div>
    
                <div class="c" >
                        <span class="b"></span>
                        <span class="b"></span>
                </div>
            </div>
            <div class="a a5">
                    <div class="c">
                            <span class="b"></span>
                            <span class="b"></span>
                    </div>
                    <div class="c" >
                            <span class="b"></span>
                    </div>
                    <div class="c" >
                            <span class="b"></span>
                            <span class="b"></span>
                    </div>
            </div>
            <div class="a a6">
                    <div class="c" style="margin:10px 0">
                            <span class="b"></span>
                            <span class="b"></span>
                            <span class="b"></span>
                    </div>
                    <div class="c" style="margin:25px 0">
                            <span class="b"></span>
                            <span class="b"></span>
                            <span class="b"></span>
                    </div>
            </div>
        </div>
    </body>

    style

    <style>
        .box{
            width:1300px;
            padding:100px 100px;
            display: flex;
            justify-content: space-between;
        }
        .a{
            width:150px;
            height: 150px;
            background: #999;
            border:1px solid #333;
            box-shadow:1px 1px 1px #333;
            border-radius: 10px;
            padding: 10px;
        }
        .a1{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .a2{
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .a3{
            display: flex;
            justify-content: space-around;
            align-items: center;
          
        }
        .b1{
            align-self: flex-start;
        }
        .b2{
            align-self: flex-end;
        }
        .a4{
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            align-items: inherit;
    
        }
        .b3{
            align-self: right;
        }
        .b4{
            align-self:center;
        }
        .b5{
            align-self:flex-end;
        }
        .b{
            width:40px;
            height: 40px;
            display:inline-block;
            border-radius: 50%;
            background: #000;
        }
        .c{
            width:100%;height:50px;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    </style>
  • 相关阅读:
    区间覆盖(线段树)
    差分约束
    二维数组
    P1195 口袋的天空
    dp的刷表法和填表法
    P1284 三角形牧场
    数据库课程设计
    具体解释VB中连接access数据库的几种方法
    android之PackageManager简单介绍
    Oracle fga审计有这几个特性
  • 原文地址:https://www.cnblogs.com/wong-do/p/9079264.html
Copyright © 2011-2022 走看看