目标样式

目标分析：

　　由图可知，整个色板可以分为三块

　　可以理解为一个大的盒子包含了三个小的盒子，定义如下

　

LEFT的定义方式

TOP的定义方式

class为bottom的块最为复杂，但分析方法也是异曲同工，因此不要担心太难。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=div, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="../css/color.css">

</head>

<body>

    <div class="all">

        <div class="left">

            <div></div>

            <div></div>

            <div></div>

        </div>

        <div class="top">

            <div class="top_1"></div>

            <div class="top_2">

                <div></div>

                <div></div>

            </div>

        </div>

        <div class="bottom">

            <div class="bottom_1"></div>

            <div class="bottom_2">

                <div></div>

                <div></div>

                <div></div>

            </div>

            <div class="bottom_3">

                <div class="con1"></div>

                <div class="con2">

                    <div></div>

                    <div></div>

                </div>

            </div>

        </div>

    </div>

    <div></div>

    <div></div>

    <div></div>

</body>

</html>

color.html

*{

    margin: 0;

    padding: 0;

}

.all{

    width: 600px;

    height: 600px;

    border: 1px dotted red;

    position: relative;

    top: 50px;

    left: 300px;

}

.left{

    width: 150px;

    height: 600px;

    float: left;

}

.left div:nth-child(1){

    height: 200px;

    width: 150px;

    background: #cccccc;

}

.left div:nth-child(2){

    height: 300px;

    width: 150px;

    background: #d40000;

}

.left div:nth-child(3){

    height: 100px;

    background: #24e712;

}

/*toptoptoptop*/

.top{

    width: 450px;

    height: 150px;

    float: left;

}

.top_1{

    width: 300px;

    height: 150px;

    background: yellow;

    float: left;

}

.top_2{

    width: 150px;

    height: 150px;

    float: left;

}

.top_2 div:nth-child(1){

    width: 149px;

    height: 80px;

    background: #24e712;

    float: right;

}

.top_2 div:nth-child(2){

    width: 149px;

    height: 70px;

    background: #04fdb3;

    float: right;

}

.bottom{

    width: 450px;

    height: 450px;

    float: left;

}

.bottom_1{

    width: 100px;

    height: 450px;

    background: purple;

    float: left;

}

.bottom_2{

    height: 450px;

    width: 150px;

    float: left;

    background: red;

}

.bottom_2 div:nth-child(1){

    width: 150px;

    height: 200px;

    background: red;

}

.bottom_2 div:nth-child(2){

    width: 150px;

    height: 100px;

    background: rgb(0, 0, 0);

}

.bottom_2 div:nth-child(3){

    width: 150px;

    height: 150px;

    background: rgb(190, 255, 12);

}

.bottom_3{

    width: 200px;

    height: 450px;

    float: left;

}

.con1{

    width: 200px;

    height: 200px;

    background: #24e712;

}

.con2{

    width: 200px;

    height: 250px;

}

.con2 div:nth-child(1){

    width: 200px;

    height: 100px;

    background: #04fdb3;

}

.con2 div:nth-child(2){

    width: 200px;

    height: 150px;

    background: green;

}

color.css

最终样式

htm&css 颜色的浮动的更多相关文章

  1. CSS盒子的浮动

    web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...

  2. css颜色属性及设置颜色的地方

    css颜色属性 在css中用color属性规定文本的颜色. 默认值是not specified 有继承性,在javascript中语法是object.style.color="#FF0000 ...

  3. CSS颜色及文本字体

    CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...

  4. 【CSS进阶】CSS 颜色体系详解

    说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...

  5. CSS颜色代码

    颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...

  6. CSS clear清除浮动

    1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...

  7. 第 14 章 CSS 颜色与度量单位

    学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一．颜色表方案 颜色的表现形式主要有 ...

  8. CSS中的浮动和定位

    在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...

  9. CSS 颜色代码大全

    CSS颜色: 转载:http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html

随机推荐

  1. web开发资源导航

    实用工具 前端在线工具 兼容性速查 html5兼容性查询 node-es6支持度 es6兼容性表查询 设备es6支持度 游览器H5支持度 浏览器内核检测工具 手机设备信息检测 浏览器市场份额 文档手册 ...

  2. SQlserver高效分页，还在使用row_number(),top之类的？

    row_number() ,还是top 这些分页的方法比较老了,效率不是很高效的, Sqlserve2012就有了,效率对比比较明显,尤其是数据比较大的情况下(我们可以观看查询执行计划) Offset ...

  3. 设计模式（二）Adapter模式

    Adapter模式也被成为Wrapper模式.适配器模式用于填补“现有的程序”和“所需的程序”之间差异的设计模式. Adapter模式有两种,即使用继承的适配器和使用委托的适配器. 1.使用继承的适配 ...

  4. SpringCloud之异常报警通知(八)

    在之前整合降级的基础上,整合redis,达到报警的效果(redis的启动还是之前boot里面整合的redis) order-service pom.xml <dependency> < ...

  5. 第四十章 POSIX条件变量

    条件变量 当一个线程互斥地访问某个变量时,它可能发现在其它线程改变状态之前,它什么也做不了 例如一个线程访问队列时,发现队列为空,它只能等待,只到其它线程将一个节点添加到队列中.这种情况就需要用到条件 ...

  6. OV5640摄像头配置一些值得注意的关键点（三）

    一.字节标志的注意点 由于摄像头的输出是RGB56格式,所以需要将两帧的数据进行拼接,之后送到上位机进行显示. reg byte_flag; always@(posedge cmos_pclk_i) ...

  7. CSPS模拟 61

    T1 模拟 T2 ?? T3 哈希

  8. Mybaits 源码解析 （十）----- 全网最详细，没有之一：Spring-Mybatis框架使用与源码解析

    在前面几篇文章中我们主要分析了Mybatis的单独使用,在实际在常规项目开发中,大部分都会使用mybatis与Spring结合起来使用,毕竟现在不用Spring开发的项目实在太少了.本篇文章便来介绍下 ...

  9. 2、linu

    一.常用linux命令 昨日内容回顾 linux基本命令 ls 查看目录和文件ls -la 查看所有文件和目录详情(包括隐藏文件, -l和-a可以单独使用)mkdirrmdirtouchcatcdrm ...

  10. 从 DevOps 到 Serverless：通过“不用做”的方式解决“如何更高效做”的问题

    作者 | 徐进茂(罗离) JAVA 开发工程师  导读:近年来,Serverless 一词越来越热,它已经逐渐成为了一种新型的软件设计架构.和 DevOps 概念提倡的是通过一系列工具和自动化的技术来 ...