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>
时间: 2024-11-03 17:19:51

CSS学习(十四)-CSS颜色之中的一个的相关文章

Oracle学习(十四):管理用户安全

--用户(user) SQL> --创建名叫 grace 密码是password 的用户,新用户没有任何权限 SQL> create user grace identified by password; 验证用户: 密码验证方式(用户名/密码) 外部验证方式(主机认证,即通过登陆的用户名) 全局验证方式(其他方式:生物认证方式.token方式) 优先级顺序:外部验证>密码验证 --权限(privilege) 用户权限有两种: System:允许用户执行对于数据库的特定行为,例如:创建表.

mybatis学习笔记(14)-查询缓存之中的一个级缓存

mybatis学习笔记(14)-查询缓存之中的一个级缓存 mybatis学习笔记14-查询缓存之中的一个级缓存 查询缓存 一级缓存 一级缓存工作原理 一级缓存測试 一级缓存应用 本文主要讲mybatis的一级缓存.一级缓存是SqlSession级别的缓存. 查询缓存 mybatis提供查询缓存.用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存. 一级缓存是SqlSession级别的缓存.在操作数据库时须要构造sqlSession对象,在对象中有一个数据结构(HashMa

第二十四个知识点:描述一个二进制m组的滑动窗口指数算法

第二十四个知识点:描述一个二进制m组的滑动窗口指数算法 简单回顾一下我们知道的. 大量的密码学算法的大数是基于指数问题的安全性,例如RSA或者DH算法.因此,现代密码学需要大指数模幂算法的有效实现.我们应该从一个简化的方案开始思考:计算\(x^a\mod N\),我们可以用指数算法来求\(x^a\),然后再约减到\(N\).然而,对大多数密码算法来说,\(x^a\)都是非常大的.现在,大多数传统的方法能被简单的在每个阶段模\(N\).这回产生一些改进的技术.下面我会介绍一些计算\(X^E \mo

css学习笔记四

广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作(二列浮动布局) 3:w3cschool静态页面制作 4:垂直菜单,水平菜单(li设置float),圆角菜单(利用背景图片), 鼠标移上去菜单高度变化(margin-top以及line-height), 鼠标移上去菜单宽度变化 (用jq写是利用hover和hide,用原生js写是文档加载完,遍历li里

CSS学习笔记02 CSS选择器

1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选择器 标签选择器就是选择当前页面中相同名字的标签 /*设置所有p标签的文字颜色为红色*/ p { color: red; } 3.ID选择器 id选择器使用"#"进行标识,后面紧跟id名 /*设置id为title的标签的文字颜色为红色*/#title { color: red; } <

CSS学习笔记01 CSS简介

1.CSS定义 CSS 指层叠样式表 (Cascading Style Sheets),是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG.XHTML 之类的 XML 分支语言)文档的呈现.CSS 描述了在屏幕.纸质.音频等其它媒体上的元素应该如何被渲染的问题. 2.为何使用CSS 网页是由HTML标签组成的,那么这些标签会根据浏览器的默认方式进行排版与样式的渲染,如果想要更改这些默认的样式,推荐用CSS,因为这样不仅实现了内容与表现分离的问题,而且更易于维护. 3.CSS语法 C

CSS基础学习十四:盒子模型补充之display属性设置

我在CSS基础学习十三:盒子模型的i博文只是阐释了CSS盒子模型,并没有过多的使用实例来演示.这篇博文 就来做一些盒子模型知识的补充.这一部分对于网页总体布局还是蛮重要的,过去大多数使用HTML中的table元素和 框架标签来进行网页的整体布局,现在我们使用最多的是DIV+CSS网页布局.所以一定要掌握好盒子模型,记住 content,border,padding和margin各自在盒子中的作用和使用方式. 先来看一个完整元素的盒子模型实例: <!DOCTYPE html PUBLIC "

CSS学习笔记四:下拉选择框以及其动画特效

以前学的只是了解了css的一些基本属性,在做项目的时候都是直接使用bootstrap响应式来写项目,这样子很方便,很快捷,但是在自己看来还是有一点缺陷的,毕竟,我很多时候不怎么清楚它里面的具体运作.所以在学习原生,一个一个小标符号学习起来,学习原生可能会让我学习到更多的东西. 学习了两种下拉框,一种是往在弹,一种是从中间往外弹. 第一种下拉框 现在学习的做东西,都是先确定好自己需要那几样东西,先把body的内容写了,再来一样一样规划样式. 1 <div class="content&quo

css学习の第一四弹—代码格式简写归纳

一.代码简写方式归纳 >>1.盒模型代码简写: 外边距(margin).内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的:上右下左 1.如果top.right.bottom.left的值相同,如下面代码: margin:10px 10px 10px 10px; 可缩写为: margin:10px; 2.如果top和bottom值相同.left和 right的值相同,如下面代码: margin:10px 20px 10px 20px; 可缩写为: m