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. Python和JavaScript间代码转换4个工具-乾颐堂

    Python 还是 JavaScript?虽然不少朋友还在争论二者目前谁更强势.谁又拥有着更为光明的发展前景,但毫无疑问,二者的竞争在 Web 前端领域已经拥有明确的答案.立足于浏览器平台,如果放弃 ...

  2. Mysql 查看表结构的命令

    创建数据库create database abc; 显示数据库 show databases; 使用数据库 use 数据库名; 直接打开数据库 mysql -h localhost -u root - ...

  3. 深入浅出 JMS(一) - JMS 基本概念

    深入浅出 JMS(一) - JMS 基本概念 一.JMS 是个什么鬼 JMS 是 Java Message Service 的简称,即 Java 消息服务.什么是消息服务呢,我们来看一下 Oracle ...

  4. c++11 随机代码记录

    // RadomTest.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #includ ...

  5. 13.11.20 jquery 核心 siblings() 获得同类（不包含自己）循环所有，

    jquery 核心1.选择器,2. 创建dom 元素 3. jquery 执行时 4. 延迟执行 5. 循环 6. 计算长度.7.8 获得选择器和所在节点 9. 获得下标 10. 元素存放数据  11 ...

  6. 2018.07.01 BZOJ3295: [Cqoi2011]动态逆序对（带修主席树）

    3295: [Cqoi2011]动态逆序对 **Time Limit: 10 Sec Memory Limit: 128 MB Description 对于序列A,它的逆序对数定义为满足i<j& ...

  7. 自学如何去学习jQuery

    学习JQ第一个demo: 制作一个轮播图,制作方法我前面写了一篇博客,传送门-->http://www.cnblogs.com/yewenxiang/p/6100206.html 需要的JQ知识 ...

  8. @WebService @WebMethod 详解

    形象图解 首先AB均需要@WebService如果 @WebService(endpointInterface="package.B") public class A implem ...

  9. 用Socket开发的一枚小型实时通信App

    Socket 英文原意是插座. 在网络世界里, 当一台主机温柔而体贴的同时提供多个服务时, 每个服务被绑定在一个端口上, 而每个端口就好像一个小插座. 用户们连接对应的插座去获取相应的服务. 在Nod ...

  10. java编程中Properties类的具体作用和使用！

    如果不熟悉 java.util.Properties类,那么现在告诉您它是用来在一个文件中存储键-值对的,其中键和值是用等号分隔的.(如清单 1 所示).最近更新的java.util.Properti ...