htm&css 颜色的浮动
目标样式
目标分析：
由图可知，整个色板可以分为三块
可以理解为一个大的盒子包含了三个小的盒子，定义如下
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 颜色的浮动的更多相关文章
- CSS盒子的浮动
web前端学习笔记(CSS盒子的浮动) 在标准流中,一个块级元素在水平方向会自动伸展,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素的表现就会有所不同. ...
- css颜色属性及设置颜色的地方
css颜色属性 在css中用color属性规定文本的颜色. 默认值是not specified 有继承性,在javascript中语法是object.style.color="#FF0000 ...
- CSS颜色及文本字体
CSS颜色及文本字体 CSS颜色表示法 CSS文本设置 CSS边框属性 背景属性 元素溢出 CSS颜色及文本字体 CSS颜色表示法 颜色名表示,比如:red 红色,yellow黄色,pick粉色 16 ...
- 【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...
- CSS颜色代码
颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF).从 0 到 25 ...
- CSS clear清除浮动
1.CSS中的clear有四个参数: none:允许两边都可以浮动. left:不允许左边有浮动. right:不允许右边有浮动. both(默认):不允许有浮动. 2.一开始在CSS中clear浮动 ...
- 第 14 章 CSS 颜色与度量单位
学习要点: 1.颜色表方案 2.度量单位 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 颜色和度量单位等问题,包括颜色的选取方式.相对长度和绝对长度等. 一．颜色表方案 颜色的表现形式主要有 ...
- CSS中的浮动和定位
在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设 ...
- CSS 颜色代码大全
CSS颜色: 转载:http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html
随机推荐
- (day27)subprocess模块+粘包问题+struct模块+ UDP协议+socketserver
目录 昨日回顾 软件开发架构 C/S架构 B/S架构 网络编程 互联网协议 socket套接字 今日内容 一.subprocess模块 二.粘包问题 三.struct模块 四.UDP 五.QQ聊天室 ...
- Java基础（十七）日志（Log）
1.日志的概念 在调试有问题的代码时,经常需要插入一些System.out.println方法来观察程序运行的操作过程.但是,一旦发现了问题并且解决了问题,就需要将这些System.out.print ...
- Mac OS 简易U盘重装系统 亲测
Mac OS 简易U盘重装系统 亲测 亲测可用!简单方便,本文描述尽可能详细,如有疑问欢迎留言or微信咨询:523331232 如有帮助欢迎点赞! (一)制作MacOS系统U盘 [步骤1 准备U盘] ...
- 来玩一局CS吗？UE4射击游戏的独立服务器构建
前言 根据UE4官方文档的介绍,UE4引擎在架构时就已经考虑到了多人游戏的情景,多人游戏基于客户端-服务器模式(CS模式).也就是说,会有一个服务器担当游戏状态的主控者,而连接的客户端将保持近似的 ...
- Vue中Form表单验证无法消除验证问题
iView的表单api给出了一个resetFields方法,用于重置整个表单输入的内容并清除验证提示. 但是有时候需要只消除部分的iview的resetFields方法源码是这样的resetField ...
- Redis的使用--基本数据类型的操作命令和应用场景
echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! Red ...
- NOIP模拟 28
果然昨天和别人合照丢的脸今天都加进RP里了 T3是用了dp快速幂(???),T1,T2考试的时候把想法都写注释了. T1: #include<cstdio> using namespace ...
- python编程【环境篇】- 如何优雅的管理python的版本
简介 之前的文章(Python2还是python3 )中我们提到,建议现在大家都采用python3,因为python2在今年年底将不在维护.但在实际的开发和使用python过程中,我们避免不了还得用到 ...
- 使用Typescript重构axios(七)——实现基础功能：处理响应header
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- js 重写a标签的href属性和onclick事件
适应场景:假如移动端拨打电话,需要给a标签添加href属性,但是由于需求,需要链接跳转的同时给a标签添加onclick事件,如果不做任何处理的话,默认执行点击事件,而不会跳转href属性的链接. 怎么 ...