实现项目：用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. Maven项目中配置jdk版本

    <build> <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> ...

  2. Spark Connector Reader 原理与实践

    本文主要讲述如何利用 Spark Connector 进行 Nebula Graph 数据的读取. Spark Connector 简介 Spark Connector 是一个 Spark 的数据连接 ...

  3. Spring Data JPA 整合Spring

    1.1   Spring Data JPA 与 JPA和hibernate之间的关系 JPA是一套规范,内部是有接口和抽象类组成的.hibernate是一套成熟的ORM框架,而且Hibernate实现 ...

  4. 数字crawlergo动态爬虫结合长亭XRAY被动扫描

    群里师傅分享了个挖洞的视频,搜了一下,大概就是基于这篇文章录的 https://xz.aliyun.com/t/7047 (小声哔哔一下,不得不说,阿里云先知社区和360酒仙桥六号部队公众号这两个地方 ...

  5. eclipse 创建自己的Maven项目(超详细)

    本文章 主要是 讲解 是讲解 eclipse创建项目 --SpiritMark_liu 先配置 Maven 的 settings 地址 (Window -> Perferences–>Ma ...

  6. Dubbo服务引用源码解析③

    ​ 上一章分析了服务暴露的源码,这一章继续分析服务引用的源码.在Dubbo中有两种引用方式:第一种是服务直连,第二种是基于注册中心进行引用.服务直连一般用在测试的场景下,线上更多的是基于注册中心的方式 ...

  7. 处理xls文件

    package com.cn.peitest.excel; import java.io.File; import java.io.FileInputStream; import java.io.Fi ...

  8. JAVA多线程下高并发的处理经验

    java中的线程:java中,每个线程都有一个调用栈存放在线程栈之中,一个java应用总是从main()函数开始运行,被称为主线程.一旦创建一个新的线程,就会产生一个线程栈.线程总体分为:用户线程和守 ...

  9. 阿里巴巴java开发手册-泰山版 下载

    最近,阿里的<Java开发手册>又更新了,这个版本历经一年的修炼,取名:<Java开发手册(泰山版)>正式出道.正所谓无规矩不成方圆,在程序员的世界里,也存在很多规范,阿里出版 ...

  10. springmvc 统一处理异常

    1.自定义统一异常处理器 自定义Exception实现 HandlerExceptionResolver接口或继承AbstractHandlerExceptionResolver类 1.实现接口Han ...