CSS学习(十四)-CSS颜色之中的一个
一、理论:
1.RGB色彩模式
a.CMYK色彩模式
b.索引色彩模式 (主要用于web)
c.灰度模式
d.双色调模式
2.opacity:
a.alphavalue:透明度
b.inherit:继承父元素的不透明性
二、实践:
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.row{
overflow: hidden;
}
.row div{
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
float:left;
}
.row:nth-of-type(1) div {
background: #202189;
color:#fff;
}
.row:nth-of-type(2) div {
background: #31b231;
}
.row:nth-of-type(3) div {
background: #239587;
}
.row:nth-of-type(4) div{
background: #333333;
}
.row div:nth-child(1){
background: #004099;
color:#8f8f8f;
}
.row div:nth-child(2){
opacity: 1;
}
.row div:nth-child(3){
opacity: 0.8;
}
.row div:nth-child(4){
opacity: 0.6;
}
.row div:nth-child(5){
opacity: 0.4;
}
.row div:nth-child(6){
opacity: 0.2;
}
.row div:nth-of-type(1) div {
opacity: 1;
}
</style>
</head>
<body>
<div class="demo">
<div class="row">
<div>
1
</div>
<div>
0.8
</div>
<div>
0.6
</div>
<div>
0.4
</div>
<div>
0.2
</div>
</div>
<div class="row">
<div>
1
</div>
<div>
0.8
</div>
<div>
0.6
</div>
<div>
0.4
</div>
<div>
0.2
</div>
</div>
<div class="row">
<div>
1
</div>
<div>
0.8
</div>
<div>
0.6
</div>
<div>
0.4
</div>
<div>
0.2
</div>
</div>
<div class="row">
<div>
1
</div>
<div>
0.8
</div>
<div>
0.6
</div>
<div>
0.4
</div>
<div>
0.2
</div>
</div>
<div class="row">
<div>
1
</div>
<div>
0.8
</div>
<div>
0.6
</div>
<div>
0.4
</div>
<div>
0.2
</div>
</div>
</div> </body>
</html>
CSS学习(十四)-CSS颜色之中的一个的更多相关文章
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- mybatis学习笔记(14)-查询缓存之中的一个级缓存
mybatis学习笔记(14)-查询缓存之中的一个级缓存 标签: mybatis mybatis学习笔记14-查询缓存之中的一个级缓存 查询缓存 一级缓存 一级缓存工作原理 一级缓存測试 一级缓存应用 ...
- ZooKeeper学习笔记四:使用ZooKeeper实现一个简单的分布式锁
作者:Grey 原文地址: ZooKeeper学习笔记四:使用ZooKeeper实现一个简单的分布式锁 前置知识 完成ZooKeeper集群搭建以及熟悉ZooKeeperAPI基本使用 需求 当多个进 ...
- 第二十四个知识点:描述一个二进制m组的滑动窗口指数算法
第二十四个知识点:描述一个二进制m组的滑动窗口指数算法 简单回顾一下我们知道的. 大量的密码学算法的大数是基于指数问题的安全性,例如RSA或者DH算法.因此,现代密码学需要大指数模幂算法的有效实现.我 ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- Head First Html and CSS学习笔记之CSS
第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...
- DIV+CSS学习笔记(CSS)
css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- CSS学习笔记02 CSS选择器
1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
- 【css学习整理】css基础(样式,语法,选择器)
CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...
随机推荐
- 【转】Linux中的LVM
转自:http://www.cnblogs.com/net2012/p/3365904.html 逻辑卷管理器,通过将另外一个硬盘上的分区加到已有文件系统,来动态地向已有文件系统添加空间的方法. 逻辑 ...
- Elasticsearch之CURL命令的PUT和POST对比
PUT是幂等方法,而POST并不是. PUT用于更新操作,POST用于新增操作比较合适. PUT,DELETE操作是幂等的,所谓幂等就是指不管进行多少次操作,结果都一样. 比如,我用PUT修改一篇文章 ...
- cocos2d-x 不规则碰撞检测 【转载】
原文:http://www.2cto.com/kf/201401/272331.html //判断有没有点到有材质的部分, p_point相对, CCSprite坐标 (p_point是相对 Spr ...
- JAVA FORK JOIN EXAMPLE--转
http://www.javacreed.com/java-fork-join-example/ Java 7 introduced a new type of ExecutorService (Ja ...
- [转]通过Net Manager 配置Oracle 11g本地监听服务(listener service)
本文转自:http://blog.csdn.net/mozart_cai/article/details/8596504 [Target] 通过ip address 监听orcl服务,而不是通过loc ...
- Android FileProvider相关 Failed to find configured root that contains
问题: 使用FileProvider构造SD卡中文件uri时异常 java.lang.IllegalArgumentException: Failed to find configured root ...
- 如何防止SQL注入式攻击
一.什么是SQL注入式攻击? 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或 ...
- 02--Tomcat总体结构分析一
注:此文章大部分参考大神文档,并且结合自身理解,补充了其他相关知识,谢绝转载. 大神原文地址链接:http://www.ibm.com/developerworks/cn/java/j-lo ...
- SQL基本操作——HAVING
HAVING:在 SQL 中增加 HAVING 子句原因是,WHERE 关键字无法与合计函数一起使用. 我们拥有下面这个 "Orders" 表: O_Id OrderDate Or ...
- gitlab 第1次提交代码到1个新仓库
1.如果是本地刚刚搭建好git环境,第一次和gitlab服务器产生连接 参照这个文 https://www.cnblogs.com/kaerxifa/p/10929098.html 2.已经和gitl ...