用CSS实现蒙德里安名画|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

实现项目：用CSS实现蒙德里安名画

1.首先，献上代码和效果图

1.1代码：

<head>
    <style>
        .centerframe{
            display: flex;
            height: 100vh;
            justify-content: center;
            align-items: center;
        }

        .red{
            background-color: crimson;

        }
        .blue{
            background-color: blue;
        }
        .yellow{
            background-color: yellow;
        }
        .white{
            background-color: white;
        }
        .box{
            width: 50px;
            height: 50px;
            border-width: 3px;
            border-style: solid;
        }
        .upper{
            display: flex;
        }
        .lower{
            display: flex;
        }
    </style>
</head>
<body>
    <div class="centerframe">
        <div class="art">
            <div class="upper">
                <div>
                    <div style="height: 65;" class="white box"></div>
                    <div style="height: 70;" class="white box"></div>
                </div>

                <div style="width: 150px;height: 141" class="red box"></div>
            </div>

            <div class="lower">
                <div class="blue box"></div>
                <div style="width: 110;" class="white box"></div>
                <div>
                    <div style="height: 17;width: 34;" class="white box"></div>
                    <div style="height: 27;width: 34;" class="yellow box"></div>
                </div>

            </div>
        </div>
    </div>

</body>

1.2效果图：

第一个为整体图：



第二个是网页排布大图：