用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实现蒙德里安名画|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS的更多相关文章
- 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS
实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 网页分为发牌区和牌池,上面为发牌区,下面是牌池区 2. 代码实现 2.1 HTML和JS代码 ` <link rel="s ...
- 项目中如果管理前端文件CSS和JS
如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...
- 【译】快速高效学习Java编程在线资源Top 20
想要加强你的编程能力吗?想要提升你的 Java 编程技巧和效率吗? 不用担心.本文将会提供快速高效学习 Java 编程的 50 多个网站资源: 开始探索吧: 1.MKyong:许多开发者在这里可以找到 ...
- 快速高效学习Java编程在线资源Top 20(转载)
想要加强你的编程能力吗?想要提升你的 Java 编程技巧和效率吗? 不用担心.本文将会提供快速高效学习 Java 编程的 50 多个网站资源: 开始探索吧: 1.MKyong:许多开发者在这里可以找到 ...
- Linux运维人员如何学习python编程
Linux运维人员如何学习python编程 从不会写代码,到自己独立能写代码解决问题 .这个问题很重要!盲目学习所谓的项目,最后 还是不会自己写代码解决问题.首先解决了独立能写代码解决问题,再通过项目 ...
- 学习网页制作中如何在正确选取和使用 CSS 单位
在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...
- 学习kernel编程的建议
我把我学习kernel编程的过程介绍给大家,希望大家有个参考. 学习kernel编程需要阅读大量的kernel方面的书籍,在此我列举一下我读过的kernel书籍(按时间先后顺序),并给一些建议. 1. ...
- 新手学习.net编程计划-1
.NET是一个庞大的学习体系,对于新手来说会感觉无从下手.学习知识必须从入门的基础学起,才能更好地掌握.学习.net也是如此,最基础的莫过于了解.net平台,以及掌握.net的基础语法C#. 本计划是 ...
- 有一定基础的 C++ 学习者该怎样学习 Windows 编程？
人的心理有个奇异的特性:一项知识一旦学会之后,学习过程中面临的困惑和不解非常快就会忘得干干净净,似乎一切都是自然而然,本来就该这种.因此,关于「怎样入门」这类问题,找顶尖高手来回答,未必能比一个刚入门 ...
随机推荐
- 面试 23-面试技巧 by smyhvae
23-面试技巧 by smyhvae #写简历的注意事项 最多可以写"深入了解",但不要写"精通". #遇到不知道的问题,该怎么回答 这块儿我没了解过,准备回去 ...
- Flink Checkpoint 参数详解
Flink Checkpoint 参数详解 什么是 checkpoint 保存状态 Checkpoint 参数详解 StreamExecutionEnvironment env = StreamExe ...
- python去除文件中重复的行
去除文件中重复的行 import os with open('db.txt','r',encoding='utf-8') as read_f,\ open('.db.txt.swap','w',enc ...
- 第一章: 初始JVM
跟很多人一样,我一开始接触 Java 虚拟机只是因为面试需要用到,所以硬着头皮看看.所以很多人对于为什么要学虚拟机这个问题,他们的答案都是:因为面试. 因为装逼 但我经过了几年的学习和实战,我发现其实 ...
- 转载：从输入 URL 到页面加载完的过程中都发生了什么事情？
原帖地址:http://www.guokr.com/question/554991/ 1)把URL分割成几个部分:协议.网络地址.资源路径.其中网络地址指示该连接网络上哪一台计算机,可以是域名或者IP ...
- CODING DevOps 线下沙龙回顾二：SDK 测试最佳实践
讲师:潘志刚 声网质量效能部门负责人,超过 14 年服务器.移动终端.音视频编解码以及汽车电子等跨行业从业经历,负责建立测试基础架构和自动化测试方案,主持搭建持续集成测试生态体系.现任声网质量效能部门 ...
- C# Attribute特性 泛型<T> 方法的out ref this(扩展方法) Equals与==
out ref out和ref的使用场景其实不一样.out适合在方法内返回一个额外的结果参数,而ref适合直接改变一个在方法外面的值,方法改变外部就改变,无需重新定义接住返回值再使用. out可以在方 ...
- Linq基础知识
开发人员不需要关心将要访问的是关系数据库还是XML数据,或是远程对象,它都采用同样的访问方式. Linq包含一系列的查询技术,其中Linq到对象是对内存进行操作,LINQ到SQL是对数据库的操作,LI ...
- NAT、端口映射、内网穿透、公网IP都是啥
原文地址:https://wuter.cn/1756.html/ 一.IPv4地址 IP协议是为计算机网络相互连接进行通信而设计的协议,它是能使连接到网上的所有计算机网络实现相互通信的一套规则. 这里 ...
- 使用jmeter进行压力测试与nginx连接数优化
案例训练目标 学会使用jmeter工具 学会配置nginx连接数优化 包含技能点 使用jmeter做压力测试 配置nginx的并发连接数 环境要求 PC支持VT,4G内存以上:vmware虚拟机安装有 ...