前端-CSS
一、CSS的引入方式
二、选择器
三、文本属性与字体属性
background
四、定位：

1.行内样式

<p style="color: blue;">这是一个p标签！</p>

2.内嵌样式

<style>
     p {
         color: red;
     }
 </style>

3.外联样式

　　1.链接式（常用）

<link rel="stylesheet" href="index.css">

　　2.导入式

<!--导入式-->
    <style type="text/css">
    @import url('./index.css');
    </style>

注意：@import url()必须写在文件最开始的位置。

链接式与导入式的区别

1、<link/>标签属于XHTML,@import是属性css2.1
2、使用<link/>链接的css文件先加载到网页当中，再进行编译显示
3、使用@import导入的css文件，客户端显示HTML结构，再把CSS文件加载到网页当中
4、@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的

二、选择器

1.基础选择器

前端-CSS
一、CSS的引入方式
二、选择器
三、文本属性与字体属性
background
四、定位：

“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素

　　1.通用元素选择器 *: 所有的标签都变色

　　2.标签选择器：匹配所有使用p标签的样式 p{color:red}

　　3.id选择器：匹配指定的标签 #p2{color:red}

　　4.class类选择器：谁指定class谁的变色，可选多个 .c1{color:red} 或者 div.c1{color:red}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*标签选择器*/
    /*所有标签是div的都变了*/
    div{
        font-family: 华文彩云;
    }

    /*id选择器*/
    /*给id='c2'的设置样式，id一般不常用。因为id是不能重复的。*/
    #c2{
        background-color: blueviolet;
        font-size: larger;
    }

    /*calss类选择器*/
    .a1{
        color: red;
    }
    或
    p.a1{
        color: blue;
    }

    /*通用元素选择器*/
    *{
        background-color: aquamarine;
        color: red;
    }
</style>
<body>
<div id="c1">
    <div id="c2">
        <p>hello haiyan</p>
        <div class="a1">哇啊卡卡</div>
    </div>
    <p>hi haiyan</p>
</div>
<span>啦啦啦</span>
<p>p2</p>
<div class="a1">
    <p class="a2">你好啊</p>
    <h1>我是h1标签</h1>
</div>
</body>
</html>
复制代码

2.组合选择器

1.后代选择器 (不分层级，只让p标签变色) .c2 p{color:red} 
    2.子代选择器（只在儿子层找） .c2>p{color:red}
    3.多元素选择器：同时匹配所有指定的元素  .div,p{color:red}
　　　　　　　　　　　　　　　　　　　　　　　或者
　　　　　　　　　　　　　　　　　　　　　　　　.c2 .c3,.c2~.c3{
　　　　　　　　　　　　　　　　　　　　　　　　　　　color: red;
　　　　　　　　　　　　　　　　 　　　　　　　　　　 background-color: green;
　　　　　　　　　　　　　　　　　　　　　　　　　　　font-size: 15px;
　　　　　　　　　　　　　　　　}

 
    不常用    
　　3.毗邻选择器（紧挨着，找相邻的,只找下面的，不找上面的）.c2+p{color:red}
　　4.兄弟选择器：同一级别的，离得很近的.c2~p{color:red}
　  5.多元素选择器： .c2 .c3,.c2~ .c3{ color:red }

.a1 .a2, .a1~p{
 2             color: blue;
 3             font-size: 15px;
 4             background-color: red;
 5         }
 6         #下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用
 7         .a1 .a2{
 8             color: blue;
 9             font-size: 15px;
10             background-color: red;
11         }
12         .a1~p{
13              color: blue;
14              font-size: 15px;
15              background-color: red;
16         }

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style>
        /*后代选择器(部分层级)：选择所有类为a1的p标签*/
        .a1 p{
            background-color: blue;
        }

        /*子代选择器*/
        .c2>p{
            color: crimson;
        }

        /*毗邻选择器*/
        .a2+p{
            background-color: aquamarine;
        }

        /*兄弟选择器:同一级别的，离得很近的*/
        .a2~p{
            background-color: blueviolet;
        }

        /*多元素选择器：同时匹配所有指定的元素*/
        .div,p{
            background-color: aquamarine;
        }

        .a1 .a2, .a1~p{
            color: blue;
            font-size: 15px;
            background-color: red;
        }
        #下面的两个就相当于上面的一个，用逗号隔开可以减少代码的重用
        /*.a1 .a2{*/
            /*color: blue;*/
            /*font-size: 15px;*/
            /*background-color: red;*/
        /*}*/
        /*.a1~p{*/
             /*color: blue;*/
             /*font-size: 15px;*/
             /*background-color: red;*/
        /*}*/
    </style>
</head>
<body>
<p>hi say hello........</p>
<div class="a1">
    <div class="a2">
        <p id="s1">过去永远是画面</p>
        <div class="c2">
            <p>那片海</p>
        </div>

    </div>
    <p>huhhdhshsdfdfgfdgd</p>
    <h1 class="a3">第一章</h1>
    <h2>第二章</h2>
</div>
<div class="a1">
    <em>lalalalla啦啦啦啦案例</em>
    <div class="a2">
        <p>hohou后</p>
        <b>海燕&reg;</b>
    </div>
</div>
<h5>你好</h5>
<p>好好好</p>
</body>
</html>

3.属性选择器

1 E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
 2                 比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
 3  
 4  
 5 E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }
 6  
 7  
 8 E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素
 9                 td[class~=”name”] { color:#f00; }
10  
11 E[attr^=val]    匹配属性值以指定值开头的每个元素                    
12                 div[class^="test"]{background:#ffff00;}
13  
14 E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}
15  
16 E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

index.css

/*1.匹配所有haiyan属性的，并且只是在div标签的*/
div[haiyan]{
    color: yellowgreen;
}


/*2.匹配所有haiyan=wawa的并且只是在div标签的*/
div[haiyan=wawa]{
        color: aqua;
    }

/*2.上面的优先级和下面的优先级本应该是一样的*/
/*应该显示下面的，但是，由于上面查找的范围
比下面的范围广，所以它会把上面的也显示了。*/



/*3.匹配所有属性为haiyan，并且具有多个空格分割的值，*/
/*其中一个只等于wawa的*/
 div[haiyan~=wawa]{
            color: blueviolet;
        }

 /*4.匹配属性值以指定值开头的每个元素，
 并且是在div标签里的*/
div[haiyan^=w]{
            background-color: aquamarine;
        }
div[egon^=w]{
            background-color: aquamarine;
        }

/*5.匹配属性值以指定值结尾的每个元素  */
div[haiyan$=a]{
            background-color: blueviolet;
        }

/*6.匹配属性值中包含指定值的每个元素 */
div[haiyan*=a]{
            background-color: blueviolet;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div>
    <div haiyan = "  wawa ">你好</div>
    <div haiyan = "wawa">哎呀呀啊</div>
    <div egon = "wawa">da大</div>
    <div haiyan="cccc">啊啊哈</div>
</div>
</body>
</html>

4.伪类

anchor伪类：专用于控制链接的显示效果

'''
        a:link（没有接触过的链接）,用于定义了链接的常规状态。

        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
        
        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
        
        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
        
        伪类选择器 : 伪类指的是标签的不同状态:
        
                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
        
        a:link {color: #FF0000} /* 未访问的链接 */
        
        a:visited {color: #00FF00} /* 已访问的链接 */
        
        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
        
        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

'''

1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>伪类</title>
 6     <style>
 7         /*没访问之前*/
 8         a:link{
 9             color: blue;
10         }
11         /*鼠标放在链接上的状态*/
12         a:hover{
13             color: chartreuse;
14         }
15         /*访问过后*/
16         a:visited{
17             color: red;
18         }
19         /*鼠标点击的时候*/
20         a:active{
21             color: aqua;
22         }
23 
24         /*在p标签属性为c2的后面加上内容*/
25         p.c2:after{
26             content: 'hello';
27             color: chartreuse;
28         }
29 
30         /*在所有的p标签的前面加上内容*/
31         p:before{
32             content: '你猜';
33             color: forestgreen;
34         }
35         span{
36             background-color: aqua ;
37             /* 100px;*/
38             /*height: 50px;*/
39             /*span标签是一个内联标签，设置了窗宽不起作用*/
40            /*它是跟着你设置的文本的大小变化的*/
41         }
42     </style>
43 </head>
44 <body>
45 <p>你是谁？</p>
46 <p class="c2">你是谁？</p>
47 <p class="c3">你是谁？</p>
48 <a href="" id="c1">lalala</a>
49 <span>zzzz小</span>
50 </body>
51 </html>

before after伪类

:before    p:before       在每个<p>元素之前插入内容     
 :after     p:after        在每个<p>元素之后插入内容     

例：p:before{content:"hello";color:red;display: block;}

5.css优先级和继承

css的继承

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

有一些属性是可以继承下来： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

层叠性

层叠性：权重的标签覆盖掉了权重小的标签

权重：谁的权重大，浏览器就会显示谁的属性

数：id的数量 class的数量标签的数量，按此顺序

/*1  0  0 */显示红色
#box{


    color: red; 
}
/*0  1  0*/
.container{
    color: yellow;
}
/*0  0  1*/
p{
    color: purple;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层叠性2</title>
    <style type="text/css">
        /*2 0 1*/
        #box1 #box2 p{
            color:yellow;
        }
        /*1 1 1*/
        #box2 .wrap3 p{
            color:red;
        }
        /*1 0 3*/
        div div #box3 p {
            color:purple;
        }

        /*0 3 4*/
        div.wrap1 div.wrap2 div.wrap3 p{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>再来猜猜我是什么颜色？</p>
            </div>
        </div>
    </div>

</body>
</html>

显示黄色

层叠性权重相同的处理

当权重一样的时候是以后设置的属性为准。前提是权重一样，后来者居上

总结：
先看有没有被选中，如果选中了，就数数（ id,class,标签的数量）谁的权重大，就显示谁的属性。权重一样大，后来者居上。
如果没有被选中，权重为0，如果属性都是被继承下来的，继承的为0，若权重都是0，'就近原则'：谁描述的近，就显示谁的属性。

第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同

第二种现象：第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。

第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'

!important 的使用

!important :设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。尽量不用!important,因为使用它会影响页面的布局

盒模型

"box model"这一术语是用来设计和布局时使用

盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。

盒模型的属性

width：内容的宽度

height: 内容的高度

padding：内边距，边框到内容的距离

border: 边框，就是指的盒子的宽度

margin：外边距，盒子边框到附近最近盒子的距离

盒模型的计算

如果一个盒子设置了padding，border，width，height，margin（先不设置margin）

盒子的真实宽度=width+2*padding+2*border

盒子的真实宽度=height+2*padding+2*border

要保持盒子真实的宽度，那么加padding就一定要减width，减padding就一定要加width。真实高度一样设置。

padding

padding：就是内边距的意思，它是边框到内容之间的距离

padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样

background-color这个属性将填充所有的border以内的区域

padding的设置

padding有四个方向，分别描述4个方向的padding。

描述的方法有两种

1、写小属性,分别设置不同方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

2、写综合属性，用空格隔开

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

默认有padding的标签

比如ul标签，有默认的padding-left值。

那么我们一般在做站的时候，是要清除页面标签中默认的padding和margin。以便于我们更好的去调整元素的位置。

我们现在初学可以使用通配符选择器，这种方法效率不高

*{
  padding:0;
  margin:0;    
}

我们要使用并集选择器选中页面中应有的标签

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,
        fieldest,legend,input,button,textarea,p,blockquote,th,td{
        margin:0
        padding:0}

边框-border

border:边框的意思，描述盒子的边框

边框有三个要素：粗细线性样式颜色

border-radius: 5px; 设置圆角

写border的方法

按照三要素写：
border- 3px;
border-style: solid;
border-color: red;

bordr: 10px solid red;综合写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>border制作三角形</title>
    <style type="text/css">
        /*用border制作三角*/
        div{
            width:0;
            height:0;
            border-bottom:200px solid red;
            border-left:200px solid transparent;
            border-right:200px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>

</body>
</html>

margin:外边距。表示边框到最近盒子的距离。

/*表示四个方向的外边距离为20px*/
margin: 20px;

/*表示盒子向下移动了30px*/
margin-top: 30px;

/*表示盒子向右移动了50px*/
margin-left: 50px;

什么是标准文档流

指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列

脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会把脱离文档流的元素当做不存在而进行定位。

标准文档流下有哪些微观现象？

1.空白折叠现象：多个空格会被合并成一个空格显示到浏览器页面中

2.高矮不齐，底边对齐：文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐

3.自动换行，一行写不满，换行写：如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。

css中一共有三种手段，使一个元素脱离标准文档流：

（1）浮动
（2）绝对定位
（3）固定定位

块级元素与行内元素

CSS块级元素和行内元素的分类：

行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。

块级元素：所有的容器级标签都是块级元素，还有p标签。

块级元素可以转换为行内元素：

给一个块级元素（比如div）设置：

display: inline;

这个标签将立即变为行内元素，此时它和一个span无异，inline就是“行内”，设置宽高无效，可并排

行内元素转换为块级元素：

给一个行内元素（比如span）设置：

display: block;

这个标签将立即变为块级元素，此时它和一个div无异。block”是“块”的意思，设置宽度、高度，独占一行，若不设宽度，将充满整个父级。

/*隐藏标签，不占位置*/
            display:none;

/*隐藏当前的标签，占位置*/
            visibility:hidden;

浮动

浮动是css里面布局最多的一个属性

浮动四大特性：

1.浮动的元素脱标

2.浮动的元素互相贴靠

3.浮动的元素由"子围"效果：div浮动，文字围绕着div中的img围绕来　　

4.收缩的效果：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

清除浮动:

清除浮动的方法:

给父盒子设置高度
clear:both :给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both
伪元素清除法
overflow：hidden

常用：

伪元素清除法

.clearfix:after{
    /*必须要写这三句话*/
    content: '.';
    clear: both;
    display: block;
}
给浮动子元素的父盒子，也就是不浮动元素，添加一个clearfix的类，然后设置

overflow:hidden

overflow属性规定当内容溢出元素框时发生的事情。

margin塌陷问题

当给两个标准流下兄弟盒子设置垂直方向上的margin时，以大的数值为准，那么我们称这种现象叫塌陷.常见于不浮动的盒子垂直margin垂直方向的问题

给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。

margin：0 auto;

使用margin：0 auto;注意点：

1.使用margin: 0 auto;水平居中盒子必须有width，要有明确width，文字水平居中使用text-align: center;

2.只有标准流下的盒子才能使用margin:0 auto;

当一个盒子浮动了，固定定位，绝对定位 margin:0 auto,不能用

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

margin属性是描述兄弟盒子的关系，而padding描述的是父子盒子的关系

父盒子里有子盒子，可以选择padding，进行调整位置

三、文本属性与字体属性

文本属性

文本对齐

text-align 属性规定元素中的文本的水平对齐方式。

属性值：none | center | left | right | justify

文本颜色

color属性

文本首行缩进

text-indent 属性规定元素首行缩进的距离，单位建议使用em

文本修饰

text-decoration属性规定文本修饰的样式

属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)

行高

line-height就是行高的意思，指的就是一行的高度。

阴影

text-shadow：水平方向偏移量垂直方向偏移量模糊度阴影颜色

文字溢出

ext-overflow:clip | ellipsis

字体属性

字体大小 font-size：20px;

字体粗细:

字体系列:font-family

font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif

font 属性能够将font-size、line-height、font-family合三为一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

行高 line-height

单行文本垂直居中:

行高的高度等于盒子的高度，可以使当行文本垂直居中

多行文本垂直居中:

行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。

看共几行，文字占的总高度。看盒子高度，进行计算，算出合适的居中值。

vertical-align

定义行内元素的基线相对于该元素所在行的基线的垂直对齐

background

background-color属性表示背景颜色

background-color: rgb(0,0,0);
background-color: red;
background-color: #ff0000;

background-img:表示设置该元素的背景图片

background-repeat:表示设置该元素平铺的方式

background-position: 属性设置背景图像的起始位置。

background-attach :设置fixed之后，该属性固定背景图片不随浏览器的滚动而滚动

四、定位：

1.相对定位 2.绝对定位 3.固定定位

相对定位

相对于自己原来的位置定位

绝对定位

特性：

1.脱标 2.做遮盖效果，提成了层级。设置绝对定位之后，不区分行内元素和块级元素，都能设置宽高。

参考点(重点)：

一、单独一个绝对定位的盒子：页面的左上角或者首屏页面左下角为参考点来调整位置。

二、以父辈盒子作为参考点

1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点

2.如果父亲设置了定位，那么以父亲为参考点。

绝对定位的盒子居中

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*设置绝对定位之后，margin:0 auto;不起任何作用，如果想让绝对定位的盒子居中。当做公式记下来 设置子元素绝对定位，然后left:50%; margin-left等于元素宽度的一半，实现绝对定位盒子居中*/
        }

固定定位

固定当前的元素不会随着页面滚动而滚动

特性:

1.脱标 2.遮盖，提升层级 3.固定不变

参考点：

设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点

作用： 1.返回顶部栏 2.固定导航栏 3.小广告

练习：返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        p{
            width:100px;
            height:100px;
            background-color:red;
            position:fixed;
            bottom:100px;
            right:100px;
            line-height:100px;
            font-size:20px;
            text-align:center;
            color:#fff;
        }
    </style>
</head>
<body>
    <div>
        <p>返回顶部</p>
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
        <img src="./1.jpg" alt="">
    </div>
    <script src="./jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('p').click(function () {

                $('html').animate({
                    "scrollTop":0
                },2000)
            })
            
        })
    </script>
</body>
</html>

固定导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定导航栏</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        body{
            /*给body设置导航栏的高度，来显示下方图片的整个内容*/
            padding:49px;
        }
        ul{
            list-style:none;
        }
        a{
            text-decoration: none;
        }
        .wrap{
            width:100%;
            height:49px;
            background-color:#000;
            /*设置固定定位后，一定要加top与left属性    */
            position:fixed;
            top:0;
            left:0;
        }
        .wrap .nav{
            width:960px;
            height:49px;
            margin:0 auto;
        }
        .wrap .nav ul li{
            float:left;
            width:160px;
            height:49px;
            /*line-height:49px;*/
            text-align:center;
        }
        .wrap .nav ul li a{
            width:160px;
            height:49px;
            display:block;
            color:#fff;
            font:20px/49px "HanziPen SC";
        }
        .wrap .nav ul li a:hover{
            background-color:red;
            font-size:23px;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="nav">
            <ul>
                <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>
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
</body>
</html>

z-index

设置元素的堆叠顺序

四大特性

数值大的压盖住数值小
定位了的元素，才能有z-index,浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认值为0
从父现象：父辈的z-index起到决定性作用。父辈值小，子辈值再大也是小。

前端-CSS 一、CSS的引入方式 二、选择器 三、文本属性与字体属性 background 四、定位：