Css3详解

狂神说Java（CSS3）学习网址

	编译	归类
style	风格	css
index	索引	css
link	连接	css
import	进口	css
image	形象	css
.class	调用class选择器	选择器
#id	调用id选择器	选择器
body p{}	后代选择器	选择器
body>p{}	子选择器	选择器
.active + p{}	相邻兄弟选择器	选择器
.active ~ p{}	通用兄弟选择器	选择器
ul li:first-child{}	第一个子元素	结构-伪类选择器
ul li:last-child{}	最后一个子元素	结构-伪类选择器
p:nth-child(1){}	第一个是p的元素	结构-伪类选择器
p:nth-of-type(2){}	第二个所有元素	结构-伪类选择器
a[id=first]{}	= 绝对等于	属性选择器
a[class*=“links”]{}	*= 包含这个元素	属性选择器
a[href^=http]{}	^= 以这个开头	属性选择器
a[href$=pdf]{}	$= 以这个结尾	属性选择器
span	持续时间（重点要突出的字）	美化
font	字体	美化
family	家庭（字体种类）	font-
weight	重量，加重	font-
bold	加重，粗体	weight：
text-	文本	美化
align	排列	text-
center	居中
indent	缩进	text-
decoration	装饰	text-
underline	下
over	上
shadow	阴影	text-
line	线，行	美化
height	高度	line-
vertical	垂直
align	排列	vertical-
middle	中间
hover	悬停	a: 鼠标
active	积极，未释放	a: 鼠标
list	列表	美化
style	风格	list-
width	宽度	美化
height	高度	美化
background	背景	美化
repeat	重复	background-
linear	线性的	渐变
gradient	梯度，斜坡	linear-
margin	外边框	盒子
paddiong	内边框	盒子
border	边境，边框	盒子
solid	固体，实线	border
dashed	虚线	border
0 auto	上下为0，左右相等	border
display	显示	显示
block	块元素	display
inline	行内元素	display
inline-block	有原有元素，又有另外一种	display
float	浮动	浮动
clear	清楚，不允许有浮动	浮动
overflow	溢流	浮动
hidden	隐藏，多余的隐藏	overflow
auto	滚动条	overflow
after	防止浮动移动伪类	浮动
position	定位	定位
relative	相对定位	position
absolute	绝对定位	position
fixed	固定定位	position
z-index	图层	position
opacity	透明度	position

Styles
CSS是什么
CSS怎么用（快速入门）
CSS选择器（重点+难点）
美化网页（文字，阴影，超链接，列表，渐变…）
盒子模型
浮动
定位
网页动画（特效效果）

学习网站：runoob.com

1、什么是CSS

Cascading Style Sheel 层叠级联样式表

CSS：表明（美化网页）

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

发展史：

CSS1.0

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

CSS2.1 浮动，定位

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

1.1、CSS快速入门

style

创建文件规范格式

lesson01
- 1.我的第一个css程序
  - CSS文件
    - style.css
  - index.html

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style> 可以编辑css的代码，每一个声明，最好使用分号结尾
    语法：
      选择器{
          声明 1 ；
          声明 2 ；
          声明 3 ；
      }
        -->
    <link rel="stylesheet" href="css/style01.css">
	<!-- 使用lick 将css文件导入进来
		-->
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

 /*建议单独建立css文件
	这样即美观，也有助于查找，修改，复用
        */
h1{
        color: red;
        }

css的优势：

内容和表现分离
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录！（Vue不容易被收录）

1.2、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>
</body>
</html>

扩展：外部样式两种写法

链接式：

<!--链接式-->
    <link rel="stylesheet" href="css/style.css">

导入式：

@import 是CSS2.1 特有的！

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

优先级

就近原则

2、选择器

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

2.1、基本选择器

2.1.1、标签选择器

选择一类标签标签{}

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

<p>听狂神说</p>

</body>
</html>

2.1.2、类选择器 class

选择所有class 属性一致的标签，可以跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
    /*类选择器的格式 .class的名字{}
        好处，可以多个标题归类，是同一个class，可以复用
    */
        .T1{
        color:red;
        }
        .T2{
        color:yellow;
        }
    </style>
</head>
<body>
<h1 class="T1">标题1</h1>
<h1 class="T2">标题2</h1>
<h1 class="T1">标题3</h1>

<p class="T2">P标签</p>
</body>
</html>

2.1.3、id 选择器

全局唯一！ #id名字{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
    /*id选择器 ：id必须保证全局唯一！
    #id名字{}
    优先级：
    不遵循就近原则，固定的
    id选择器 > class选择器 > 标签选择器
    */
        h1{
        color:red;
        }
        .c2{
        color:blue;
        }
        #i3{
        color:green
        }
    </style>
</head>
<body>
<h1 class="c2" id="i3">标题1</h1>
<h1 class="c2">标题2</h1>
<h1>标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级

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

不遵循就近原则，固定的

2.2、层次选择器

2.2.1、后代选择器

在某个元素的后面，祖爷爷爷爷爸爸儿子

/*后代选择器*/
body p{
color:blue;
}

2.2.2、子选择器

一代，只指儿子

/*子选择器*/
body>p{
color:yellow;
}

2.2.3、相邻兄弟选择器

同辈，只有一个，相邻（向下）

/*相邻兄弟选择器*/
.active + p{
color:green;
}

2.2.4、通用兄弟选择器

同辈，向下所有，选中元素的向下所有兄弟元素

/*通用兄弟选择器*/
.active~p{
color:orange;
}

2.3、结构-伪类选择器

伪类-条

/*ul的第一个子元素*/
ul li:first-child{
color:blue;
}
/*ul的最后一个子元素*/
ul li:last-child{
color:green;
}

/*选择 p1:定位到父元素，选择当前的第一个元素
选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！顺序
*/
p:nth-child(1){
color:red
}
/*定位到父元素，下的p元素的第二个，类型        */
p:nth-of-type(2){
color:yellow;
}

a:hover{background:black}

2.4、属性选择器（常用）

id+class 结合

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

= 绝对等于

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

*= 包含这个元素

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

^= 以这个开头

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

$= 以这个结尾

/*选中href中以pdf结尾的元素*/
a[href$=pdf]{
background:green;
}

3、美化网页元素

3.1、为什么要美化网页

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

span标签：重点要突出的字，使用span套起来（只是普通标签，但常用span）

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

3.2、字体样式

font-family：字体可以同时设定英文和汉字两个字体

font-size: 字体的大小，px像素（Pixel），em相对长度尺寸

font-weight：字体粗细

color:字体颜色

可是直接使用font值，字体粗细，大小，行高，字体

font:bold 20px/50px Arial;

<style>	
	body{
    	font-family:"Arial Blacnk",楷体;
        color:blue;
	}
	h1{
    	font-size:50px;
	}
	.p1{
    	font-weight:bolder
	}
</style>

3.3、文本样式

颜色：color rgb rgba
文本对齐的方式：text-align:center
首行缩进：text-indent
行高：line-height 单行文字上下居中！line-height = height
装饰：text-decoration
文本图片水平对齐：vertical-align:middle

coloer:颜色

/*
颜色：
单词
RGB: #0~F（6位）
RGBA：	A（0~1）代表透明度
*/
<style>
	h1{
        color:rgba(0,255,255,0.5);
}
</styyle>

text-align:排版，居中，居右，居左left（默认）

text-indent:首行缩进

<style>
	h1{
        text-align:center;
        text-indent:2em;
}
</styyle>

line-height:行高，行高和块的高度一致时，就可以上下居中

<style>
	h1{
        /*块高*/
        height:300px;
        /*行高*/
        line-height:300px;
}
</styyle>

文本图片水平对齐

    <style>
    img,span{
    vertical-align:middle;
    }
    </style>
<body>
<p>
    <img src="a.png" alt="">
    <span>aaaa6669999</span>
</p>
</body>

text-decoration:装饰，

<style>
	h1{/* 下划线，中划线，上划线*/
        text-decoration:underline;
        text-decoration:line-through;
        text-decoration:overline;
        /*a标签，超链接去下划线*/
        text-decoration:none;
}
</styyle>

3.4、超链接伪类

a , a:hover主要使用

<style>
/*默认的颜色*/
	a{
    	text-decoration:none;	/*取消下划线*/
    	color:black;
	}
	/*鼠标悬停的状态（重点）*/
	a:hover{
        color:orange;
        font-size:50px;		/*悬浮变大*/
	}
	/*鼠标按住未释放的状态*/
	a:active{
    	color:green;    
	}
	/*阴影 ：阴影颜色，水平偏移（右+），垂直偏移（下+），阴影半径*/
	#1i{
        text-shadow:#blue 10px -5px 2px;
	}
</style>

3.5、列表

/*list-style
none 去掉原点
circle 空心圆
decimal 数字
square 正方形
*/
	ul li{
    	height:30px
        list-style:none;
        text-indent:1em;
	}

3.6、背景

背景颜色

背景图片

<style>
div{
    width:1000px;	/*宽度*/
    height:700px;	/*高度*/
    border:1px solid red;	/*边框，角弧度，边线（实线），颜色*/
    background-image:url("images/tx.jpg");
    /*导入图片，默认是全部平铺的 repeat*/
    .div1{
        /*平铺x轴*/
        background-repeat:repeat-x;
    }.div2{
        /*平铺y轴*/
        background-repeat:repeat-y;
    }.div3{
        /*不平铺*/
        background-repeat:no-repeat;
    }
}
</style>

练习

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zX7f1VK4-1619445897092)(D:\狂神\422.png)]

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

<div id="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">个护化妆</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅游</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

style

#nav{
    width:230px;
    background:yellow;
}
.title{
    font-size:20px;
    text-indent:1em;
    line-height:30px;
    background:red;
    /*颜色，图片，图片位置，平铺方式*/
    background:red url("../images/d.gif") 250px 10px no-repeat;
}
ul{
background:yellow;
}
ul li{
    list-style:none;
    text-indent:1em;
    line-height:30px;
    background-image:url("../images/r.gif");
    background-repeat:no-repeat;
    background-position:210px 2px;
}
a{
color:black;
font-size:14px;
text-decoration:none;
}
a:hover{
    color:orange;
    text-decoration:underline;
}

3.7、渐变

Grabient.com

逐渐改变颜色，主要分两种

径向渐变
圆形渐变

background-color:#FFFFFF;
background-image:linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%)

4、盒子模型

4.1、什么是盒子模型

margin: 外边距

paddiong: 内边距

border: 边距

4.2、边框

border：4px solid red;

边框的粗细
边框的样式
边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        /*body 总有一个默认的外边距，gin:0*/
        h2,ul,li,a,body{
        margin:0;   /*外边距，四个方向全部为0*/
        padding:0;  /*内边距，四个方向全部为0*/
        text-decoration:none;   /*下划线*/
        }
        #box{   /*宽，高*/
        width:300px;

        /*边框：粗细，实虚线，颜色*/
        border:4px solid red;
        }
        h2{
        font-size:22px;
        background:orange;
        color:white;
        line-height:70px;

        }
        form{
            background:orange;
        }
        /*大div下的小div，第一个input类型*/
       div div:nth-of-type(1) input{
            border:3px solid black;
        }
        div div:nth-of-type(2) input{
            border:3px dashed green;
        }
        div div:nth-of-type(3) input{
            border:3px solid black;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div class="y1">
            <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、内外边距

外边距的妙用：居中元素

margin:0 auto; ：上下为0，左右相等

margin:0; ：所有边距为零

margin:0 1; ：上下和左右

margin:0 1 2 3; ：上右下左

margin 属性的方向是由顺时针旋转，margin、border、paddiong一样

*盒子尺寸技术方式

你这个元素到底多大？

应该是：margin + border + padding + 内容宽度

不要应为制作 margin 最后导致原尺寸元素放不下

4.4、边框圆角

div{
    width:100px;
    height:100px;
    border:10px solid red;
    /* 左上 右上 右下 左下 ，顺时针方向*/
    border-radius:55px 55px 55px 55px
    /*两个元素时为：左上右下，右下左上*/
}

4.5、盒子阴影

div{
width:100px;
height:100px;
border:10px solid red;
    /*右 下 模糊度 颜色*/
box-shadow:10px 10px 80px yellow;
}

5、浮动

5.1、标准文件流

标准的文件流是自上而下，没有左右，类似于手机界面

块级元素：独占一行

h1~h6 p div 列表…

行内元素：不独占一行

span a img strong…

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

5.2、display

修改块行状态

/*  display 显示
    block 块元素
    inline 行内元素
    inline-block 即保持原有元素，还添加另外一种元素
	none	不是块元素，也不是行内元素，会消失不见，但代码存在。
*/
    div{
    width:100px;
    height:100px;
    border:1px solid red;
    display:inline-block;
    }
    span{
    width:100px;
    height:100px;
    border:1px solid red;
    display:inline-block;
    }

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

5.3、float

左右浮动 float

将图片浮起，移动。但是浮起的图片会挤开其他元素块，同时会跟随网页移动！！

float:left;

float:right;

5.4、父级边框塌陷的问题

5.4.1、防止浮动移动

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

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

clear:both; 两侧不允许有浮动元素

clear:none;

5.4.2、解决方案

1、增加父级元素的高度

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

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

/*新建一个div*/
<div class="clear"></div>	
.clear{
	clear:both;
	margin:0;
	padding:0;
}

3、overflow

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

overflow:auto; 滚动条

4、在父类添加一个伪类：after

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

5.4.3、小结

设置父元素的高度
简单，元素假设有了固定的高度，就会被限制
浮动元素后面添加空div
简单，代码中尽量避免空div
overflow
简单，下拉滚动条的一些场景避免使用
在父类添加一个伪类：after
写法稍微复杂，但是没有副作用

5.5、display对比float

display
方向不可以控制
float
浮动起来的话会脱离标准文档流，所有要解决父级边框塌陷的问题

6、定位

position

6.1、相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style>
        body{
        margin-top: 50px;
        }
        div{
        margin:10px;
        padding:5px;
        font-size:12px;
        line-height:25px;
        }
        #father{
        border:1px solid #666;

        }
        #first{
        background-color:yellow;
        border:1px dashed red;
        position:relative;  /*相对定位*/
        top:-20px;   /*相对于top顶部，距离减少20px*/
        left:50px;  /*相对于left左边，距离增加30px*/
        }
        #second{
        background-color:yellow;
        border:1px dashed green;
        }
        #third{
        background-color:yellow;
        border:1px dashed blue;
        position:relative;
        bottom:10px;    /*相对于下边，距离增加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:50px;

bottom:10px;

right:20px;

练习：方块定位

自己编写：style

/*删除默认尺寸，外边距，内边距，文字下划线*/
a,div,body{
    margin:0;
    padding:0;
    text-decoration:none;
}
div{

}

/*确定大div框架尺寸，宽，高
（计算每个div内块+边线=100，框架尺寸应该为300，但是实际299为正好尺寸）
（可能是相对位置和实际编程尺寸的误差）
（以后研究！！！）
边框：大小，实线，颜色
内边距
*/
#box{
      width:299px;
      height:299px;
      border:3px solid red;
      padding:10px;
}

/*使用id定位大div（box）下的小div块，
小div内尺寸，框内颜色，及文字居中
*/
#box>div{
    width:100px;
    height:100px;
    background-color:pink;
    text-align:center;
}

/*使用id定位大div（box）下的小div块，
鼠标放置变蓝
*/
#box>div:hover{
    background-color:blue;
}

/*确定移动尺寸*/
#l2{
    position:relative;
    top:-100px;
    left:200px;
}
#l4{
    position:relative;
        top:-100px;
        left:200px;
}
#l5{
    position:relative;
        top:-300px;
        left:100px;
}

/*a字体颜色和字体尺寸*/
a{
    color:white;
    font:bold 20px/100px Arial;
}
a:hover{

}

老师编写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:300px;
            height:300px;
            padding:10px;
            border:2px solid red;
        }
        a{
            width:100px;
            height:100px;
            text-decoration:none;
            background:pink;
            line-height:100px;
            text-align:center;
            color:white;
            display:block;
        }
        a:hover{
            background:blue;
        }
        .l2,.l4{
            position:relative;
            left:200px;
            top:-100px;
        }
        .l5{
            position:relative;
            left:100px;
            top:-300px;
        }
    </style>
</head>
<body>
<div id="box">

    <div class="l1"><a href="">链接1</a></div>
    <div class="l2"><a href="">链接2</a></div>
    <div class="l3"><a href="">链接3</a></div>
    <div class="l4"><a href="">链接4</a></div>
    <div class="l5"><a href="">链接5</a></div>
</div>
</body>
</html>

主要区别：

老师使用了display修改了a标签元素
宽width，高height，内边距padding，边框border，取消下划线text-decoration，背景颜色background，字体位置高度line-height，字体位置宽度text-align，字体颜色color，相对移动位置position:relative，左边left，顶部top，改变标签元素状态display
我使用了div块+a标签
宽width，高height，内边距padding，边框border，取消下划线text-decoration，背景颜色background，字体位置高度line-height，字体位置宽度text-align，字体颜色color，相对移动位置position:relative，左边left，顶部top

我的编写多使用了一个div块，产生了更多行代码，并且更分散，更杂乱。不如使用display更加简洁

6.2、绝对定位

position:absolute

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

相对定位后，它原有的位置还存在，边框不会缩小

绝对定位后，它原有的位置不在存在，边框会缩小

没有父级元素定位的前提下，它相对于浏览器当前窗口定位
假设父级元素存在定位，我们通常会相对于父级元素进行偏移（position:relative;）
在父级元素范围内移动

相对于父级或浏览器的位置，进行指定的偏移

绝对定位的话，它不在在标准文档流中，原来的位置不会被保留

#father{
        border:1px solid #666;
		position:relative;	 /*确定父级相对定位*/
        }
        #first{
        background-color:yellow;
        border:1px dashed red;
        position:absolute; 	/*绝对定位偏移*/
        top:-20px;   
        left:50px;  
        }

6.3、固定定位 fixed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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>d1</div>
<div>d2</div>
</body>
</html>

6.4、z-index

图层 z-index：默认是0，最高无限~999

只有存在于相对定位和绝对定位的时，只有浮起来才会有层级概念

/*父级元素相对定位*/
#content ul{
    position:relative;
}
/*子级元素绝对定位*/
.tipText,.tipBg{
    position:absolute;
    width:380px;
    height:25px;
    top:216px
}
/*抬高定位层*/
.tipText{
    z-index:999;
}
.tipBg{
    bcakground:black;
    opacity:0.5/*背景透明度*/
    filter:alpha(opacity=50)	/*ie8之前版本的背景透明度*/
}

背景透明度 opacity:0.5；

7、动画

菜鸟教程

源码之家

除非你是专业动画，不如尽量搜索以及成型的代码，不要重复种树

8、总结

在这里插入图片描述

原文链接：https://blog.csdn.net/rzz65452064/article/details/116175477