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. JVM 系列 ClassLoader

    JVM 系列()ClassLoader 在前面一节中,主要介绍了 Class 的装载过程,Class 的装载大体上可以分为加载类.连接类和初始化 3 个阶段.本小节将主要介绍绍 Java 语言中的 C ...

  2. linux 常用压缩打包和解压命令

    ## zcvf gzip jcvf bzip2 gunzip  tar zxvf  jxvf  

  3. Perl的调试模式熟悉和应用

    perl -d file.pl perl -c file.pl DB<1> hList/search source lines:               Control script ...

  4. java实现word,ppt,excel,jpg转pdf

    word,excel,jpeg 转 pdf 首先下载相关jar包:http://download.csdn.net/detail/xu281828044/6922499 import java.io. ...

  5. centos7 jenkins安装和使用

    jenkins 安装和使用 1.先安装jdK1.8 和 maven 此步骤省略 2.进入jenkisn 官网 下载https://jenkins.io/download/ Long-term Supp ...

  6. java最全的Connection is read-only. Queries leading to data modification are not allowed

    Connection is read-only. Queries leading to data modification are not allowed 描述:框架注入时候,配置了事物管理,权限设置 ...

  7. （二）swagger-springmvc

    如何入门 1. 我在 http://mvnrepository.com/ 上搜索 swagger-springmvc 2. 我找到一个具体版本 http://mvnrepository.com/art ...

  8. jmap的几个操作要慎用

    JDK中带有了一堆的工具是可以用来查看运行状况,排查问题的,但对于这些工具还是要比较清楚执行后会发生什么,否则有可能会因为执行了一个命令就导致严重故障,重点讲下影响比较大的jmap. 最主要的危险操作 ...

  9. Hdu1401 Solitaire 2017-01-18 17:21 33人阅读 评论(0) 收藏

    Solitaire Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Sub ...

  10. PAT 甲 1005. Spell It Right (20) 2016-09-09 22:53 42人阅读 评论(0) 收藏

    1005. Spell It Right (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Given ...