实现项目：用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. Jmeter之登录接口参数化实战

    为了纪念我走过的坑(为什么有些简单的问题就是绊住我了,还是不够细啊) Jmeter之接口登录参数化实战 因为想要在登录时使用不同的数据进行测试,所以我选择了将数据进行参数化.因为涉及到新建一个接口的功 ...

  2. windows jupyter lab中.ipynb转中文PDF

    在jupyter lab中,File-Export Notebook as-Export Notebook to PDF,可以导出成PDF格式的文档,但在操作前需要安装些程序.1. 安装pandocA ...

  3. .Net 常用ORM框架对比：EF Core、FreeSql、SqlSuger

    前言: 最近由于工作需要,需要选用一种ORM框架,也因此对EF Core.FreeSql.SqlSuger作简单对比.个人认为各有有优势,存在即合理,不然早就被淘汰了是吧,所以如何选择因人而议.因项目 ...

  4. K-NN(最近邻分类算法 python

    # algorithm:K-NN(最近邻分类算法)# author:Kermit.L# time: 2016-8-7 #======================================== ...

  5. Core3.0返回的Json数据大小写格式问题

    前言 测试发现,CoreWebAPI返回的Json数据,会将字段的首字母转换为小写, 经百度得,返回数据会默认驼峰命名,导致的. 随即百度, https://www.cnblogs.com/cdone ...

  6. VS中使用RDLC提示类型不一致

    问题描述 错误"基类包括字段"XXXXXXX",但其类型(Microsoft.Reporting.WebForms.ReportViewer)与控件(Microsoft. ...

  7. python初学者-判断今天是今年的第几天代码

    判断今天是今年的第几天源代码 import time date =time.localtime() year,month,day=date[:3] day_month=[31,28,31,30,31, ...

  8. Dubbo SPI源码解析①

    目录 0.Java SPI示例 1.Dubbo SPI示例 2.Dubbo SPI源码分析 ​ SPI英文全称为Service Provider Interface.它的作用就是将接口实现类的全限定名 ...

  9. 收下这款 Vue 项目模版，它将让你的开发效率在 2021 年提高 50%

    这是什么 vue-automation 是一款开箱即用的 Vue 项目模版,它基于 Vue CLI 4 众所周知,虽然 Vue CLI 提供了脚手架的功能,但由于官方的脚手架过于简单,运用在实际项目开 ...

  10. 什么是urlencode编码

    今天看文章中看到了urlencode,不理解 ,故上网查了查,看到了如下的答案,在此记录下,以加深印象 urlencode编码:就是将字符串以URL编码,一种编码方式,主要为了解决url中中文乱码问题 ...