css 实现数字0-9

2024-02-21 23:23:22

参考阮一峰老师的css flex布局http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

效果：

css 实现数字0-9 

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>骰子</title>
</head>
<body>

    <div class="box zero">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <div class="box one">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="box two">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>


    <div class="box three">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>


    <div class="box four">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
    </div>



    <div class="box five">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <div class="box six">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>


    <div class="box seven">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
    </div>

    <div class="box eight">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
    </div>

    <div class="box nine">
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
        </div>
        <div class="line">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
        </div>

    </div>

</body>

<style>
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        vertical-align: center;
        flex-wrap: wrap;
        align-content: center;
    }

    .box {
        background-color: #bbbbbb;
        border: #d7d7d7 1px solid;
        border-radius: 10%;
        width: 100px;
        height: 100px;
    }

    .zero {
        display: flex;

        justify-content: space-between;
    }
    .zero .line {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .one {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;    /* 交叉轴对齐方式 */
    }

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

    .two {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .two .line:nth-of-type(1), .two .line:nth-of-type(3), .two .line:nth-of-type(5){
        display: flex;
        justify-content: space-between;
    }
    .two .line:nth-of-type(2) {
        align-self: flex-end;
    }

    .two .line:nth-of-type(4) {
        align-self: flex-start;
    }

    .three {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .three .line:nth-of-type(1){
        display: flex;
        justify-content: space-between;
    }
    .three .line:nth-of-type(2), .three .line:nth-of-type(4) {
        align-self: flex-end;
    }
    .three .line:nth-of-type(3), .three .line:nth-of-type(5) {
        display: flex;
        justify-content: space-between;
    }


    .four {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .four .line:nth-of-type(1){
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    .four .line:nth-of-type(2){
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .four .line:nth-of-type(3) {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .four .line:nth-of-type(4) {
        display: flex;
        align-self: center;
    }
    .four .line:nth-of-type(5), .four .line:nth-of-type(6) {
        display: flex;
        justify-content: center;
        align-items: center;
        align-content: center;
    }

    .five {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .five .line:nth-of-type(1),.five .line:nth-of-type(3),.five .line:nth-of-type(5) {
        display: flex;
        justify-content: space-between;
    }
    .five .line:nth-of-type(2) {
        display: flex;
        align-self: flex-start;
    }
    .five .line:nth-of-type(4) {
        display: flex;
        align-self: flex-end;
    }


    .six {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .six .line:nth-of-type(1),.six .line:nth-of-type(3),.six .line:nth-of-type(5){
        display: flex;
        justify-content: space-between;
    }
    .six .line:nth-of-type(2){
        display: flex;
        align-self: flex-start;
    }
    .six .line:nth-of-type(4){
        display: flex;
        justify-content: space-between;
    }


    .seven{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .seven .line:nth-of-type(1){
        display: flex;
        justify-content: space-between;
    }
    .seven .line:nth-of-type(2), .seven .line:nth-of-type(3),.seven .line:nth-of-type(4),.seven .line:nth-of-type(5){
        display: flex;
        justify-content: flex-end;
    }

    .eight{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .eight .line{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .nine {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .nine .line:nth-of-type(1),.line:nth-of-type(2),.nine .line:nth-of-type(3),.nine .line:nth-of-type(5){
        display: flex;
        justify-content: space-between;
    }
    .nine .line:nth-of-type(4){
        display: flex;
        justify-content: flex-end;
    }


</style>
</html>

 

上一篇：ul下特定li样式的修改


下一篇：css3 贝塞尔曲线理解