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. C语言字符串操作函数实现

    1.字符串反转 – strRev void strRev(char *str) { assert(NULL != str);   int length=strlen(str); ; while(end ...

  2. OpenGLES.APPLE_texture_format_BGRA8888

    OpenGL ES的扩展: APPLE_texture_format_BGRA8888 http://www.khronos.org/registry/gles/extensions/APPLE/AP ...

  3. vue run dev 8080端口被占用

    用vue 官方脚手架vue-cli构建项目容易碰到一些小错误 vue init webpack project-name ...... cd project-name npm install npm ...

  4. Laravel 5.4+Vue.js 初体验：Laravel下配置运行Vue.js

    生产材料PHP:PHP 5.6+Laravel 5.4:https://github.com/laravel/laravel/releases/Composer:http://getcomposer. ...

  5. 测试用例excel模板

    Index Precondition Action Test Data Expect Result Excute Date Pass/Fail

  6. 常用C字符串函数

    static void str_repalce(char *src,char *from,char *to) {     char *p,*q;     int lenFrom;     int le ...

  7. pthread_once 和 pthread_key

    http://blog.csdn.net/rickyguo/article/details/6259410 一次性初始化 有时候我们需要对一些posix变量只进行一次初始化,如线程键(我下面会讲到). ...

  8. 2018.08.29 hdu3507 Print Article（斜率优化dp）

    传送门 这应该算是斜率优化的模板题了. 就是要求打印n个数,每个数有一个参数a[i],每打印一段连续的数[l,r]需要的花费是(a[[l]+...+a[r])2+m" role=" ...

  9. docker镜像基本操作

    操作镜像 使用 docker 命令行操作 docker 镜像 获取镜像 使用「docker pull +镜像名称」从网络上下载image镜像 core@localhost ~ $ docker pul ...

  10. Shiro 登录页面的几个固定字段

    http://shiro.apache.org/webapp-tutorial.html Step 3b: Add a login page Since Step 3a enabled login a ...