实现项目：用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. GET和POST的区别与联系

    每日知识-GET和POST HTTP:超文本传输协议 组成部分:请求行,请求头部,一个空行,请求数据 GET和POST GET:get就是获取的意思,默认的HTTP请求方式,把参数通过 key/val ...

  2. 保姆级教程，带你认识大数据，从0到1搭建 Hadoop 集群

    大数据简介,概念部分 概念部分,建议之前没有任何大数据相关知识的朋友阅读 大数据概论 什么是大数据 大数据(Big Data)是指无法在一定时间范围内用常规软件工具进行捕捉.管理和处理的数据集合,是需 ...

  3. numpy的好处

    python是很慢的,因为python在执行代码的时候会执行很多复杂的check功能,比如 b=1; a=b/0.5 这个运算看起来很简单,但是在计算机的内部.b要先从一个整数integer转化成一个 ...

  4. C++模板元编程----快速排序

    目录 目录 简介 实现 数据结构定义 在数组前添加一个元素 判断 分堆 合并 快速排序的实现 总结 简介 上一篇使用C++模板模板实现了一个选择排序.这一次,更进一步的,实现了一个快速排序算法.关于快 ...

  5. PHPCMS V9.6.0 SQL注入漏洞分析

    0x01 此SQL注入漏洞与metinfo v6.2.0版本以下SQL盲注漏洞个人认为较为相似.且较为有趣,故在此分析并附上exp. 0x02 首先复现漏洞,环境为: PHP:5.4.45 + Apa ...

  6. tornado&django --- 分页

    tornado 1,urls.py import config import os from views.view import IndexHadnler,SearchHadnler,Searchre ...

  7. [.NET] - 在Socket编程中遇到的问题总结

    问题1.无法访问已释放的对象. 对象名:"System.Net.Sockets.Socket" 产生这个scenario的原因是程序中的某个地方调用到了socket.close后, ...

  8. 【Azure Redis 缓存】Linux虚拟机中使用6380端口(SSL方式)连接Azure Redis (redis-cli & stunnel)

    问题描述 在Azure Redis的官方文档中,介绍了在Windows下,如何通过redis-cli.exe连接Redis, 包含如何配置stunnel使得通过 6380,SSL方式连接到Redis ...

  9. 查看权限详情 将部门大类单据整合，将子类单据id去重合并

    /** * 查看权限详情 * @param id 部门id * @return */ @GetMapping("getListInfo") public R getDetail(S ...

  10. sql语句用法大全

    https://www.w3school.com.cn/sql/sql_in.asp .substr函数格式   (俗称:字符截取函数) 格式1: substr(string string, int ...