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>
  • 相关阅读:
    最优贸易 NOIP 2009 提高组 第三题
    Think twice, code once.
    luogu P1378 油滴扩展
    codevs 1002 搭桥
    codevs 1014 装箱问题 2001年NOIP全国联赛普及组
    洛谷P2782 友好城市
    洛谷P1113 杂务
    [HDU1848]Fibonacci again and again
    [POJ2420]A Star not a Tree?
    [SCOI2010]生成字符串
  • 原文地址:https://www.cnblogs.com/wong-do/p/9079264.html
Copyright © 2011-2022 走看看