Day 20 CSS

棘布

已于 2024-08-14 18:47:10 修改

阅读量587

点赞数 13

文章标签： css

于 2024-07-30 18:38:02 首次发布

本文链接：https://blog.csdn.net/weixin_68354747/article/details/140731922

版权

CSS

1.css简单介绍

HTML + CSS + JavaScript
结构 + 表现 + 交互

2.什么是CSS和发展史

什么是CSS：

Cascading Style Sheet 层叠级联样式表
CSS：表现层（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页浮动……

发展史：

CSS1.0
CSS2.0 DIV(块) + CSS，HTML与CSS结构分离的思想，网页变得简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画…… 浏览器兼容性~

3.CSS的快速入门及优势

练习格式：

基本入门：

<!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，容易被搜索引擎收录！

4.四种css导入方式

<!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>-->
<h1>我是标题</h1>

</body>
</html>

拓展：外部样式两种写法
链接式：
html

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

导入式：
@import是css2.1特有的！

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

5.三种基本选择器

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*标签选择器，会选择到封面上所有的这个标签的元素*/
        h1{
            color: #174cdc;
            background: aqua;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }
    </style>

</head>
<body>

<h1>学java</h1>
<h1>学java</h1>
<p>看棘布敲代码</p>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*类选择器的格式：  .class的名称{}
        好处，可以多个标签归类，是同一个class，可以复用
        */
        .jibu{
            color: #619af6;
        }
        .lijun{
            color: #a45ff6;
        }
    </style>

</head>
<body>

<h1 class="jibu">标题1</h1>
<h1 class="lijun">标题2</h1>
<h1 class="jibu">标题3</h1>

<p class="jibu">P标签</p>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器：id必须保证全局唯一！
        #id名称{}
        优先级：
        不遵循就近原则，固定的
        id选择器 > class选择器 > 标签选择器
        */
        #jibu{
            color: red;
        }
        .style1{
            color: chartreuse;
        }
        h1{
            color: deepskyblue;
        }

    </style>

</head>
<body>

<h1 id="jibu" class="style">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

优先级：id > class > 标签

6.层次选择器

1.后代选择器：在某个元素的后面

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

2.子选择器：一代

/*子选择器*/
        body>p{
            background: green;
        }

3.相邻兄弟选择器同辈

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

4.通用选择器

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

7.结构伪类选择器

伪类：条件

a:hover{
            background: darkorange;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--避免使用class,id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: gold;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: red;
        }

    /*选中p1 : 定位到父元素，选择当前的第一个元素
    选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
    */
        p:nth-child(1){
            background: #3472a8;
        }

        /*选中父元素，下的p元素的第二个，类型*/
        p:nth-of-type(2){
            background: #ab22d8;
        }

        /*a:hover{*/
        /*    background: darkorange;*/
        /*}*/


    </style>

</head>
<body>

<!--<a href="">jibu</a>-->
<!--<h1>h1</h1>-->
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>

</body>
</html>

8.属性选择器（常用）

id + class 结合~

<!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: deepskyblue;
        text-align: center;
        color: red;
        text-decoration: none;
        margin-right: 5px;
        font:bold 20px/50px Arial;
      }
  /*属性名， 属性名 = 属性值（正则）
  =  绝对等于
  *=  包含这个元素
  ^=  以这个开头
  $
  */

  /*存在id属性的元素  a[]{}*/
  /*    a[id]{*/
  /*      background: yellow;*/
  /*    }*/

      /*id=first的元素*/
      /*a[id=first]{*/
      /*  background: yellow;*/
      /*}*/

  /*class 中有 links的元素*/
  /*    a[class*="links"]{*/
  /*      background: yellow;*/
  /*    }*/

  /*选中hrfe中以http开头的元素*/
  /*    a[href^=http]{*/
  /*      background: yellow;*/
  /*    }*/

      a[href$=doc]{
        background: yellow;
      }

  </style>

</head>
<body>

<p class="demo">

  <a href="http://www.baidu.com" class="links item first" id="first">1</a>
  <a href="https://blog.jibu.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 last">10</a>

</p>

</body>
</html>

=
*=
^=
$=

9.CSS的作用及字体样式

为什么要美化网页：

1、有效的传递页面信息
2、美化网页，页面漂亮，才能吸引用户
3、凸显页面的主题
4、提高用户的体验

span标签：重点要突出的字，使用span标签套起来

<!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>

字体样式

<!--
font-family:字体
font-size:字体大小
font-weight:字体的粗细
color:字体颜色
-->
    <style>
        body{
            font-family: "Arial Black", 楷体;
            color: red;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>


    <!--字体风格-->
    <style>
        p{
            font:oblique bolder 16px 楷体;
        }
    </style>

10.文本样式

1、颜色 color rgb rgba
2、文本对齐的方式 text-align = center;
3、首行缩进 text-indent: 2em;
4、行高 line-height: 单行文字上下居中 line-height = 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:center; 排版，居中
text-indent: 2em;段落首行缩进
      height: 300px;
      line-height: 300px;
行高，和 块的高度一致，就可以上下居中
-->
  <style>
    h1{
      color: rgba(255,0,0,0.5);
      text-align:center;
    }
    .p1{
      text-indent: 2em;
    }

    .p3{
      background: blueviolet;
      height: 300px;
      line-height: 300px;
    }
    /*下划线*/
    .l1{
      text-decoration: underline;
    }
    /*中划线*/
    .l2{
      text-decoration: line-through;
    }
    /*上划线*/
    .l3{
      text-decoration: overline;
    }
    /*超链接标签去下划线*/
    a{
        text-decoration: none;
    }
    /*水平对齐~ 参照物*/
    img,span{
        vertical-align: middle;
    }
  </style>

</head>
<body>

<a href="">123</a>

<p>
    <img src="images/a.png" alt="">
    <span>dwffwefwefewfwfefwe</span>
</p>

<p class="l1">123456789</p>
<p class="l2">123456789</p>
<p class="l3">123456789</p>

<h1>内容简介</h1>
<p class="p1">
  故事背景取自秦灭六国到西楚霸王项羽灭秦这段英雄辈出的历史时期，时间跨度约三十年，是一部以武侠为主题的全民型动画。各种历史事件和民间传说纷呈迭起，仗剑游走江湖的名士侠隐和对现代中国产生深远影响的诸子百家更是在这个合纵连横的大时代中悉数登场。
</p>
<p>
  百家争鸣的中华古文化在此激烈冲突碰撞，大时代恢宏磅礴的战争场面在连天烽火中震撼重现，江湖儿女的侠骨柔情于动荡乱世间绽放光华……少年荆天明如杂草般顽强生存于时代变革的乱世之中，面对强暴的政权、险恶的敌人，勇敢地与侠士们进行反抗，经历了一段不俗的遭遇。
</p>
<p class="p3">
  I loved you first, but afterwards your love outsoaring mine, ..For one is both and both are one in love:Rich love knows nought of ‘thine that is not mine;Both have the strength and both the length thereof,Both of us, of the love which makes us one.
</p>

</body>
</html>

11.文本阴影和超链接伪类

阴影：

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

超链接伪类：

正常情况下,a, a:hover

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

12.列表样式练习

#nav{
    width: 300px;
    background: #a6a9ae;

}

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: red;
}
/*ul li*/
/*
list-style:
 none 去掉圆点
 circle 空心圆
 decimal 数字
 square 正方形
*/
/*ul{*/
/*    background: #a6a9ae;*/
/*}*/
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 14px;
    color: black;
}
a:hover{
    color: orange;
    text-decoration: underline;
}

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
    <link rel="stylesheet" href="css/style.css" 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>

13.背景图像应用及渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

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

</head>
<body>

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

</body>
</html>

练习：

渐变：

background-color: #0093E9;
background-image: linear-gradient(161deg, #0093E9 0%, #80D0C7 100%);

网站：Grabient

14.盒子模型及边框使用

什么是盒子模型

margin：外边距
padding：内边距
border：边框

边框

1、边框的粗细
2、边框的样式
3、边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    /*总有一个默认的外边距margin: 0;  常见操作*/
    /*h1,ul,li,a,body{*/
    /*  margin: 0;*/
    /*}*/
    /*border:粗细，样式，颜色*/
    #box{
      width: 300px;
      border: 1px solid red;
    }

    h2{
      font-size: 16px;
      background-color: green;
      line-height: 30px;
      color: white;
    }

    form{
      background: green;
    }

    div:nth-of-type(1) input{
      border: 3px solid black;
    }
    div:nth-of-type(2) input{
      border: 3px dashed #1b3f6e;
    }
    div:nth-of-type(3) input{
      border: 2px solid powderblue;
    }
  </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>

15.内外边距及div居中

内外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--外边距的妙用：居中元素
    margin: 0 auto;
    -->
    <style>

        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        /*
        顺时针旋转
        margin:0
        margin:0 1px
        margin:0 1px 2px 3px
        */
        h2{
            font-size: 16px;
            background-color: green;
            line-height: 30px;
            color: white;
            margin: 0 1px;
        }

        form{
            background: green;
        }
        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+内容宽度

16.圆角边框及阴影和经验分析

圆角边框

4个角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!--
左上 右上 右下 左下，顺时针方向

   圆圈：  圆角 = 半径！
-->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
        }
    </style>

</head>
<body>

<div></div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    div{
      width: 50px;
      height: 50px;
      margin: 30px;
      background: red;
      border-radius: 50px 0px 0px 0px;
    }
    img{
      border-radius: 470px;
    }
  </style>

</head>
<body>

<div></div>

<img src="images/jibu.jpg" alt="">

</body>
</html>

盒子阴影

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

<!-- margin: 0 auto; 居中
要求：块元素，块元素有固定的宽度
-->

    <style>
        img{
            border-radius: 470px;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>

</head>
<body>

<div style="display: block;text-align: center">
        <img src="images/jibu.jpg" alt="">
</div>

</body>
</html>

17.dispiay和浮动

标准文档流

块级元素：独占一行

h1~h6 p div 列表

行内元素：不独占一行

span a img strong

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

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--
    block 块元素
    inline 行内元素
    inline-block 是块元素但是可以内联，在一行
    none 
    -->

    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: none;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>

</head>
<body>

<div>div块元素</div>
<span>span行内元素</span>

</body>
</html>

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

float

1、左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border: 1px #f00 dashed;
    display: inline-block;
    float: right;
}
.layer02{
    border: 1px #00f dashed;
    display: inline-block;
    float: right;
}
.layer03{
    border: 1px #060 dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px #666 dashed;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
    float: right;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动</title>
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div id="father">
    <div class="layer01"><img width="50" height="50" src="images/lijun.jpg" alt=""></div>
    <div class="layer02"><img width="150" height="100" src="images/2.jpg" alt=""></div>
    <div class="layer03"><img width="108" height="152" src="images/3.jpg" alt=""></div>
    <div class="layer04">
        浮动的盒子可以向左浮动，也可以向右浮动，直到它的外缘碰到包含框或另一个浮动盒子为止。
    </div>
</div>
</body>
</html>

18.overflow及父级边框塌陷问题

clear

/*
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: hidden

4、父类添加一个伪类:after

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

小结：

1.浮动元素后面加空div
简单，代码中尽量避免空div

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

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

4. 父类添加一个伪类:after （推荐）
写法稍微复杂一点，但是没有副作用，推荐使用

对比

display
方向不可以控制

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

19相对定位的使用及练习

相对定位

<!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 #666 solid;
      padding: 0;
    }
    #first{
      background-color: indianred;
      border: 1px red dashed;
        position: relative;/*相对定位：上下左右*/
        top: -20px;
        left: 20px;
    }
    #second{
      background-color:yellowgreen;
      border: 1px yellow dashed;

    }
    #third{
      background-color: deepskyblue;
      border: 1px blue dashed;
      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;

20.方块定位练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        #father{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;/*去下划线*/
            background-color: pink;
            line-height: 100px;/*上下居中*/
            text-align: center;
            color: white;
            display: block;/*变成块元素*/
        }
        a:hover{
            background-color: deepskyblue;
        }
        #a2,#a4{
            position: relative;
            left: 200px;
            bottom: 100px;
        }
        #a5{
            position: relative;
            left: 100px;
            bottom: 300px;
        }

    </style>

</head>
<body>

<div id="father">
    <a href="" id="a1">链接1</a>
    <a href="" id="a2">链接2</a>
    <a href="" id="a3">链接3</a>
    <a href="" id="a4">链接4</a>
    <a href="" id="a5">链接5</a>
</div>

</body>
</html>

21.绝对定位和固定定位

绝对定位

定位：基于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 #666 solid;
      padding: 0;
      position: relative;
    }
    #first{
      background-color: indianred;
      border: 1px red dashed;
    }
    #second{
      background-color:yellowgreen;
      border: 1px yellow dashed;
      position: absolute;
      left: 100px;
    }
    #third{
      background-color: deepskyblue;
      border: 1px blue dashed;

    }
  </style>

</head>
<body>

<div id="father">
  <div id="first">第一个</div>
  <div id="second">第二个</div>
  <div id="third">第三个</div>
</div>

</body>
</html>

固定定位 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){/*fixed,固定定位*/
            width: 50px;
            height: 50px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>

</head>
<body>

<div>div1</div>
<div>div2</div>

</body>
</html>

22.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 height="200" width="200" src="images/jibu.jpg" alt=""></li>
        <li class="tipText">学习微服务找棘布</li>
        <li class="tipBj"></li>
        <li>时间：2024-07-30</li>
        <li>地点：月球一号基地</li>
    </ul>
</div>

</body>
</html>

opacity:0.5; 背景透明度

#content{
    width: 200px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px black solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;/*去掉圆点*/
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBj{
    position: absolute;
    width: 200px;
    height: 25px;
    top: 180px;
}
.tipText{
    color: white;
    /*z-index: 999;*/
}
.tipBj{
    background: black;
    /*opacity: 0.5;!*背景透明的*!*/
    filter: Alpha(opacity=50);
}