用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 编程？
人的心理有个奇异的特性:一项知识一旦学会之后,学习过程中面临的困惑和不解非常快就会忘得干干净净,似乎一切都是自然而然,本来就该这种.因此,关于「怎样入门」这类问题,找顶尖高手来回答,未必能比一个刚入门 ...
随机推荐
- 事件修饰符 阻止冒泡 .stop 阻止默认事件 .prevent
stop修饰符 阻止冒泡行为 可以在函数中利用$event传参通过stopPropagation()阻止冒泡 通过直接在元素中的指令中添加 .stop prevent修饰符 阻止默认行为 可以在函数中 ...
- # spring boot + mybatis 读取数据库
spring boot + mybatis 读取数据库 创建数据库 use testdb; drop table if exists t_city; create table t_city( id i ...
- swig python dynamic module does not define init function
example_module = Extension('_example', sources=['example_wrap.c', 'example.c'], ) setup (name = 'exa ...
- react第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能)
第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解 ...
- Promise对象，究竟为何物？
Promise对象 一.什么是Promise? Promise是一种异步操作的解决方案,将写法复杂的传统的回调函数和监听事件的异步操作,用同步代码的形式表达出来. Promise避免了多级异步操作的回 ...
- JDK8新特性详解（一）
虽然JDK8已经出来了N久,其新特性也在日益改变着我们的编码习惯和风格.虽然有些新特性用起来很顺手,但是总是傻傻分不清到底是哪个版本的.趁今天有时间,我们就来总结一下,JDK8有哪些能提升我们开发效率 ...
- 神奇的 SQL 之 HAVING → 容易被轻视的主角
开心一刻 一天,楼主和隔壁小男孩一起坐电梯,中途进来一位高挑的美女,她牵着一条雪白的贵宾犬 小男孩看着这条雪白的贵宾犬,甚是喜欢,说道:阿姨,我能摸下这个狗狗吗? 美女:叫姐姐 小男孩低头看了下贵宾犬 ...
- Java 面向对象概述
本文部分摘自 On Java 8 面向对象编程 在提及面向对象时,不得不提到另一个概念:抽象.编程的最终目的是为了解决某个问题,问题的复杂度直接取决于抽象的类型和质量.早期的汇编语言通过对底层机器作轻 ...
- MySQL误删除用户怎么解决
前言:在不考虑到原来用户对关联数据库的授权问题的情况下,有以下两种思路解决 #1.安全模式修改 第一步:关闭数据库服务: [root@db01 ~]#/etc/init.d/mysqld stop 第 ...
- MES系统介绍
为什么要引入MES系统? 随着ERP在企业应用的深入,ERP系统逐渐显示出其局限性.当ERP下达的工单到生产现场后,产品制造是以产线 "工单"或"批次"(Bat ...