CSS

HTML+CSS+JavaScript

结构+表现+交互

1.什么是CSS

如何学习

1.CSS是什么

2.CSS怎么用（快速入门）

3.CSS选择器（重点+难点）

4.美化网页（文字，阴影，超链接，列表，渐变.....）

5.盒子模型

6.浮动

7.定位

8.网页动画（特效效果）

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS:表现（美化网页）

字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动....

1.2发展史

CSS1.0

CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页表的简单

CSS2.1 浮动，定位

CSS3.0 圆角，阴影，动画....浏览器兼容性

1.3快速入门

style

基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
​
<!--    规范 <style> 可以编写CSS代码，每一个声明，最好使用分号结尾
    语法：
        选择器{
            声明1;
            声明2;
            声明3;
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>
​
​
<h1>我是标题</h1>
​
</body>
</html>

 

 

CSS优势：

1.内容和表现分离

2.网页结构表现统一

3.样式十分的丰富

4.建议使用独立于html的css文件

5.利用SEO，容易被搜索引擎收录！

Vue:及其不容易被搜索引擎收录！

1.4CSS三种导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
<!--    内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级： 就近原则-->
<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color:red;"> 我是标题</h1>
</body>
</html>

拓展：外部样式的两种写法

。链接式：

html

<!--    外部样式-->
    <link rel="stylesheet" href="css/style.css">

。导入式：

@import是CSS2.1特有的！

<!--    导入式-->
    <style>
        @import url("css/style.css");
    </style>

2.选择器

作用：选择页面上的某一个或者某一类元素

 

2.1 基本选择器

1.标签选择器：选择一类标签 标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
    <style>
        /*标签选择器，会选择到这个页面上所有的这个标签的元素*/
        h1{
            color: #7d3646;
            background: #294cce;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>狂神说Java</p>
</body>
</html>

 

2类选择器 class： 选择所有class 属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*类选择器的格式 .class的名称{}
        好处，可以多个标签归类，是同一个class可以复用
        */
        .yu1{
            color: #313cff;
        }
        .yu3{
            color: #ff4536;
        }
    </style>
</head>
<body>
<h1 class="yu1">标题1</h1>
<h1 class="yu2">标题2</h1>
<h1 class="yu3">标题3</h1>
​
<p class="yu3">标题3</p>
</body>
</html>

 

3.id 选择器：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    /*id选择器  : id必须保证全局唯一
    #id名称{}
    不遵循就近原则，固定的
    id选择器> class选择器 > 标签选择器
    */
    <style>
        #yu{
            color: #ff22de;
        }
        .style1{
            color: #39ff06;
        }
        h1{
            color: #180cff;
        }
    </style>
</head>
<body>
<h1 class="style1" id="yu">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

 

优先级：

id选择器> class选择器 > 标签选择器

2.2 层次选择器

1.后代选择器:在某个元素的后面 祖爷爷 爷爷 爸爸 你

/*后代选择器*/
        /*body p{*/
        /*    background: red;*/
        /*}*/

 

2.子选择器：一代，儿子

/*    子选择器*/
        body>p{
            background: #39ff06;
        }

 

3.相邻兄弟选择器：同辈

/*  相邻兄弟选择器 ：只有一个，相邻（向下）*/
        .active + p{
            background: #7d3646;
        }

 

4.通用选择器

/*    通用兄弟选择器： 当前选中中元素的向下所有兄弟元素*/
        .active~p{
            background: aqua;
        }

2.3 结构伪类选择器

伪类：条件

//选中ul的第一个元素
ul li:first-child{
            background: #180cff;
        }
//选中ul的最后一个元素
        ul li:last-child{
            background: red;
        }
/*    选中p1：定位到父元素，选择当前的第一个元素
    选择当前p元素父级元素，选中父级元素的第一个，并且是当前才生效！顺序
    */
        p:nth-child(1){
            background: #39ff06;
        }
    /*    选中父元素，下的p元素的第二个，类型*/
        p:nth-of-type(1){
            background: yellow;
        }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
​
        ul li:first-child{
            background: #180cff;
        }
​
        ul li:last-child{
            background: red;
        }
​
    /*    选中p1：定位到父元素，选择当前的第一个元素
    选择当前p元素父级元素，选中父级元素的第一个，并且是当前才生效！顺序
    */
        p:nth-child(1){
            background: #39ff06;
        }
    /*    选中父元素，下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: yellow;
        }
​
        /*a:hover{*/
        /*    background: black;*/
        /*}*/
    </style>
</head>
<body>
<!--<a href="">123456</a>-->
    <p>p0</p>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

2.4 属性选择器（常用）

id+classs 结合~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #0d3fbd;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right:5px ;
            font: bold 20px/30px Arial;
        }
        /*属性名. 属性名= 属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^=以什么什么开头
        ￥=以什么什么结尾
        */
        /*存在id的元素  a[]{}*/
        /*a[id]{*/
        /*    background: yellow;*/
        /*}*/
        /*存在id= first的元素  a[]{}*/
        /*a[id = first]{*/
        /*    background: #123a76;*/
        /*}*/
        /*class 中有links 的元素 */
        /*a[class*="links"]{*/
        /*    background: yellow;*/
        /*}*/
        /*选中href中已https开头的元素*/
        a[href^="https"]{
            background: yellow;
        }
        /*}*/
        /*选中href中已jpg结尾的元素*/
        /*a[href$=jpg]{*/
        /*    background: yellow;*/
        /*}*/
    </style>
</head>
<body>
    <p class="demo">
        <a href="https://www.baidu.com" class="links item first" id="first">1</a>
        <a href="https://blog.kuangstuday.com" class="links item active" target="_blank" title="test">2</a>
        <a href="images/123.html" class="links item">3</a>
        <a href="images/123.png" class="links item">4</a>
        <a href="images/123.jpg" class="links item">5</a>
        <a href="abc" class="links item">6</a>
        <a href="/a.pdf" class="links item">7</a>
        <a href="/abc.pdf" class="links item">8</a>
        <a href="abc.doc" class="links item">9</a>
        <a href="abcd.doc" class="links item">10</a>
        <a href="https://www.cnblogs.com/liushuaiyu/" class="links item" target="_blank">11</a>
    </p>
</body>
</html>

效果

正则表达式：
        = 绝对等于
        *= 包含这个元素
        ^=以什么什么开头
        ￥=以什么什么结尾

CSS,JS,JQuery,vue

3.美化网页元素

3.1为什么要美化网页

1.有效传递页面信息

2.美化网页，页面漂亮，才能吸引用户

3.凸显页面主题

4.提高用户的体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #title1{
            font-size: 50px;
        }
    </style>
</head>
<body>
欢迎学习<span id="title1">Java</span>
</body>
</html>

3.2 字体样式

<!--    font-family 字体
        font-family 字体大小
        font-weight 字体宽度
        color  字体颜色
-->
    <style>
        body{
            font-family:"Arial Black", 宋体;
            color: #ff4536;
        }
        p[class=p1]{
            font-family: 楷体;
            color: #39ff06;
        }
        h1{
            font-size: 50px;
        }
        .p2{
            font-weight: bold;
        }
    </style>

3.3字体样式

1.颜色 color rgb rgba

2.文本对齐方式 text-align: center;

3.首行缩进 text-indent: 2em;

4.行高 line-height:

5.装饰 text-decoration:

6.文本图片水平对齐 vertical-align: middle;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    颜色：
            单词
            RGB 0~F
            RGBA A:0~1
​
            text-align:排版 居中
            text-indent: 2em 首行缩进两个字符
            height: 300px;
            line-height: 300px;
                        行高和块的高度一致，就可以上下居中
            -->
    <style>
        h1{
            color: rgba(0,255,255,0.9);
            text-align: center;
        }
        .p1{
            text-indent: 2em;
        }
        .p3{
            background: #180cff;
            height: 300px;
            line-height: 300px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        .l2{
            text-decoration:  line-through;
        }
        /*上划线*/
        .l3{
            text-decoration: overline;
        }
        a{
            text-decoration: none;
        }
           /*水平对齐 参展物 a,b*/
        img,span{
            vertical-align: middle;
        }
    </style>
</head>
<body>
<a href="">123</a>
<p class="l1">1234576</p>
<p class="l2">1234576</p>
<p class="l3">1234576</p>
<h1>天舟二号</h1>
<p class="p1">天舟二号货运飞船，中国第二个货运飞船，中国空间站关键技术验证及建造阶段首飞货运飞船。按照任务规划，天舟二号货运飞船将携带3名航天员消耗品、舱外航天服、平台物资与在轨运行的天和核心舱进行交会对接，为后续飞行任务和空间站进一步开展在轨建造奠定坚实基础。</p>
​
<p class="p2">2021年5月29日20时55分，搭载天舟二号货运飞船的长征七号遥三运载火箭，在中国文昌航天发射场准时点火发射，约604秒后，飞船与火箭成功分离，精确进入预定轨道，21时17分，太阳能帆板两翼顺利展开工作，发射取得圆满成功。</p>
​
<p class="p3">2021年5月30日5时01分，天舟二号货运飞船入轨后顺利完成入轨状态设置，采用自主快速交会对接模式，精准对接于天和核心舱后向端口，整个过程历时约8小时。</p>
​
<p>Early in the day it was whispered that we should sail in a boat, only thou and I, and never a soul in the world would know of this our pilgrimage to no country and to no end.
​
<p>
    <img src="image/a1.png" alt="">
    <span> asdqwe</span>
</p>
</body>
</html>

 

3.4阴影

/*text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径*/
        #price{
            text-shadow: #313cff 10px -10px 2px;
        }

3.5超链接伪类

正常情况下，a, a:hover

/*默认颜色*/
        a{
            text-decoration: none;
            color: black;
        }
        /*鼠标悬停的状态（只需要记住）*/
        a:hover{
            color: orange;
            /*font-size: 50px;*/
        }

3.6列表

css

/*ul li*/
/*
list-style:
    non 去掉实心圆
    circle 空心圆
    square 正方形
*/
/*ul{!*nav替换效果*!
    background: antiquewhite;
}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;/*缩进*/
}

 html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li>
            <a href="#">图书</a>
            <a href="#">音像</a>
            <a href="#">数字商品</a>
        </li>
        <li>
            <a href="#">家用电器</a>
            <a href="#">手机</a>
            <a href="#">数码</a>
        </li>
        <li>
            <a href="#">电脑</a>
            <a href="#">办公</a>
        </li>
        <li>
            <a href="#">家居</a>
            <a href="#">家装</a>
            <a href="#">厨具</a>
        </li>
        <li>
            <a href="#">服饰鞋帽</a>
            <a href="#">个性化妆</a>
        </li>
        <li>
            <a href="#">礼品箱包</a>
            <a href="#">钟表</a>
            <a href="#">珠宝</a>
        </li>
        <li>
            <a href="#">食品饮料</a>
            <a href="#">保健食品</a>
        </li>
        <li>
            <a href="#">彩票</a>
            <a href="#">旅行</a>
            <a href="#">充值</a>
            <a href="#">票务</a>
        </li>
    </ul>
</div>
</body>
</html>

3.6列表

/*ul li*/
/*
list-style:
    non 去掉实心圆
    circle 空心圆
    square 正方形
*/
/*ul{!*nav替换效果*!
    background: antiquewhite;
}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;/*缩进*/
}

3.7背景

<style>
        div{
            width: 1000px;
            height: 7000px;
            border: 1px solid red;
            background-image: url("images/a.png");
        /*    默认是平铺的 repeat*/
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>

 

3.8渐变

 background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);

4.盒子模型

4.1什么是盒子模型

margin:外边距

padding:内边距

boder:边距

4.2边框

1.边框的粗细

2.边框的样式

3.边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*body总有一个默认的外边距margin:0 常见的操作*/
        body{
            margin: 0;
​
        }
        h2{
            font-size: 16px;
            background-image:  linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            margin: 0;
        }
        /*border边框：粗细，样式，颜色*/
        #box{
            width: 300px;
            border: 1px solid red;
        }
        form{
            background-image:  linear-gradient(19deg, #21D4FD 0%, #ff6021 100%);
        }
        div:nth-of-type(1) input{
            border: 3px solid black;
        }
        div:nth-of-type(2) input{
            border: 3px dashed #0738e3;
        }
    </style>
</head>
<body>
​
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
​
    </form>
​
</div>
</body>
</html>

 

4.3内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
​
​
        /*border边框：粗细，样式，颜色
        外边距的妙用：居中元素  margin: 0 auto;
        */
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }
        h2{
            font-size: 16px;
            background-image:  linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
            margin: 0 1px 2px 3px;
        }
        /*
        顺时针旋转
         margin: 0;
          margin: 0 auto;
        */
        form{
            background-image:  linear-gradient(19deg, #21D4FD 0%, #ff6021 100%);
        }
        input{
            border: 1px solid black;
        }
        div:nth-of-type(1){
            padding: 10px 2px;
        }
    </style>
</head>
<body>
​
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
        <div>
            <span>邮箱：</span>
            <input type="text">
        </div>
​
    </form>
​
</div>
</body>
</html>

盒子的计算方式：你这个元素到底有多大？

margin+border+padding+内容宽度

4.3圆角边框

!--   左上 右上 右下 左下 ，顺时针方向
        圆圈：  圆角=半径
        -->
    <style>
        div{
            height: 100px;
            width: 100px;
            border: 10px solid red;
            border-radius : 100px;
        }
    </style>

4.5盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*       margin:0 auto;居中
要求： 块元素，块元素有固定的宽度*/
        img{
            border-radius: 50px;
            /*盒子阴影*/
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
    <div style="width: 500pt;display: block;text-align: center;">
        <div style="margin: 0 auto">
            <img src="images/a.png" alt="">
        </div>
    </div>
</body>
</html>

 

5.浮动

5.1标准文档流

块级元素：独占一行

1 h1~h6 p div 列表....

行内元素：不会独占一行

1 span a img strong....

行内元素 可以被包含在 块级元素中，反之，则不可以~

5.2 display和float

块元素：div p h1-h6 form ul ol 等等 每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素

block元素特点：

  • 总是在新行上开始

  • 高度、行高以及外边距和内边距都可以控制

  • 宽度缺省是它的容器的100%，除非设定一个宽度

  • 它可以容纳内联元素和其他块元素

行内元素：a span img 也叫内联单元、内嵌元素等，只能容纳文本或其他内联元素

行内元素特点

  • 和其他元素都在同一行

  • 高，行高及外边距和内边距不可改变；

  • 宽度就是它的文字或图片的宽度，不可改变

  • 内联元素只能容纳文本或者其他内联元素

属性 display: block 设置成块级元素; display: inline 设置成行内元素 display: inline-block 同时具有块元素和行内元素的属性

display: none 不显示

<!--
    block 块元素
    inline 行内元素
    inline-block 是块元素，但是可以内联，在一行
    none
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>

1.这个也是一种实现行内元素排列的方式，但是我么们很多情况都使用float

浮动：

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

示例：使用float写一行元素排列的菜单栏

<html>
<head>
    <style type="text/css">
        ul
        {
            float:left;
            width:100%;
            padding:0;
            margin:0;
            list-style-type:none;
        }
        a
        {
            float:left;
            width:7em;
            text-decoration:none;
            color:white;
            background-color:purple;
            padding:0.2em 0.6em;
            border-right:1px solid white;
        }
        a:hover {background-color:#ff3300}
        li {display:inline}
    </style>
</head>
<body>
<ul>
    <li><a href="#">Link one</a></li>
    <li><a href="#">Link two</a></li>
    <li><a href="#">Link three</a></li>
    <li><a href="#">Link four</a></li>
</ul>
</body>
</html>

5.4父级边框塌陷的问题

clear: right 右侧不允许有浮动元素

clear: left 左侧不允许有浮动元素

clear: both 左右两侧都不允许有浮动元素

clear: none

1.增加父级元素高度，使父级元素能够容纳浮动元素

#father{
    border:1px #000 solid;
    height:800px;
}

2.增加一个空的div标签，清除浮动

<div class="clear"></div>
.clear{
    clear:both
        margin:0;
    padding:0;
}

3.使用overflow属性，当内容超过了父级元素的高度时，使用overflow:scroll属性可以添加滚动条，解决父级边框塌陷 可以在父级元素中添加一个overflow:hidden属性

4.添加一个伪类：

#father:after{
    content: '';
    display: block;
    clear: both;
}

小结：

1.浮动元素后面增加空div

简单，代码尽量避免空div

2.设置父元素高度

简单，元素假设有了固定的高度，就会被限制

3.overflow

简单，下拉的一些场景避免使用

4.父类添加一个伪类：after（推荐）、

写法稍微复杂，但是没有副作用，推荐使用!

5.5对比

。display

方向不可以控制

。float

浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

6.定位

6.1 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    相对定位
        相对于自己原来的位置进行偏移
        -->
    <style>
        body{
            padding: 20px;
        }
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
        }
        #first{
            background-color: #ff4536;
            border: 1px dashed #ff4599;
            position: relative;/*相对定位*/
            top: -20px;
            left: 20px;
        }
        #second{
            background-color: #36ffaf;
            border: 1px dashed #36ff99;
        }
        #third{
            background-color: #366fff;
            border: 1px dashed #366f99;
            position: relative;
            bottom: -10px;
            right: 20px;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

相对定位： position: relative;

相对于原来的位置，进行指定偏移，相对定位的话，它仍然在标准文档流中，原来位置仍会保留！

top: -20px;
left: 20px;
bottom: -10px;
right: 20px;

 

6.2 绝对定位

定位:基于xxx定位，上下左右~

1、没有父级元素定位的前提下，相对于浏览器定位

2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移~

3、在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
        }
        #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
        }
        #first{
            background-color: #ff4536;
            border: 1px dashed #ff4599;
        }
        #second{
            background-color: #36ffaf;
            border: 1px dashed #36ff99;
            position: absolute;
            left: 100px;
        }
        #third{
            background-color: #366fff;
            border: 1px dashed #366f99;
        }
    </style>
</head>
<body>
    <div id="father">
        <div id="first">第一个盒子</div>
        <div id="second">第二个盒子</div>
        <div id="third">第三个盒子</div>
    </div>
</body>
</html>

6.3固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            height: 1000px;
        }
        div:nth-of-type(1) { /*绝对定位，相对于浏览器*/
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        div:nth-of-type(2) { /*固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position:fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>div1</div>
<div>div2</div>
</body>
</html>

6.4 z-index

图层

z-index:默认是0，最高999

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div id="content">
        <ul>
            <li><img src="images/bg.png" alt=""></li>
            <li class="tipText">学习微服务，找狂神</li>
            <li class="tipBg"></li>
            <li>时间：2099-01-01</li>
            <li>地点： 火星</li>
        </ul>
    </div>
</body>
</html>
#content{
    width: 300px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content, .tipBg{
    position: relative;
}
.tipText, .tipBg{
    position: absolute;
    width: 500px;
    height: 25px;
    top: 300px;
}
.tipText{
    color: white;
    /*z-index: 0;*/
}
.tipBg{
    background: #000;
    opacity: 0.5;/*背景透明度*/
    filter: Alpha(opacity=50);
}

 

posted on 2021-05-30 21:21  lsys  阅读(106)  评论(0)    收藏  举报

导航