用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 编程？
人的心理有个奇异的特性:一项知识一旦学会之后,学习过程中面临的困惑和不解非常快就会忘得干干净净,似乎一切都是自然而然,本来就该这种.因此,关于「怎样入门」这类问题,找顶尖高手来回答,未必能比一个刚入门 ...
随机推荐
- 磁盘inode节点被占满的解决方法
问题: Linux服务器,查看日志发现程序无法继续写文件,但是用df -h查看磁盘容量还有剩余. 排查思路:怀疑是机器的inode节点被占满,使用df -i查看磁盘inode节点使用情况,果然是ino ...
- 一文带你彻底了解大数据处理引擎Flink内存管理
摘要: Flink是jvm之上的大数据处理引擎. Flink是jvm之上的大数据处理引擎,jvm存在java对象存储密度低.full gc时消耗性能,gc存在stw的问题,同时omm时会影响稳定性.同 ...
- 在Centos下使用Siege对Django服务进行压力测试
Siege是linux下的一个web系统的压力测试工具,支持多链接,支持get和post请求,可以对web系统进行多并发下持续请求的压力测试.今天我们就使用Siege来对Django进行一次压力测试, ...
- 自学python，从小白到大神，需要多久?
2020年10月 TIOBE 排行榜超过了 Java, 历史上首次 Python 超越了 Java ,再次让许多朋友对 Python 产生了兴趣,今天我们来梳理下学习 Python 几个阶段或者级别, ...
- RocketMQ(七)：高性能探秘之线程池
上一篇文章讲了如何设计和实现高并发高性能的应用,从根本上说明了一些道理.且以rocketmq的mappedFile的实现作为一个突破点,讲解了rocketmq是如何具体实现高性能的.从中我们也知道,m ...
- http协议中的缓存机制
强缓存 - expires,服务器给客户端一个过期日期,如(2020-12-12),过了该时间,客户端请求服务器重新获取.存在问题:客户端与服务端存在时间差,会导致过期时间不准确 - Cache-co ...
- HTTP 常用状态码200 301 302 403 500
200(OK):成功处理了请求. 301 redirect: 301 代表永久性转移(Permanently Moved) //助记 1 永恒,如果你记住了这一条就算这篇博客没白写.302 redir ...
- Buffer的重要属性 position/limit/capacity
1 package nio; 2 3 import java.nio.IntBuffer; 4 5 /** 6 * Buffer的重要属性 position/limit/capacity 7 * po ...
- 解析SwiftUI布局细节（二）循环轮播+复杂布局
前言 上一篇我们总结的主要是VStack里面的东西,由他延伸到 @ViewBuilder, 接着我们上一篇总结的我们这篇内容主要说的是下面的几点,在这些东西说完后我准备解析一下苹果在SiwftUI文档 ...
- idea破解方式：永久激活
相信很多小伙伴都发现了,每年到年底的时候,idea注册码都大面积的失效,早上到办公室打开电脑发现注册码过期,还要花很长时间找新的: 这里介绍两种破解方式,都是有生之年不到期:与网上现有的方式基本一致. ...