CSS学习笔记

目录

一、初识CSS

1.1 CSS是什么

1.2 CSS发展史

1.3 CSS的三种导入方式

1.3.1 内部样式：

1.3.2 外部样式（推荐使用）：

1.3.3 行内样式

二、CSS选择器⭐

2.1 三种基本选择器

2.1.1 标签选择器

2.1.2 类选择器

2.1.3 ID选择器

 2.2 层次选择器

2.2.1 后代选择器 （空格）

2.2.2 子选择器 （>）

2.2.3 相邻兄弟选择器 （+）

2.2.4 通用兄弟选择器 (~)

2.3 结构伪类选择器（:）

2.4 属性选择器（常用）⭐

三、美化网页（文字，阴影，超链接，列表）

3.1 概述

3.2 字体样式

3.3 文本样式

3.4 文本阴影（text-shadow）

3.5 超链接伪类(a:hover)

3.6 列表

3.7 背景

3.7.1 背景颜色（background-color）

3.7.2 背景图片（background-image）

3.8 渐变（Gradients）

3.8.1线性渐变

3.8.2 径向渐变

四、盒子模型⭐

4.1 什么是盒子模型

4.2 边框（border）

4.3 内、外边距（padding、margin）

4.4 圆角边框（border-radius）

4.5 盒子阴影（box-shaddow）

五、浮动（float）

5.1标准文档流

5.2 display

 5.3 float

5.4 父级边框塌陷问题

5.4.1 clear 清除浮动

 5.4.2 解决方案

5.5 对比

六、定位

6.1 相对定位（position:relative）

6.2 绝对定位（position:absolute）

6.3 固定定位（position:fixed）

6.4 z-index

七、网页动画（特效）

---

一、初识CSS

1.1 CSS是什么

        CSS：Cascading Style Sheet 层叠级联样式表

        CSS作用：表现（美化网页）

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

        CSS的优势：

                1、内容和表现分离

                2、网页结构表现统一，可以实现服用

                3、样式十分的丰富

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

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

        

1.2 CSS发展史

        CSS1.0

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

        CSS2.1    浮动，定位

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

1.3 CSS的三种导入方式

1.3.1 内部样式：

        在 中 用

我是标题

1.3.2 外部样式（推荐使用）：

        两种写法：

        ①链接式（推荐）：在html文件的中，用  引用css文件

        

     注：css文件夹与此 html 在同一个文件夹里

        index.html ：

    
    

    
    




我是标题

        css/style.css ：

h1 {
     color:red;
}

        ②导入式：在html中， 在 的 

        强烈推荐link方式，慎用import，区别如下：

        a.加载顺序差别：当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式，网速慢的时候明显。

        b.语法结构不同：@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，只能放入html中使用，可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

        c.兼容性差别：@import是CSS2.1才有的语法，只能在IE5+才能识别，link作为html元素，不存在兼容性问题

1.3.3 行内样式

        在标签元素中,编写一个style属性,编写样式即可

        

小标题

        注：不同样式，可以用 ；隔开

    三种样式的优先级：

        （就近原则）行内样式 > 内部样式 > 外部样式

二、CSS选择器⭐

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

2.1 三种基本选择器

2.1.1 标签选择器

        选择到页面上所有的这个标签的元素，格式：

        标签 { }       eg:     h1 { }

2.1.2 类选择器

        选择所有class属性一致的标签，跨标签，格式：

        .class的名称 { }

        好处：可以跨标签归类，可以复用

2.1.3 ID选择器

        选择该id对应的标签，格式：

        #id的名称 {  }

        特点：id 必须保证全局唯一！

三种选择器的优先级： id选择器>类选择器>标签选择器

三种基本选择器的代码如下：

    
    

    




标题1
标题2
标题3
标题4
标题5

页面效果截图如下：

 2.2 层次选择器

        本节所用代码body部分：        

    
p0
    
p1
    
p2
    
p3
    

        

            
p4
        
        

            
p5
        
        

            
p6
        
    
    
p7
    
p8

        效果截图：
        

2.2.1 后代选择器 （空格）

        在祖先元素 (parent) 的所有后代中，查询指定元素 (p)，格式：

parent p{}

        代码样例：

        效果截图：

        

2.2.2 子选择器 （>）

        在父元素 (parent) 的所有第一级子元素 (p) 中进行查找，格式：

parent>p{}

        代码样例：

body>p{
    background: gold;
}

        效果截图：

        

2.2.3 相邻兄弟选择器 （+）

        选中兄弟元素 (brother) 后面的某一个相邻兄弟元素 p，格式：

brother+p{}

        在本节开始的body部分，p1、p7均设有class="study"，以便学习兄弟选择器，style部分代码如下：

        效果截图：

        

2.2.4 通用兄弟选择器 (~)

        选中兄弟元素（brother）后面的所有的兄弟元素 p，格式：

brother~p{}

        代码样例：

        效果截图：

        

2.3 结构伪类选择器（:）

        伪类：用于定义元素的特殊状态（。用" : " ）

        例如，它可以用于：

• 设置鼠标悬停在元素上时的样式（hover）
• 为已访问和未访问链接设置不同的样式
• 设置元素获得焦点时的样式

        代码格式：

selector:pseudo-class {
  property: value;
}

        代码样例：css部分：

/*1. ul 的第一个子元素 */
ul li:first-child{
    background: red;
}

/*2. ul 的最后一个子元素*/
ul li:last-child{
    background: yellow;
}

/*3. 选中p1 : 定位到父元素，选择 其子元素的二个元素
  选择当前p元素的父元素，再选该父元素的第一个子元素，并且是当前元素才生效
  按照子元素的顺序找
*/
p:nth-child(2){
    background: pink;
}

/*4. 选中p2：定位到父元素下的 p元素的第二个
  按照类型的顺序找
*/
p:nth-of-type(2){
    background: orange;
}

        效果截图：

        

2.4 属性选择器（常用）⭐

        选择具有特定属性的HTML元素样式，id与class 的结合

=   绝对等于

*= 包含这个元素即可     eg:   [title~=flower] -->

~= 独立包含这个元素    eg:  [title~=flower] -->

|= 只包含这个元素         eg:   [title|=flower] -->

^= 以这个元素开头

$= 以这个元素结尾

        代码示例：

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

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

/* class中有hello的元素 */
a[class*=hello]{
    background: pink;
}

/* herf中以http开头的元素 */
a[herf^=http]{
    background: skyblue;
}

/* herf中以com 结尾的元素 */
a[herf$=com]{
    background: lightgreen;
}

三、美化网页（文字，阴影，超链接，列表）

3.1 概述

   CSS的作用：

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

   span标签：用来组合文档中的行内元素，重点要突出的字，使用span套起来

    
    

    





欢迎学习Java

3.2 字体样式

 /* 字体样式
          font-family：字体
          font-size：字体大小
          font-weight：字体粗细
          color：字体颜色
        */

代码示例：

#title1{
    font-size: 50px;
}

body{
    font-family: 楷体,Arial;
    color: orange;
}
h1 {
    font-size: 20px;
    font-weight: bolder;
}

3.3 文本样式

1. 颜色：  ①单词 --> color:red    ②RGB(0~F) --> color:#000000       ③RGBA(加透明度)--> color:rgba(0,225,225,0.5)
2. 文本对齐的方式⭐： text-align:center      可设置居中、左、右
3. 首行缩进⭐： text-indent:2em    单位：em(字)、px(像素)
4. 行高⭐： line-height:30px      和块的高度一致就可以上下居中（line-height=height）
5. 装饰：text-decoration      underline | line-through | overline 下划线
6. 文本图片对齐:   参照物 a b --> img,span{ vertical-align:middle; }  

3.4 文本阴影（text-shadow）

/*基础的文本阴影效果
 text-shadow: 水平偏移，垂直偏移，阴影半径，阴影颜色
*/
#price{
    text-shadow: 5px  5px  5px #FF0000;
}

        第一个值 （必选）表示 水平阴影的位置，允许负值

        第二个值（必选） 表示 垂直阴影的位置，允许负值

        第三个值（可选） 表示 模糊的距离

        第四个值（可选） 表示 阴影的颜色

        效果：

3.5 超链接伪类(a:hover)

        在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示

        /*未访问的链接的颜色*/
        a:link{
            color: #0000FF;
        }
        /*链接访问后的颜色*/
        a:visited{
            color: mediumpurple;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: orange;
        }
        /*鼠标点击未释放时的状态*/
        a:active{
            color: lightgreen;
        }

        注意：

        a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

        a:active 必须被置于 a:hover 之后，才是有效的。

3.6 列表

        css 列表属性

属性	描述
list-style	把所有列表的属性设置与一个声明中
list-style-image	把图片设置为列表项标志
list-style-position	设置列表中列表标志的位置
list-style-type	设置列表项标志的类型

        举例：

ul li{
    height: 30px; /*行高*/
    /*list-style-type 标记类型
      none 去掉原点
      circle  空心圆
      decimal 数字
      square 正方形*/
    list-style-type: square;
    
    /*list-style-position 标记位置
      inside:列表项目标记放在文本以内
      outside:默认标记位于文本左侧*/
    list-style-position: outside;

    /* list-style-image用图片替换标记 */
    list-style-image:url("../image1.jpg") ;

    text-indent: 1em;
}

3.7 背景

3.7.1 背景颜色（background-color）

body {
    background-color:#11aaaa;
}

        颜色值的定义三种方式： #FF0000    rgb(255,255,255)  red

3.7.2 背景图片（background-image）

        默认情况下，背景图片以平铺重复显示

body{
    background-image:url("../image1.jpg");
}

    1、平铺设置（background-repeat）

body{
    background-image:url("../image1.jpg");
    background-repeat: repeat-x;/*水平方向*/
}

        repeat-x：只水平方向平铺        repeat-y：只垂直方向平铺         no-repeat：不重复

   2、设置图片位置（background-position）

body{
    background-image:url("../image1.jpg");
    background-repeat: no-repeat;
    background-position: 200px top;/*中间用空格*/
}

        第一个值是水平方向，可以写像素值表示离左边有多远，也可以用 left  right  center来表示

        第二个值是垂直方向，可以写像素值表示离上边有多远，也可以用 top  bottom  center表示

        注：中间用 空格 隔开，如果仅指定一个，其他值默认center

        还有一种写法是用百分比(x%  y%)表示， 左上角是0% 0% 右下角是 100% 100%，默认值是0% 0%  若仅指定一个，其他值默认为50%

    3、联合设置背景（background）

 /* 将背景设置在一起
    颜色 图片 图片位置 平铺方式*/
    background: red url("../image1.jpg") 270px 10px no-repeat;

        用background，所用值 中间用 空格 隔开即可

3.8 渐变（Gradients）

        一个比较好的设置渐变色的网站：Grabient

3.8.1线性渐变

     语法：

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

        direction: 设置角度；

        color: 颜色，可以设置多个渐变颜色，方式同文字的设置方法，有三种：

                ①单词 --> red    ②RGB(0~F) -->#000000       

                ③RGBA(加透明度)--> rgba(0,225,225,0.5)

    1、角度设置

       ①预定方向

        默认是从上到下，不用设置direction。从红色过渡到黄色 ，如下所示：

background-image: linear-gradient(red,yellow);

        

        也可以通过单词设置direction，来设定不同的角度，如

to right 从左到右 ，  to bottom  从上到下，  to top  从下到上……

to bottom right  从左上 到 右下   …… 

          例如：从右上到左下，从红色过度到黄色 ，示例：

background-image: linear-gradient(to bottom left,red,yellow);

         

       ② 自定义方向

        

         如图所示，0deg 表示从下到上， 90deg 表示从左到右，-90deg 表示从右到左……

         例如：从右下到左上（-45deg） 从透明到粉色再到黄色：

background-image: linear-gradient(-45deg, rgba(255,0,0,0), pink, yellow);

          

    2、设置颜色所占比例

        在颜色后加上百分比，设置改颜色所占的比重，如下所示：

background-image: linear-gradient(-45deg, red 50%, pink, yellow);

        

3.8.2 径向渐变

        语法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

        shape：形状，circle（圆形）、ellipse（椭圆，默认）

        size：  渐变的大小，closest-side    farthest-side    closest-corner   farthest-corner

        ①渐变的大小（size）

                closest-side:半径为从圆心到最近边

                closest-corner:半径为从圆心到最近角

                farthest-side:半径为从圆心到最远边

                farthest-side:半径为从圆心到最远角

        如下，圆心为（30%，60%）的地方，如果用colset-color时，半径就是，圆心到最近的角（左下角）的距离：

        

    background-image: radial-gradient( closest-corner at 30% 60% ,red 5%, yellow 15%, green 60%);

        ​​​​​​

四、盒子模型⭐

4.1 什么是盒子模型

         所有html元素都可以看作一个盒子，封装周围的HTML元素，

         包括 边距、边框、填充和实际内容

           

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

4.2 边框（border）

        可以设置border 的 粗细（width）、样式（style）和颜色(color)

        可以合并设置

/*border:粗细、样式、颜色*/
#box{
     width: 300px;  /*设置宽度*/
     border: 1px  solid  red ; /*设置边框*/
}

4.3 内、外边距（padding、margin）

        padding、maigin的属性值的个数可以是

•  4个值（上、右、下、左） 
•  3个值（上、左右 、下）
•   2个值（上下、左右）
•   1个值（4个边距统一设置）

        可能的值的：

• auto：依赖于浏览器，自动
• 使用固定值：例如100px，单位可以是 px pt  em等
• 使用百分比：  如30%

        使用技巧：  巧用magin，使盒子左右居中：

        margin:0 auto

        注：margin 可以使用负值，重叠内容

        也可以进行单独边的设置，如下图：

#box{
     width: 300px;  /*宽度*/
     border: 1px  solid  red ; /*边框*/
     margin: 100px auto; /*外边距，左右居中*/
     padding-left:20px;
}

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

                margin+border+padding+内容宽度

                

4.4 圆角边框（border-radius）

    border-radius 值的个数可以为

•  4个： 左上   右上  右下  左下  （顺时针）
•  3个： 左上   右上和左下   右下
•  2个： 左上和右下      右上和左下
•  1个： 适用于所有四个角

        代码：

    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        /*圆角边框: 左上 右上 右下 左下（顺时针）*/
        border-radius: 50px 20px 10px 0;
    }

        如图：

        如果要设置成圆圈，则让圆角=半径

        注：border-radius也可以用来设置图片

4.5 盒子阴影（box-shaddow）

    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        /*圆角边框: 左上 右上 右下 左下（顺时针）*/
        /*若要设置成圆圈：圆角=半径*/
        border-radius: 100px  ;
        /*设置阴影*/
        box-shadow: 10px 10px 10px yellow ;
    }

        如图：

五、浮动（float）

5.1标准文档流

    1、标准文档流定义

        文档流是指元素排版布局郭恒忠，默认自动从左往右、        从上往下的流式排列方式

                eg：高矮不齐时候，底边对齐  /  一行写不下时候，自动换行

   2、等级分类

        块级元素：独占一行，不能与其他元素并列，能设置宽高

        h1~h6   p    div  列表 ……

        行内元素：不独占一行，能与其他元素并排，不能设置宽高，默认宽度为文字宽度

        span    a     img    strong……

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

5.2 display

        display属性规定元素应该生成的框的类型，也是一种实现行内元素排列的方式，但是我们更多使用float

        常用属性值：

        none：此元素不会被显示

        block：显示为块元素，独占一行

        inline：行内元素，可以内联，即可以在一行，元素前后没有换行符（默认）

        inline-block：行内块元素，也可以内联，(能保证所有块元素大小相同，固定大小)

        用途：例如ul  li元素，本身是block  但是 可以用下列代码，将各个li 设置为一行，用于上侧导航栏。

        li{
            display: inline-block;
        }

        如图：

 5.3 float

        浮动（float），会使元素向左或向右移动，其周围的元素也会重新排列

    1、左右浮动

        一个浮动的元素，会尽量向左或向右移动，直到碰到 框 或者另一个浮动元素的边框为止

        css代码:        

img {
    float:right;
}

        html代码如下：

    
浮动演示，让图片一直浮动在右侧，绕开文本
    

        
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
    

        效果如图：        

        

5.4 父级边框塌陷问题

5.4.1 clear 清除浮动

        指定元素的某侧不允许浮动，属性值：

        right：右侧不允许有浮动元素

        left： 左侧不允许有浮动元素

        both：两侧都不允许有浮动元素

        none：允许浮动元素出现在两侧，默认值

        inherit：从父元素继承clear属性的值

        css 代码如下：

        div{
            margin:10px;
            padding: 5px;
        }
        #father{
            border: 3px solid red;
        }
        .layer01{
            border: 1px blue dashed;
            display: inline-block;
            float: left;
        }
        .layer02{
            border: 1px pink dashed;
            display: inline-block;
            float: left;

        }
        .layer03{
            border: 1px orange dashed;
            display: inline-block;
            float: right;
        }
        .layer04{
            border: 1px greenyellow dashed;
            display: inline-block;
            float: right;
            clear: both;
        }

        html代码如下：

    
浮动演示，让图片一直浮动在右侧，绕开文本

        

        

        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        

        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        这里有很多字。这里有很多字。这里有很多字。这里有很多字。
        

            浮动的盒子可以左右浮动，直到碰到边缘为止
        

        效果截图：

        如图所示，例如 layer04  是向右浮动，但是右侧有layer03时候，会自动换到下一行，

        并且，很明显，用过float元素后，父类元素出现了塌陷。

        .clear{
            clear: both;
            margin:0;
            padding: 0;
        }

 5.4.2 解决方案

     1、增加父级元素的高度（不推荐）

           把父类元素设的足够高，不推荐使用

     2、浮动元素后增加一个空的div，清除浮动

            在父类元素内部的最后，即layer04之后再加入一个空的div，然后清除该div左右的浮动即可。

            html 增加的代码如下：

            css增加的代码如下：

        .clear{
           clear: both;
            margin:0;
            padding: 0;
        }

           效果如下：

    3、用overflow去解决

        在父级元素中增加一个 overflow: hidden

        #father{
            border: 3px solid red;
            overflow: hidden;
        }

        overflow  经常用于列表显示不完全的时候的滑轮，属性选scroll

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

        目前比较认可的一种方式，通过设置父类的 after  引入一个空内容，并且清除左右浮动，块类型设置为block即可。

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

    小结（常考）：⭐

        方法1  设置父元素的高度

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

        方法2   浮动元素后边增加一个空div

                简单，但是代码中应尽量避免空div

        方法3   overflow

                简单，但是下拉的场景应避免使用

        方法4  父元素添加一个伪类 :after（推荐）

                写法稍微复杂一点点，但是没有副作用

5.5 对比

        display    方向不可以控制

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

六、定位

6.1 相对定位（position:relative）

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

       top：-20px    负数表示朝着指定的方向，即向上 20px

       bottom: 20px    整数表示远离指定的方向，这里也是向上20px

       left: -30px      同理，表示向左30px

        right: -20px   同理，表示向右30px

注：因为原来的位置保留，所以会产生父类塌陷的情况

        初始效果图：

        

         加了position之后，代码如下：

        #father{
            border: 1px red solid;
            margin: 10px;
            padding: 10px;
        }
        #first{
            margin: 10px;
            background-color: orange;
            position: relative;
            top:-20px /*向上移动20px*/
        }
        #second{
            margin: 10px;
            background-color: pink;
            position: relative;
            left: -20px;/*向左移动20px*/
        }
        #third{
            margin: 10px;
            background-color: lightgreen;
            position: relative;
            bottom: 10px;/*远离底部10px，即向上移动10px*/
        }

          如图所示：
        

  狂神留的作业：

• 使用
  和超链接布局页面
• 每个超链接宽度和高度都是100px，背景颜色是粉色，鼠标指针移上去时变为蓝色
• 使用相对定位改变每个超链接的位置

  自己做的：

    
    
    



    链接1
    链接2
    链接3
    链接4
    链接5

        效果截图： 

                

6.2 绝对定位（position:absolute）

        定位：基于XXX定位，上下左右

        1、假设父级元素存在定位，我们通常相对于父级元素定位

        2、若没有父元素定位，则相对于初始状态下的浏览器边界定位，若滑轮滚动，位置还会变，若调整浏览器大小，位置不变

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

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

        代码同6.3 中一起给出

6.3 固定定位（position:fixed）

        固定在某个位置不会移动

        绝对定位和固定定位对比如下：

        html代码：

    

        
1、相对于父类
    
    
2、相对于浏览器
    
3、固定定位

        css部分代码：
 

        body{
            height: 1000px;
        }

        /*1、相对于父类*/
        #father{
            border: 1px solid red;
            width: 100px;
            height: 100px;
            padding: 10px;
            /*父类有定位属性的情况下，绝对定位相对于父类*/
            position: relative;
        }
        #no1{
            background-color: pink;
            position: absolute;
            bottom: 1px;
            right: 1px;
        }

        /*2、绝对定位：相对于初始状态下的浏览器*/
        #no2{
            background-color: lightgreen;
            position: absolute;
            bottom: 1px;
            right: 1px;
        }

        /*3、固定定位：固定在一个位置*/
        #no3{
            background-color: orange;
            position: fixed;
            bottom: 100px;
            right: 1px;
        }

        效果截图如下：        

6.4 z-index

        z-index属性，指定一个元素的堆叠顺序，默认是0，最高∞

        可以搭配透明度（opacity）使用，实现叠层的效果

        html代码：

    

        

            
        
        
我是一只猫
        

        
时间：2022年2月28日
        
地点：图书馆
    

        CSS代码：

        ul,li{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        #text, #background{
            position: absolute;/*设置成绝对路径 才好设置层级*/
            width: 200px;
            height: 25px;
            top: 180px ;
        }
        #text{
            color: white;
            z-index: 1;
        }
        #background{
            background: black;
            z-index: 0;/*层级设置为比text文本低一层*/

            opacity: 0.5; /*背景透明度*/
            filter: Alpha(opacity=50)/*这个为IE专用的属性，因为它不支持opacity属性，为了保证浏览器的兼容性，建议使用时俩个都写。*/
        }

        效果图：

                

七、网页动画（特效）

        自学网站：菜鸟教程 CSS3 动画 | 菜鸟教程