用HTML与CSS写蒙德里安的《红、黄、蓝构成》

1.话不多说，先上结果图：

(PS : 原图我是在网上找到，【上面结果图是写出来的】，看到很多种不同的，我也不知道哪一幅画才是他画的，就挑选了这个相对简单的！）

2.运用到的知识点：盒子模型

3.HTML代码 ：

<div class="box1">
        <div class="box2">
            <!-- 左边部分 -->
            <div class="box_left">
                <div class="box_tp"></div>
                <div class="box_mi"></div>
                <div class="box_bt"></div>
            </div>
            <!-- 右边部分 -->
            <div class="box_right">
                <div class="box_hd"></div>
                <div class="box_bd">
                    <div class="box_bd_left"></div>
                    <div class="box_bd_right">
                        <div class="bd_right_tp"></div>
                        <div class="bd_right_bt"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

4.CSS 代码：

* {
    /* 清除盒子间距 */
    padding: 0;
    margin: 0;
    /* 盒子大小为width 保证不会撑大盒子 */
    box-sizing: border-box;
}
body {
    background-color: #ccc;
}
.box1 {
    position: relative;
    width: 640px;
    height: 760px;
    margin: 10px auto;
    background-color: #fefefe;
}
.box2 {
    position: absolute;
    top: 16px;
    left: 20px;
    width: 600px;
    height: 728px;
    border: 20px solid #000;
}
.box_left {
    float: left;
    width: 140px;
    height: 688px;
    border-right: 20px solid #000;
}
.box_tp {
    width: 140px;
    height:156px;
    border-bottom: 32px solid #000;
}
.box_mi {
    width: 140px;
    height: 354px;
    border-bottom: 20px solid #000;
}
.box_bt {
    width: 120px;
    height: 178px;
    background-color: #0801b3;
}
.box_right {
    float: right;
    width: 420px;
    height: 688px;
}
.box_hd {
    width: 420px;
    height: 510px;
    border-bottom: 20px solid #000;
    background-color: #fe0003;
}
.box_bd {
    width: 420px;
    height: 178px;
}
.box_bd_left {
    float: left;
    width: 342px;
    height: 178px;
    border-right: 20px solid #000;
}
.box_bd_right {
    float: left;
    width: 78px;
    height: 178px;
}
.bd_right_tp {
    width: 78px;
    height: 90px;
    border-bottom: 20px solid #000;
}
.bd_right_bt {
    width: 78px;
    height: 88px;
    background-color: #fffe03;
}

5.这是用盒子模型写出来的，当然还有不同的写法。
网上还有其他更复杂的可以用来练习盒子模型和css的图，感兴趣的小伙伴可以去做做！