用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效果图：
第一个为整体图：
整体图，位于网页正中央
第二个是网页排布大图：
大图，实现CSS网页排布
1746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
