day60

不透明度

opacity()\

opacity (不透明度)
            1. 取值0~1
            2. 和rgba()的区别:
                1. opacity改变元素\子元素的透明度效果
                2. rgba()只改变背景颜色的透明度效果

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>透明度示例</title>

    <style>

        .c1,

        .c2

        {

            height: 400px;

            width: 400px;

            color: red;

        }

        .c1{

            /*背景和子标签都变淡*/

            background-color: black;

            opacity: 0.5;

        }

        .c2{

            /*只改变背景颜色透明度*/

            background-color: rgba(0,0,0,0.5);

        }

    </style>

</head>

<body>

<div class="c1">我是c1类的div标签</div>

<div class="c2">我是c2类的div标签</div>

</body>

</html>

效果：

c1中内容根据背景透明度改变而改变，c2只有背景透明度改变。

z-index

1. 数值越大,越靠近你
 2. 只能作用于定位过的元素
 3. 自定义的模态框示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>z-index</title>

    <style>

        *{

            /*页面不留边界*/

            padding: 0;

            margin: 0;

        }

        .c1{

            height: 150px;

            width: 150px;

            background-color: red;

            /*虽然位置不变，但是属于定位过的元素*/

            position: relative;

            /*z-index只作用于定位过的元素*/

            /*数值越大,越靠近你 */

            z-index: 2;

        }

        .c2{

            height: 200px;

            width: 200px;

            background-color: green;

            position: relative;

            top: -150px;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<!--c2覆盖c1,因为c2在后面，需要用z-index调整-->

<div class="c2"></div>

</body>

</html>

效果：

红色不会被覆盖。

模态框：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>青春版模态框示例</title>

    <style>

        .cover{

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            background-color: rgba(0,0,0,0.5);

        }

        .modal{

            width: 600px;

            height: 400px;

            background-color: white;

            position: fixed;

            top: 50%;

            left: 50%;

            /*往左上角挪*/

            margin-top: -200px;

            margin-left: -300px;

        }

    </style>

</head>

<body>

<div class="cover"></div>

<!--modal覆盖cover,因为modal在后面-->

<div class="modal"></div>

</body>

</html>

效果：

小米导航条

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>小米商城导航条示例</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        /*将列表前的点去掉*/

        ul{

            list-style-type: none;

        }

        /*使导航条横着*/

        .nav-left li{

            float:left;

            padding-right: 20px;

        }

        .nav-right {

            float: right;

        }

        .nav{

            /*左右都浮动，没有内容撑起，需要内容撑起*/

            background-color: #79aec8;

        }

        .c1{

            clear:left;

            clear:right;

        }

    </style>

</head>

<body>

<div class="nav">

    <div class="nav-left">

        <ul>

            <!--li*8>a   tab-->

            <li><a href="">玉米商城</a></li>

            <li><a href="">大米</a></li>

            <li><a href="">豆浆</a></li>

            <li><a href="">腰果</a></li>

            <li><a href="">橘子</a></li>

            <li><a href="">柚子</a></li>

            <li><a href="">黑米</a></li>

            <li><a href="">橙子</a></li>

        </ul>

    </div>

    <div class="nav-right">

        <a href="">登录</a>

        <a href="">注册</a>

        <a href="">购物车</a>

    </div>

    <!--作用为撑起内容，因为清除左右浮动，所以另起一行，但是没有内容，所以只撑起背景色-->

    <div class="c1"></div>

</div>

</body>

</html>

效果：

前端入门CSS(3)的更多相关文章

  1. 前端入门CSS(2)

    参考: https://www.cnblogs.com/liwenzhou/p/7999532.html 背景属性 /*背景颜色*/background-color: red; /*背景图片*/ ba ...

  2. 前端入门CSS(1)

    day48 参考:https://www.cnblogs.com/liwenzhou/p/7999532.html CSS的几种引入方式 行内样式 行内式是在标记的style属性中设定CSS样式,不推 ...

  3. 结合个人经历总结的前端入门方法 (转自https://github.com/qiu-deqing/FE-learning)

    结合个人经历总结的前端入门方法 (https://github.com/qiu-deqing/FE-learning),里面有很详细的介绍. 之前一直想学习前端的,都不知道怎么下手都一年了啥也没学到, ...

  4. web前端入门：一小时学会写页面

    一小时学会写页面 作为一个懒癌晚期患者,总是习惯找各种简单的解决问题的方法,也习惯性把问题简单化,所以今天想分享给大家简单的web前端入门方法.既然题目已经定了一个小时那么废话就不多说了,计时开始 1 ...

  5. 前端入门3-CSS基础

    本篇文章已授权微信公众号 dasu_Android(大苏)独家发布 声明 本系列文章内容全部梳理自以下四个来源: <HTML5权威指南> <JavaScript权威指南> MD ...

  6. 2019年Web前端入门的自学路线

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文.本文内容不定期更新. 我前几天写过一篇文章:<裸辞两个月,海投一个月 ...

  7. webpack快速入门——CSS进阶：自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  8. webpack快速入门——CSS文件打包

    1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ background:pink; color:yellowgreen; } 2.css建立好后,需要引 ...

  9. webpack快速入门——CSS中的图片处理

    1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:<div id="pic"></div& ...

随机推荐

  1. PAT 1020 月饼 (25)（精简版代码+思路+推荐测试用例）

    1020 月饼 (25)(25 分)提问 月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是 ...

  2. Eclipse下配置TinyOS开发环境

    通过给Eclipse安装Yeti 2 - TinyOS 2 Plugin for Eclipse来配置TinyOS IDE,从而可建立TinyOS Project Yeti 2的介绍请参考网站:htt ...

  3. Laravel 根据任务的性质和要求决定处理的方式（Cron or Job）

    1 前言 一般地,我们在应用的开发中,会碰到各种各样的任务解决需求.我的原则是,选择合适的方法做正确的事. 2 任务分类 在开发中, 一般会有以下几种性质的任务. 2.1 实时任务 一般是指,任务间的 ...

  4. Debian use sudo

    刚安装好的Debian默认还没有sudo功能.1.安装sudo# apt-get install sudo2.编辑 /etc/sudoers ,添加如下行# visudoroot ALL=(ALL:A ...

  5. c++11 stl 学习之 pair

    pair以模板的方式存储两个数据 namespace std {template <typename T1, typename T2>struct pair {// memberT1 fi ...

  6. 2018秋季c语言基础课第一次作业

    1)大学和高中最大的不同是没有人天天看着你,请看大学理想的师生关系是?有何感想? 答:邹欣老师提到了很多种关系,不外呼就是两种:平等或者不平等.平等的师生关系与陌生人无异,而自古以来尊师重道却被世人所 ...

  7. ORACLE实用函数之一 ratio_to_report的简单使用

    应用场景: 查询学生成绩级别(ABCDE)个人数和所占百分比(案列简单,勿喷). 表结构: create or replace table stu_grade( id varchar2(36), le ...

  8. 2018.09.11 poj1845Sumdiv（质因数分解+二分求数列和）

    传送门 显然需要先求出ab" role="presentation" style="position: relative;">abab的所有质因 ...

  9. 数塔问题-hdu-2084（dp）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2084 思路:要求从顶到底的最大值,可以反过来考虑,从底部向上. 只有下面一行的最大值确定,这一行的最大 ...

  10. 【转】Paxos算法1-算法形成理论

    ——转自:{老码农的专栏} Paxos算法的难理解与算法的知名度一样令人敬仰,从我个人的经历而言,难理解的原因并不是该算法高深到大家智商不够,而在于Lamport在表达该算法时过于晦涩且缺乏一个完整的 ...