实现项目：用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的更多相关文章

  1. 实现简易版德州扑克|学习麻瓜编程以项目为导向入门前端 HTML+CSS+JS

    实现简易版德州扑克 1.先上达到网页效果图(简易版德州扑克) 网页分为发牌区和牌池,上面为发牌区,下面是牌池区 2. 代码实现 2.1 HTML和JS代码 ` <link rel="s ...

  2. 项目中如果管理前端文件CSS和JS

    如何管理CSS和JS文件,一直是前端一个热门的话题.下面将简单分享一下使用心得,欢迎大家吐槽.拍砖和提供更好的实现方式. 一.管理CSS文件,本博客将讨论less管理. iReset.less.iBu ...

  3. 【译】快速高效学习Java编程在线资源Top 20

    想要加强你的编程能力吗?想要提升你的 Java 编程技巧和效率吗? 不用担心.本文将会提供快速高效学习 Java 编程的 50 多个网站资源: 开始探索吧: 1.MKyong:许多开发者在这里可以找到 ...

  4. 快速高效学习Java编程在线资源Top 20(转载)

    想要加强你的编程能力吗?想要提升你的 Java 编程技巧和效率吗? 不用担心.本文将会提供快速高效学习 Java 编程的 50 多个网站资源: 开始探索吧: 1.MKyong:许多开发者在这里可以找到 ...

  5. Linux运维人员如何学习python编程

    Linux运维人员如何学习python编程 从不会写代码,到自己独立能写代码解决问题 .这个问题很重要!盲目学习所谓的项目,最后 还是不会自己写代码解决问题.首先解决了独立能写代码解决问题,再通过项目 ...

  6. 学习网页制作中如何在正确选取和使用 CSS 单位

    在 CSS 测量系统中,有好几种单位,如像素.百分比.英寸.厘米等等,Web 开发人员很难了解哪些单位在何处使用,如何使用.很多人习惯了总是使用同一种单位,但这一决定可能会严重限制你的设计的执行. 这 ...

  7. 学习kernel编程的建议

    我把我学习kernel编程的过程介绍给大家,希望大家有个参考. 学习kernel编程需要阅读大量的kernel方面的书籍,在此我列举一下我读过的kernel书籍(按时间先后顺序),并给一些建议. 1. ...

  8. 新手学习.net编程计划-1

    .NET是一个庞大的学习体系,对于新手来说会感觉无从下手.学习知识必须从入门的基础学起,才能更好地掌握.学习.net也是如此,最基础的莫过于了解.net平台,以及掌握.net的基础语法C#. 本计划是 ...

  9. 有一定基础的 C++ 学习者该怎样学习 Windows 编程？

    人的心理有个奇异的特性:一项知识一旦学会之后,学习过程中面临的困惑和不解非常快就会忘得干干净净,似乎一切都是自然而然,本来就该这种.因此,关于「怎样入门」这类问题,找顶尖高手来回答,未必能比一个刚入门 ...

随机推荐

  1. oranges 笔记第六章

    OS 第六次实验随笔 第六章6.1-6.3相关的问题 进程状态保存与恢复 哪些状态 何时保存 保存在哪 如何恢复 特权级变换 用户进程到内核 内核回到用户进程 再次理解TSS .堆栈 从外环进入内环( ...

  2. [日常摸鱼]Uva11178Morley's Theorem-几何

    题意:给一个$\Delta ABC$,分别做三个角的三等分线相交成$\Delta DEF$,求出$D,E,F$的坐标. 直接根据题意模拟 #include<cstdio> #include ...

  3. Numpy的学习6-深浅赋值（copy&deep copy）

    # = 的赋值方式会带有关联性 import numpy as np a = np.arange(4) # array([0, 1, 2, 3]) b = a c = a d = b # 改变a的第一 ...

  4. python脚本乱码的解决方法

    使用python2 在windows cmd 执行python脚本发生乱码的解决方法 可以先把中文解码为unicode,然后再转化为gbk显示正常,需要在代码打印中文处添加 print(':这是一段中 ...

  5. 关于python面试中的设计模式，搞懂这些就足够了

    1.什么是设计模式? 设计模式是经过总结.优化,对我们经常遇到的一些编程问题的可重用的解决方案.设计模式不同于类或库可直接作用于代码.相反,它更为的高级,是一种必须在特定的情形下实现的方法模版. 2. ...

  6. 无法启动IIS Express Web服务器

    解决 打开项目文文件夹以.csproj结尾的文件),找到WebProjectProperties节点然后,将图中框选的三项节点内容全部清空 删除.vs 重新启动即可

  7. Oracle数据库常见sql

    -新建表:create table table_name( id varchar2(300) primary key, name varchar2(200) not null); --插入数据 ins ...

  8. springboot文件上传问题记录

    最近做项目需要开发一个通过excel表格导入数据的功能,上传接口写好调试的时候遇到几个问题,记录一下. 报错1: 15:50:57.586 [[1;33mhttp-nio-8763-exec-8 [0 ...

  9. JavaDailyReports10_15

    2020-10-15 16:12:16 今天学习了如何实现倒计时控制程序的运行: 1 package timer; 2 3 import java.util.Calendar; 4 import ja ...

  10. Kafka 消费组消费者分配策略

    body { margin: 0 auto; font: 13px / 1 Helvetica, Arial, sans-serif; color: rgba(68, 68, 68, 1); padd ...