目标样式

目标分析：

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

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

　

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. 用最简单的方式学Python单链表

    Python 实现单链表 在本博客中,我们介绍单链表这种数据结构,链表结构为基于数组的序列提供了另一种选择(例如Python列表). 基于数组的序列和链表都能够对其中的元素保持一定得顺序,但采用的方式 ...

  2. 使用 Django 项目中的 ORM 编写伪造测试数据脚本

    作者:HelloGitHub-追梦人物 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 为了防止博客首页展示的文章过多以及提升加载速度,可以对文章列表进行分页展示.不过这需 ...

  3. (day30)GIL + 线程相关知识点

    目录 昨日内容 进程互斥锁 队列 进程间通信 生产者与消费者模型 线程 什么是线程 为什么使用线程 创建线程的两种方式 线程对象的属性 线程互斥锁 今日内容 GIL全局解释器锁 多线程的作用 计算密集 ...

  4. 计算机基础之编程 + 基本组成 + 组成补充 + 操作系统(day01整理)

    目录 一 计算机基础之编程 (一) 什么是编程语言 (二) 什么是编程 (三) 为什么要编程 二 计算机的基本组成 (一) CPU(大脑) (1) 控制器 (2) 运算器 (二) 存储器(记忆) (1 ...

  5. Veins（车载通信仿真框架）入门教程（三）——多跳路由实现指导

    Veins(车载通信仿真框架)入门教程(三)——多跳路由实现指导 Veins(车载通信仿真框架)入门教程(三)——多跳路由实现指导 必要的message类实现 从下面开始是在veins/src/vei ...

  6. GStreamer基础教程12 - 常用命令工具

    摘要 GStreamer提供了不同的命令行工具用于快速的查看信息以及验证Pipeline的是否能够正确运行,在平时的开发过程中,我们也优先使用GStreamer的命令行工具验证,再将Pipeline集 ...

  7. virtual与override的使用

    在函数的声明中,当有“virtual”修饰的时候,和没有virtual有什么区别呢?最重要的一点就是调用实例的函数是在编译的时候确定还是在运行的时候确定,virtual函数是在运行的时候来确定具体调用 ...

  8. swift 手机号、邮箱、网址等正则表达式验证

    看到一个不错的swift的 手机号.邮箱.网址等正则表达式验证,分享给大家. 支持swift3,经过修改后,亲测可用! import Foundation enum Validate { case e ...

  9. 百度地图Javascript API 调用示例

    调用示例 !<!DOCTYPE html> <html> <head> <title>百度地图DEMO</title> </head& ...

  10. 几种部署Goku API Gateway的方式，最快一分钟可使用上网关

    本文将介绍几种部署Goku API Gateway的方式,最快一分钟可使用上为网关,详情请看全文. 什么是Goku API Gateway? Goku API Gateway (中文名:悟空 API ...