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. OpenGLES.gpus_ReturnNotPermittedKillClient

    在iOS中,使用OpenGLES不当引起的crash:“gpus_ReturnNotPermittedKillClient” https://developer.apple.com/library/i ...

  2. Fully Update And Upgrade Offline Debian-based Systems

    Let us say, you have a system (Windows or Linux) with high-speed Internet connection at work and a D ...

  3. Java NIO系列教程（十一） Java NIO 与 IO

    Java NIO系列教程(十一) Java NIO与IO 当学习了 Java NIO 和 IO 的 API 后,一个问题马上涌入脑海: 我应该何时使用 IO,何时使用 NIO 呢?在本文中,我会尽量清 ...

  4. Spring.NET学习笔记8——集合类型的注入(基础篇)

    1.基础类 public class Happy    {        public override string ToString()        {            return &q ...

  5. java网络爬虫实现信息的抓取

    转载请注明出处:http://blog.csdn.NET/lmj623565791/article/details/23272657 今天公司有个需求,需要做一些指定网站查询后的数据的抓取,于是花了点 ...

  6. HDU 3361 ASCII （水题，不说什么了）

    题意:给你n个十进制数,让你输出相应的ASCII. 析:无,没说的,直接输出就好了. 代码如下: #include <iostream> #include <cstdio> # ...

  7. Spring MVC controller 被执行两次

    interceptor 被执行两次 后来发现 时controller被执行两次 后来发现是jsp页面有个: <img src="#" > 导致被执行两次. 解决方案:去 ...

  8. hdu 1300 Deck

    题目 分析:对于n张卡片的最佳摆法,我们只需要在n-1张卡片的摆法下面加一张边缘与桌檐重合的卡片,并将所有卡片一起向桌檐外移动.对于一种最佳摆法,其中心一定在桌檐上,所以一定符合杠杆原理,支点是桌檐. ...

  9. DagScheduler 和 TaskScheduler

    DagScheduler 和 TaskScheduler 的任务交接 spark 调度器分为两个部分, 一个是 DagScheduler, 一个是 TaskScheduler, DagSchedule ...

  10. oracle数据库查询日期sql语句（范例）、向已经建好的表格中添加一列属性并向该列添加数值、删除某一列的数据（一整列）

    先列上我的数据库表格: c_date(Date格式)     date_type(String格式) 2011-01-01                   0 2012-03-07         ...