用CSS实现蒙德里安名画|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
2024-08-26 17:51:39
实现项目：用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效果图：
第一个为整体图：
第二个是网页排布大图：
最新文章
- Git bash下中文乱码问题
- IOS Core Animation Advanced Techniques的学习笔记(五)
- mysql临时表的产生
- 总结整理 -- ruby系列
- Spring.Net的AOP的通知
- 大型网站演化（转载 http://homeway.me/2014/12/10/think-about-distributed-clusters/）
- JAVA·多线程：创建线程的两种方式
- zoj 2836 容斥原理
- 一个PHP开发者总结的九条建议
- db2 for linux
- 开辟html5和css3学习随笔（2015-3-2）
- 理解Load Average做好压力测试
- xamarin android 在代码中如何设置文本颜色
- HierarchyID 数据类型用法
- C语言实现循环队列
- pipreqs 组件
- tms web core 与 kbmmw 第一次亲密接触
- 使用netfilter_queue改包笔记
- .NET 的 WCF 和 WebService 有什么区别?(转载)
- 如何实现MySQL表数据随机读取?从mysql表中读取随机数据