【HTML网页特效1】

温柔成绝对

已于 2025-03-20 09:06:23 修改

阅读量697

点赞数 27

文章标签：开发语言 html

于 2025-03-19 23:23:03 首次发布

本文链接：https://blog.youkuaiyun.com/2401_87758868/article/details/146372585

版权

第一章：走进HTML5

1.1:(HTML)基本框架

<html>
		<!--网页的头部-->
	<head>
		<!--网页的标题-->
		<title>网页的标题</title>
	</head>
		<!--网页的身体-->
	<body>
		内容
	</body>
</html>

1.2:常用标签

①标题标签(加粗、换行)
h1为最大，h6为最小 (默认字体变大，以变小的效果)
<h1>标题标签01</h1>
<h2>标题标签02</h2>
<h3>标题标签03</h3>
<h4>标题标签04</h4>
<h5>标题标签05</h5>
<h6>标题标签06</h6>

②段落标签(换行)

<p>段落内容</p>

③换行标签

<br/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>换行标签</title>
	</head>
	<body>
		<h1>《静夜思》</h1>
		<hr/>
		<!-- <br/> 换行标签 -->
		<strong>《静夜思》</strong><br/>
		<em>床前明月光,疑是地上霜。<br/>
		举头望明月,低头思故乡。<br/>
		</em>
	</body>
</html>

④网页水平线

<hr/>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网页水平线</title>
	</head>
	<body>
		<!-- <hr/> 网页水平线 -->
		<h1>《咏鹅》</h1>
		<hr/>
		<strong>《咏鹅》</strong><br/>
		<p>
			鹅鹅鹅，曲项向天歌，白毛浮绿水,红掌拨清波。
		</p>
	</body>
</html>

⑤字体加粗、字体倾斜、网页注释

字体加粗：<strong>字体</strong>
字体倾斜：<em>字体</em>
网页注释：<!--注释内容-->

⑥图像标签

<img src="图片路径" alt="可替代文本"
title="提示文字" width="宽度"
heigth="高度" />

⑦链接标签

<!-- target 网页打开方式( _self在当前页面加载、_blank在新的页面加载 ) -->
<a href="链接地址" target="网页打开方式">
	文字
</a>

⑧锚链接(定位)

<!--目的地-->
	<a href="#标志">目的地</a>
<!--锚点-->
	<p id="标志">锚点</p>

1.3:行内元素和块级元素
行内元素：
不会换行、没有宽和高属性。

例如：strong、em、a

块级元素：
	会换行、有宽和高属性。

例如：h1-h6、p、li

第二章：列表、表格与媒体元素

1.1：列表
①无序列表

<!-- circle 空心圆 disc 实心圆 square 实心方形-->
<ul type="disc">
	<li>香蕉</li>
</ul>

②有序列表

<!-- 1、a、A、i、I -->
<ol type="1">
	<li>香蕉</li>
</ol>

③自定义列表

<dl>
	<dt>小标题1</dt>
	<dd>薛之谦</dd>
	<dt>小标题2</dt>
	<dd>成凯</dd>
</dl>

1.2：表格
①基本结构

第一行第一列	第一行第二列
第二行第一列	第二行第二列

<table>
	<tr>
		<td>第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

②跨行(吃下面的头)

第一行第一列	第一行第二列
	第二行第二列

<table>
	<tr>
		<td rowspan="2">第一行第一列</td>
		<td>第一行第二列</td>
	</tr>
	<tr>
		<td>第二行第二列</td>
	</tr>
</table>

③跨列(吃后面的头)

第一行第一列
第二行第一列	第二行第二列

<table>
	<tr>
		<td colspan="2">第一行第一列</td>
	</tr>
	<tr>
		<td>第二行第一列</td>
		<td>第二行第二列</td>
	</tr>
</table>

1.3：媒体元素
①音频audio

1:第一种方式:
<!-- controls 显示组件 loop 是否循环 autoplay 是否自动播放 -->
<audio src="路径" controls loop autoplay ></audio>
2：第二种方式(兼容):
<audio controls loop autoplay><source src="路径"/></audio>

②视频video

1:第一种方式:
<!-- controls 显示组件 loop 是否循环 autoplay 是否自动播放 -->
<video src="路径" controls loop autoplay ></video>
2：第二种方式(兼容):
<video controls loop autoplay><source src="路径"/></video>

1.4:内联框架

<iframe src="路径" width="宽度" heigth="高度"></iframe>

1.5:特殊字符

空格 &nbsp;
	> &gt;
	< &lt;
	© &copy;
	引号 &quot;
例如：
	<p>10&gt;9</p>
	<p>9&lt;10</p>
	<p>&quot;秦天&quot;</p>

第三章：表单

1.1：表单
①文本框

<input type="text" name="名称"/>

②密码框

<input type="password" name="名称"/>

③单选按钮

男：<input type="radio" name="sex" checked />
女：<input type="radio" name="sex"/>

④多选按钮

苹果：<input type="checkbox" name="fruit" checked />
香蕉：<input type="checkbox" name="fruit" />
火龙果：<input type="checkbox" name="fruit" />

⑤普通按钮

<input type="button" value="普通按钮"/>

⑥重置按钮

<input type="reset" value="重置按钮"/>

⑦提交按钮

<input type="submit" value="提交按钮"/>

⑧下拉框

<select name="名称">
	<option selected>S1</option>
	<option>S2</option>
</select>

⑨文本域

<textarea name="名称" cols="列宽" rows="行高">
			文字
</textarea>

1.2:(H)5的高级属性
①隐藏域

<input type="text" name="名称" value="值" hidden />

②只读(输入框)

<input type="text" name="名称" value="值" readonly />

③禁用(按钮)

<input type="submit" value="提交" disabled />

④标注

<label for="boy">男</label>
		<input type="radio" id="boy" value="男" name="sex"/>
<label for="girl">女</label>
		<input type="radio" id="girl" value="女" name="sex"/>

1.3:(H)5验证属性

①提示信息：placeholder

用户名称：<input type="text" placeholder="请输入用户名称" />

②必填项(如果没有填写，则不能提交表单)：required

用户名称：<input type="text" placeholder="请输入用户名称" required />

③正则表达式(自定义验证规则)：pattern

用户名称：<input type="text" placeholder="请输入用户名称" pattern="[0-9a-zA-Z_]{3,}"
/>

第四章：初识CSS样式

1.1:CSS样式
①引入CSS样式的三种方式：
1:行内样式

<h1 style="color:red;">凯凯</h1>

2:内部样式

<style>
	h1{
		color:red;
	}
</style>
<h1>钟资超</h1>

3:外部样式

css文件
	h1{
		color:red;
	}
html文件
<!--引用CSS文件、第一种方式-->
	link rel="stylesheet" href="css文件路径" />
<!--引用CSS文件、第二种方式-->
<style>
	@import url(css文件路径);
</style>
<h1>凯凯</h1>

②CSS样式的三种方式的优先级
行内>(内部、外部)
就近原则

1.2:选择器
①基础选择器：
1：ID选择器

<style>
	#myA{
		color:red;
	}
</style>
<p id="myA">钟资超</p>

2：类选择器

<style>
	.myB{
		color:red;
	}
</style>
<p class="myB">肖威</p>

3：标签选择器

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

4：优先级
ID选择器>类选择器>标签选择器
不遵循就近原则
②高级选择器
1：层次选择器
后代选择器(空格)

<style>
	ul span{
		color:red;
	}
</style>
	<ul>
		<li>
			文罗洋
		<span>校花</span>
		</li>
	</ul>

子代选择器(大于)

<style>
	ul>li{
		color:red;
	}
</style>
	<ul>
		<li>
			文罗洋
		<span>校花</span>
	</li>
</ul>

相邻兄弟选择器(往后算)

<style>
	#myC+p{
		color:red;
	}
</style>
	<p>张三</p>
	<p id="myC">李四</p>
	<p>王五</p>
	<p>赵六</p>

通用兄弟选择器(往后算)

<style>
	#myC~p{
		color:red;
	}
</style>
	<p>张三</p>
	<p id="myC">李四</p>
	<p>王五</p>
	<p>赵六</p>

2：结构伪类选择器(不常用)

E:first-child 寻找父类中第一个E元素(先找位置,不找类型)
E:last-child 寻找父类中最后一个E元素
E F:nth-child(n) 寻找E里面第n个F元素
E:first-of-type 寻找父类中第一个E类型元素(先找类型)
E:last-of-type 寻找父类中最后一个E类型元素
E F:nth-of-type(n) 寻找E里面第n个F类型元素

3：属性选择器

p[name] //查询p标签中有name属性的标签
p[name=kai] //查询p标签中有name属性,并且值为kai的标签
p[name^=kai] //查询p标签中有name属性,并且值以kai开头的标签
p[name$=kai] //查询p标签中有name属性,并且值以kai结尾的标签
p[name*=kai] //查询p标签中有name属性,并且值包含kai的标签

第五章：CSS3美化网页元素

1.1:字体样式和文本样式
①span标签
行内元素、用来凸显文字
②字体样式
1：单个设置
font-size 字体大小
font-weight 字体粗细
font-family 字体样式
font-style 字体风格

<style>
	h1{
		font-size:90px;
		font-weight:900;
		font-family:"楷体";
		font-style:italic;
	}
</style>
	<h1>凯凯</h1>

2：简化设置(顺序：风、粗、大、类)

<style>
	h1{
		font:italic 900 90px "楷体"; //(大、类不能省略)
	}
</style>
	<h1>凯凯</h1>

③文本样式
1：段落缩进(text-indent)
px(像素)
em(字符)

<style>
	p{
		text-indent:90px; //或者4em;
	}
</style>
	<p>亲爱的，你是我的唯一、每天醒来都是你的味道</p>

2：行距(line-height)

<style>
	p{
		line-height:10px;
	}
</style>
	<p>张三</p>
	<p>李四</p>

3：文本装饰(text-decoration)

<style>
	p{
		// overline 上划线
		// line-through 中划线
		// underline 下划线
		text-decoration:overline;
	}
</style>
	<p>张三</p>

4：水平对齐方式(text-align)

<style>
	p{
		//两端对齐 justify
		//左边 left
		//右边 right
		text-align:center; //居中
	}
</style>
	<p>张三</p>

5：垂直对齐方式
A:表格垂直对齐(跨行、默认垂直对齐)

学生成绩
赵萌萌	语文	98
	数学	97
	英语	92

<table border="1">
		<tr>
			<!-- align 水平居中(left左边、right右边、中center) -->
			<td colspan="3" align="center">学生成绩</td>
		</tr>
		<tr>
			<!-- valign 垂直居中(上top、下bottom、中center) -->
			<td rowspan="3" valign="center">赵萌萌</td>
			<td>语文</td>
			<td>98</td>
		</tr>
		<tr>
			<td>数学</td>
			<td>97</td>
		</tr>
		<tr>
			<td>英语</td>
			<td>92</td>
		</tr>
</table>

B:图片和文本对齐

<style>
	/* 并且 */
	img,span{
		// 顶部 top
		// 底部 bottom
		vertical-align: middle; /* 垂直居中*/
	}
</style>
	<img src="img/bobo.jpg" width="100px" height="100px" />
	<span>帅气的凯凯</span>

6：阴影效果(text-shadow)

<style>
	h1{
		//text-shadow: X坐标 Y坐标 阴影大小 颜色;
		text-shadow:10px 10px 5px red;
	}
</style>
	<h1>凯凯</h1>

7：文本颜色
单词设置颜色(记单词)

<style>
	#myA{
		color:blue;
	}
	#myP{
		color:red;
	}
</style>
	<h1 id="myA">超超</h1>
	<h1 id="myP">磊磊</h1>

16进制设置颜色(红、绿、蓝搭配)

//rgba(红,绿,蓝) rgb(0,0,200)
//rgba(红,绿,蓝,透明度) rgba(0,0,200,0.5)
<style>
	#myA{
		color:rgba(200,0,50);
	}
	#myP{
		color:rgba(200,0,50,0.5);
	}
</style>
	<h1 id="myA">超超</h1>
	<h1 id="myP">磊磊</h1>

1.2:列表样式和超链接伪类样式
①：超链接伪类样式(注意顺序)

<style>
	<!--未点击超链接-->
	a:link{
		color:pink;
	}
	<!--点击后超链接-->
	a:visited{
		color:black;
	}
	<!--悬浮超链接-->
	a:hover{
		color:white;
	}
	<!--点击未松开超链接-->
	a:active{
		color:red;
	}
</style>
	<a>美国：英国</a>

②：列表样式
1：去除标记(常用)

list-style-type:none;
list-style:none;

2：使用图标替换标记

list-style-image：url(img/bobo.jpg);

3：设置图标位置

list-style-position: inside;

1.3:背景样式
①单独版

background-image: url(img/bobo.jpg); /* 背景图片 */
background-color: #FFC0CB; /* 背景颜色 */
background-repeat: no-repeat; /* 背景是否平铺 */
/* 背景图片的位置 X坐标 Y坐标 */
background-position: 100px 100px;

②简化版(记住这个)

background:url(img/bobo.jpg) no-repeat 100px 100px;

③背景大小

/* 设置背景尺寸
cover 填充
contain 适用宽度或者高度(保持原有的比例)
50% 50% 百分比
*/
background-size: 50% 50%;

1.4D:div标签(border边框)

<style>
	#myA{
		width: 2000px; //宽度
		height: 900px; //高度
		border: 1px red solid; /* border边框 */
</style>
	<div id="myA">超哥</div>

1.5:渐变(在背景颜色的基础上)
①线性渐变

<style>
	#myA{
		width: 400px;
		height: 400px;
		border: 1px red solid;
		/* 背景 */
		background:
		linear-gradient(to left,pink,skyblue);
	}
</style>
	<div id="myA"></div>

②径向渐变

<style>
	#myB{
		width: 400px;
		height: 400px;
		border: 1px red solid;
		/* 背景--径向渐变 */
		background:radial-gradient(green,yellow,purple);
}
</style>
	<div id="myB"></div>

第六章：盒子模型网页元素

1.1:盒子的组成成分
边框(border)、外边距(margin)、内边距(padding)、实际内容(coutent)
1.2:边框(border)
1:单独版
①边框颜色(border-color)

//四边都是红色
border-color:red;
//上下是红色 左右是蓝色
border-color:red blue;
//上是红色 左右是黄色 下是蓝色
border-color:red yellow blue;
//上是红色 右是黄色 下是蓝色 左边是黑色
border-color:red yellow blue black;

②边框粗细(border-weight)

//四边的粗细都是2px
border-weight:2px;
//上下粗细是2px 左右粗细是4px
border-weight:2px 4px;
//上粗细2px 左右粗细4px 下粗细6px
border-weight:2px 4px 6px;
//上粗细2px 右粗细4px 下粗细6px 左粗细8px
border-weight:2px 4px 6px 8px;

③边框样式(border-style)

//四边的样式都是实线
border-style:solid;
//上下样式实线 左右虚线
border-style:solid dashed;
//上样式实线 左右为虚线 下样式为点线
border-style:solid dashed dotted;
//上样式实线 右为虚线 下样式为点线 左样式为双实线
border-style:solid dashed dotted double;

2:简化版(前提：四边的粗细、样式、颜色都一样)

border:1px red solid;

1.3:外边距(margin)
1:含义(指元素边框和相邻元素之间的距离)
2:设置距离(案例)
①：将下面代码中myA的底部与myB的顶部距离为20px

<style>
	#myA{
		margin-bottom:20px;
	}
	//或者(效果不会叠加)
	#myB{
		margin-top:20px;
	}
</style>
	<div id="myA">
		第一个DIV
	</div>
	<div id="myB">第二个DIV</div>

3：设置距离(其他)

margin-bottom 底部的距离
margin-top 顶部的距离
margin-left 左边的距离
margin-right 右边的距离

1.4:内边距(padding)
1:含义(父元素距离子元素的间距)
2:设置距离
①：将下面代码中myA的底部与myB的顶部距离为20px

<style>
	#myA{
		padding-top:20px;
	}
</style>
<div id="myA">
	<div id="myB">子元素</div>
</div>

1.5:盒子模型的尺寸(计算)
1：计算盒子的尺寸

盒子总宽度=wight+左右内边距之和+左右边框厚度之和
盒子总高度=height+上下内边距之和+上下边框厚度之和

2：计算外盒子的尺寸

外盒子总宽度 = wight + 左右内边距之和 + 左右外边距之和 + 左右边框厚度之和
外盒子总高度 = height + 上下内边距之和 + 上下外边距之和 + 上下边框厚度之和

1.6:box-sizing(改变盒子大小、计算方式)–了解
①content-box
内容+内边距(2)+边框(2)
②border-box
内容
③inherit
默认(继承父元素的值)

1.7:圆角边框(border-radius)
1:四个点的顺序(左上右上右下左下)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>圆角边框</title>
		<style>
			#myA{
				width: 100px;
				height: 100px;
				border: 2px red solid;
				border-color: red green purple chocolate;
				/* 边框圆角 */
				border-radius: 50%;
			}
			#myB{
				width: 400px;
				height: 200px;
				border: 2px red solid;
				border-color: red green purple chocolate;
				/* 边框圆角 */
				border-radius: 200px 200px 0px 0px;
			}
			#myC{
				width: 200px;
				height: 400px;
				border: 2px red solid;
				border-color: red green purple chocolate;
				/* 边框圆角 */
				border-radius: 0px 200px 200px 0px;
			}
			#myD{
				width: 200px;
				height: 200px;
				border: 2px red solid;
				border-color: red green purple chocolate;
				/* 边框圆角 */
				border-radius: 200px 0px 0px 0px;
				/* 盒子阴影 */
				box-shadow: 10px 10px 2px red inset;
			}
			img{
				border-radius: 50%;
				/* 盒子阴影 */
				box-shadow: 10px 10px 2px red;
			}
	</style>
</head>
<body>
	<div id="myA"></div>
	<div id="myB"></div>
	<div id="myC"></div>
	<div id="myD"></div>
	<img src="img/dianying04.png" width="200px" height="200px" />
</body>
</html>

2:案例：
①圆

<style>
	#myA{
		wight:100px;
		height:100px;
		border:1px red solid;
		border-radius:50%;
		//或者
		border-radius:50px;
	}
</style>
	<div id="myA"></div>

②半圆

<style>
	#myA{
		wight:100px;
		height:50px;
		border:1px red solid;
		border-radius:50px 50px 0px 0px;
	}
</style>
	<div id="myA"></div>

③1/4圆

<style>
	#myA{
		wight:50px;
		height:50px;
		border:1px red solid;
		border-radius:50px 0px 0px 0px;
	}
</style>
	<div id="myA"></div>

1.8:盒子阴影(box-shadow)
1:语法：
box-shadow:X坐标 Y坐标阴影半径颜色
2:案例：

<style>
	#myA{
		wight:50px;
		height:50px;
		border:1px red solid;
		border-radius:50px 0px 0px 0px;
		box-shadow:10px 10px 5px red;
	}
</style>
	<div id="myA"></div>

第七章：浮动

1.1:display(可以转换行内和块级元素)
1：设置

//块级元素(换行、有宽高属性)
display:block;
//行内元素(不会换行、字体大小则为高度)
display:inline;
//行内块元素(不会换行、有宽高属性)
display:inline-block;

1.2:浮动(float)、会脱离标准文档流
1:设置

float:left; //左浮动
float:right; //右浮动

2:会影响其他的非浮动元素
1.3:清除元素浮动带来的影响(clear)
1:设置

clear:left; //清除左边浮动带来的影响
clear:right; //清除右边浮动带来的影响
clear:both; //清除两边浮动带来的影响

1.4:浮动会引起父级元素的塌陷问题
1：将父级元素的高增加

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解决父级边框塌陷的问题==设置父级高度</title>
		<style>
			#myA{
				width: 400px;
				border: 1px red solid;
				height: 60px;
			}
			.box{
				width: 50px;
				height: 50px;
				border: 1px yellow solid;
				float: left;
			}
		</style>
</head>
<body>
	<div id="myA">
		<div class="box">第一个</div>
		<div class="box">第二个</div>
		<div class="box">第三个</div>
	</div>
</body>
</html>

2：添加一个空的块级元素(清除浮动)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解决父级边框塌陷的问题==设置父级伪类after</title>
		<style>
			#myA{
				width: 400px;
				border: 1px red solid;
			}
			/* 父级伪类 */
			#myA:after{
				content: "";
				display: block; /* 块级元素 */
				clear: both; /* 清楚两侧浮动 */
			}
			.box{
				width: 50px;
				height: 50px;
				border: 1px yellow solid;
				float: left;
			}
	</style>
</head>
<body>
	<div id="myA">
		<div class="box">第一个</div>
		<div class="box">第二个</div>
		<div class="box">第三个</div>
	</div>
</body>
</html>

3：使用overflow属性来处理浮动塌陷问题

overflow:hidden; //隐藏
overflow:auto; //自动
overflow:scroll; //滚动条

4：使用伪类after清除浮动(了解)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>解决父级边框塌陷的问题==设置父级伪类after</title>
		<style>
			#myA{
				width: 400px;
				border: 1px red solid;
			}
			/* 父级伪类 */
			#myA:after{
				content: "";
				display: block; /* 块级元素 */
				clear: both; /* 清楚两侧浮动 */
			}
			.box{
				width: 50px;
				height: 50px;
				border: 1px yellow solid;
				float: left;
			}
	</style>
</head>
<body>
	<div id="myA">
		<div class="box">第一个</div>
		<div class="box">第二个</div>
		<div class="box">第三个</div>
	</div>
</body>
</html>

3：使用overflow属性来处理浮动塌陷问题

overflow:hidden; //隐藏
overflow:auto; //自动
overflow:scroll; //滚动条

4：使用伪类after清除浮动(了解)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>解决父级边框塌陷的问题==设置父级伪类after</title>
<style>
#myA{
width: 400px;
border: 1px red solid;
}
/* 父级伪类 */
#myA:after{
content: "";
display: block; /* 块级元素 */
clear: both; /* 清楚两侧浮动 */
}
.box{
width: 50px;
height: 50px;
border: 1px yellow solid;
float: left;
}
</style>
</head>
<body>
<div id="myA">
<div class="box">第一个</div>
<div class="box">第二个</div>
<div class="box">第三个</div>
</div>
</body>
</html>

1.5:inline-block和浮动的区别
inline-block:
优点：
可以让元素排在一行、支持宽和高
代码实现起来方便易理解
并该属性在标准文档流中、无需清除浮动

缺点：
不支持IE8以下版本的浏览器、
且位置方向不易控制、
会使排列在一行的元素中间有空格

浮动：
优点：
可以让元素排在一行、支持宽和高
且可以决定排列方向

缺点：
设置浮动后元素会脱离文档流
会对周围元素产生影响
必须清除浮动

第八章：定位

1.1 CSS中有3种基础的定位机制
分别是：标准文档流、浮动和定位

1.2 position属性用于定义元素的定位类型，其常用属性值有：
值：static、relative、absolute、fixed、sticky

static属性值(默认值，无定位)：
默认值，没有定位，元素按照标准文档流进行布局

relative属性值(相对定位)：
相对定位，相对于其原文档流的位置进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border: 1px red solid;
			}
			#myA{
				background-color: pink;
				/* 相对定位 (以原来的位置为参照物、
				不会脱离标准文档流==原来的位置不会让给其他元素) */
				position: relative;
				left: 10px;
			}
			#myB{
				background-color: green;
			}
	</style>
</head>
<body>
	<div id="myA"></div>
	<div id="myB"></div>
</body>
</html>

absolute属性值(绝对定位)：
绝对定位，相对于其上一个已经定位的父元素进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>绝对定位</title>
		<style>
			#myA{
				width: 400px;
				height: 400px;
				background-color: yellow;
				position: relative; /* 相对定位 */
			}
			#myB{
				width: 200px;
				height: 200px;
				background-color: blue;
				/* 绝对定位(脱离标准文档流==会把原来的位置让出来)
				1.如果父类没有定位、则参照浏览器
				2.如果父类有定位、则参照最近的父类 */
				position: absolute;
			}
			#myC{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
	</style>
</head>
<body>
	<div id="myA">
		<div id="myB"></div>
		<div id="myC"></div>
	</div>
</body>
</html>

fixed属性值(固定定位)：
固定定位，相对于浏览器窗口进行定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>固定定位</title>
		<style>
			body{
				height: 2000px;
			}
			#myA{
				width: 100px;
				height: 100px;
				background-color: pink;
				/* 固定定位 (参照物浏览器) */
				position: fixed;
				right: 10px;
				bottom: 10px;
				line-height: 100px;
				text-align: center; /* 水平居中 */
			}
	</style>
</head>
<body>
	<h1 id="mao">我在你这里，等你，快来找我</h1>
	<div id="myA">
		<a href="#mao">返回顶部</a>
	</div>
</body>
</html>

拓展 sticky(粘性定位)：
它是相对定位和固定定位的混合。元素在跨越特定阈值前是相对定位，在跨越后就会变成固定定位。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>粘性定位</title>
		<style>
			body{
				height: 2000px;
			}
			#myA{
				width: 600px;
				height: 50px;
				background-color: pink;
				margin: 50px auto;
				/* 粘性定位 */
				position: sticky;
				top: 0px;
			}
	</style>
</head>
<body>
	<div id="myA"></div>
</body>
</html>

1.3偏移位置
值：top、right、bottom、left。

top属性值(顶端偏移量)：
顶端偏移量，定义元素相对于其父元素上边线的距离

right属性值(右侧偏移量)：
右侧偏移量，定义元素相对于其父元素右边线的距离

bottom属性值(底端偏移量)：
底端偏移量，定义元素相对于其父元素下边线的距离

left属性值(左侧偏移量)：
左侧偏移量，定义元素相对于其父元素左边线的距离

1.4 z-index属性

z-index属性的值为整数，可以是整数，也可以是负整数，其仅在定位元素上奏效

//五环效果
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>固定定位--fixed</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				border-radius: 50%;
			}
			#myA{
				border: 10px blue solid;
				position: fixed; /* 固定定位 */
				top: 0px;
				left: 200px;
				/* 调整层级级别 */
				z-index: 1;
			}
			#myB{
				border: 10px black solid;
				position: fixed; /* 固定定位 */
				top: 0px;
				left: 423px;
				/* 调整层级级别 */
				z-index: 3;
			}
			#myC{
				border: 10px red solid;
				position: fixed; /* 固定定位 */
				top: 0px;
				left: 646px;
				/* 调整层级级别 */
				z-index: 5;
			}
			#myD{
				border: 10px orange solid;
				position: fixed; /* 固定定位 */
				top: 120px;
				left: 315px;
				/* 调整层级级别 */
				z-index: 2;
			}
			#myE{
				border: 10px green solid;
				position: fixed; /* 固定定位 */
				top: 120px;
				left: 536px;
				/* 调整层级级别 */
				z-index: 4;
			}
	</style>
</head>
<body>
	<div id="myA"></div>
	<div id="myB"></div>
	<div id="myC"></div>
	<div id="myD"></div>
	<div id="myE"></div>
</body>
</html>

1.5opacity属性
opacity属性用于设置元素的透明度，其值为0~1，即值越小越透明

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>透明、层叠关系</title>
		<style>
			#myA{
				width: 400px;
				height: 400px;
				background-color: yellow;
				position: relative; /* 相对定位 */
			}
			#myB{
				width: 200px;
				height: 200px;
				background-color: pink;
				position: absolute; /* 绝对定位 */
				left: 120px;
				z-index: 1; /* 层叠 z-index */
			}
			#myC{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				position: absolute; /* 绝对定位 */
				opacity: 0.5; /* 设置透明 opacity 取值范围：0~1 */
				z-index: 2;
			}
	</style>
</head>
<body>
	<div id="myA">
		<div id="myB"></div>
		<div id="myC"></div>
	</div>
</body>
</html>

第九章：使用 CSS3实现网页动画效果

1.1 CSS3变形
通过transform属性就可以轻松移动、旋转、缩放及倾斜元素。
初识transform
CSS3的transform属性值向元素应用2D或3D转换，该属性允许对元素进行移动、旋转、缩放及倾斜。
语法：

transform:none | transform-function

函数：
translate()、rotate()、scale()、skew()。
translate()移动函数：
移动函数，即基本X和Y坐标重新定位元素的位置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>2D平移效果 translate </title>
		<style>
			#myA{
				width: 200px;
				height: 200px;
				background-color: red;
				/* 平移效果 */
				/* transform: translate(100px,100px); */
			}
			#myA:hover{
				transform: translateX(200px);
			}
	</style>
</head>
<body>
	<div id="myA"></div>
</body>
</html>

rotate()旋转函数：
旋转函数，取值为一个度数值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>旋转 rotate </title>
		<style>
			#myA{
				width: 200px;
				height: 200px;
				margin: 50px auto;
				background-color: red;
				/* 平移效果 */
				/* transform: translate(100px,100px); */
			}
			#myA:hover{
				transform: rotate(45deg); /* 旋转45° 负为逆，正为顺 */
			}
	</style>
</head>
<body>
	<div id="myA"></div>
</body>
</html>

scale()缩放函数：
缩放函数，可以使任何元素对象尺寸发生变化，取值包括正数、负数和小数。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>缩放 scale </title>
		<style>
			#myA{
				width: 200px;
				height: 200px;
				margin: 30px auto;
				background-color: red;
				/* 平移效果 */
				/* transform: translate(100px,100px); */
			}
			#myA:hover{
				transform: scale(4); /* 缩放 */
			}
	</style>
</head>
<body>
	<div id="myA"></div>
</body>
</html>

skew()倾斜函数：
倾斜函数，取值为一个度数值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>倾斜 skew </title>
		<style>
			#myA{
				width: 200px;
				height: 200px;
				margin: 30px auto;
				background-color: red;
			}
			#myA:hover{
				transform: skew(45deg); /* 倾斜效果 */
			}
	</style>
</head>
<body>
	<div id="myA"></div>
</body>
</html>

1.2 CSS3过渡
认识transition
CSS3中，transition是一个复合属性，它呈现的是一种过渡，是一种动画转换的过程。
语法：

transition:property duration timing-function delay;

4个属性值：
transition-property：规定设置过渡效果的CSS属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。

过渡效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过渡效果</title>
		<style>
			#myA{
				width: 200px;
				height: 200px;
				margin: 0px auto;
				background-color: red;
				transition: width 3s linear,
				background-color 3s linear,
				height 3s linear,
				color 3s linear,
				line-height 3s linear;
				line-height: 200px;
				text-align: center;
			}
			#myA:hover{
				width: 500px;
				height: 400px;
				background-color: pink;
				color: white;
				line-height: 400px;
				text-align: center;
			}
	</style>
</head>
<body>
	<div id="myA">
		<h1>超哥</h1>
	</div>
</body>
</html>

1.3 CSS3动画
CSS3除支持转换和过渡特效外，还可以实现强大的动画效果。使用animation属性可以定义复杂的动
画。
@keyframes
通过@keyframes规则，能够创建动画。
语法：

@keyframes animationName{
keyframes-selector{css-style;}
}

animation复合属性
可以用于调用@keyframes规则创建的动画。
语法：

animation:name duration timing-function delay iteration-count direction

6个属性值：
animation-name：规定需要绑定到选择器的@keyframes名称。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function：规定动画的速度曲线。
animation-delay：规定在动画开始之前的延迟。
animation-iteration-count：规定动画应该播放的次数。
animation-direction：规定是否应该轮流反向播放动画。

动画效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动画效果</title>
		<style>
			#myA{
				width: 200px;
				height: 200px;
				background-color: red;
				position: relative;
				/*
				linear: 均速行走
				infinite: 循环播放
				alternate: 反向播放
				*/
				animation: mf 5s linear infinite alternate;
			}
			/* 定义关键字 */
			@keyframes mf {
			0%{
				left: 0px;
				border-radius: 0%;
			}
			20%{
				left: 20px;
				border-radius: 10%;
			}
			40%{
				left: 40px;
				border-radius: 20%;
			}
			60%{
				left: 60px;
				border-radius: 30%;
			}
			80%{
				left: 80px;
				border-radius: 40%;
			}
			100%{
				left: 100px;
				border-radius: 50%;
			}
		}
	</style>
</head>
<body>
	<div id="myA"></div>
</body>
</html>