本文详细介绍了HTML的基础知识，包括HTML的历史、静态与动态网页的区别、HTML5的优势以及W3C标准。接着讲解了HTML标签，如标题、元数据、段落、换行、水平线、字体样式等。还涉及了媒体元素如音频和视频的使用。此外，讨论了列表、表格和媒体元素的HTML标签。最后，初步探讨了CSS3的概念、优势、基本语法、选择器、字体样式、文本样式、背景样式以及浮动和定位等概念，为网页设计打下基础。
H5+CSS3
第一章：HTML基础
1，HTML简介
HTML (Hyper Text Markup Language) 超文本标记语言
超文本 不仅仅包含文本信息，还包括图片，视频，音频…
标记：用来描述超文本的标签 百度一下
语言：高级计算机语言
2，HTML历史
创始人：
Tim Berners-Lee（蒂姆·伯纳斯-李）【互联网之父、W3C创始人、HTML设计者】
1980年，物理学家蒂姆·伯纳斯-李在欧洲核子研究中心（CERN）在承包工程期间，为使CERN的研究人员使用并共享文档，他提出并创建了原型系统ENQUIRE。1989年，伯纳斯-李在一份备忘录中提出了一个基于互联网的超文本系统。他规定了HTML并在1990年底写出了浏览器和服务器软件。同年，伯纳斯-李与CERN的数据系统工程师罗伯特·卡里奥联合为项目申请资助，但未被CERN正式批准。在他的个人笔记中伯纳斯-李列举了“一些使用超文本的领域”，并把百科全书列为首位。
HTML的首个公开描述出现于一个名为“HTML标签”的文件中，由蒂姆·伯纳斯-李于1991年底提及。它描述了18个元素，包括HTML初始的、相对简单的设计。除了超链接标签外，其他设计都深受CERN内部一个以标准通用标记语言（SGML）为基础的文件格式SGMLguid的影响。这些元素在HTML 4中仍有11个存在。
伯纳斯-李认为HTML是SGML的一个应用程序。1993年中期互联网工程任务组（IETF）发布了首个HTML规范的提案：“超文本标记语言（HTML）”互联网草案，由伯纳斯-李与丹·康纳利撰写。其中包括一个SGML文档类型定义来定义语法。草案于6个月后过期，不过值得注意的是其对NCSA Mosaic浏览器自定义标签从而将在线图像嵌入的行为的认可，这反映了IETF把标准立足于成功原型的理念。同样，戴夫·拉基特在1993年末提出的与之竞争的互联网草案“HTML+（超文本标记格式）”建议规范已经实现的功能，如表格与填写表单。
在HTML和HTML+的草案于1994年初到期后，IETF创建了一个HTML工作组，并在1995年完成了”HTML 2.0”，这是第一个旨在成为对其后续实现标准的依据的HTML规范。
在IETF的主持下，HTML标准的进一步发展因竞争利益而遭受停滞。自1996年起，HTML规范一直由万维网联盟（W3C）维护，并由商业软件厂商出资。不过在2000年，HTML也成为了国际标准（ISO/ IEC15445：2000）。HTML 4.01于1999年末发布，进一步的勘误版本于2001年发布。2004年，网页超文本应用技术工作小组（WHATWG）开始开发HTML5，并在2008年与W3C共同交付，2014年10月28日完成标准化。
3，动态网页和静态网页
浏览器 360 uc ie 谷歌 火狐，网景浏览器
静态网页+动态网页
静态网页 ：纯HTML
动态网页：由服务器生成的HTML
4，HTML5的优势
5，W3C标准
6，基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
6.1注意事项
1，标签一般都是成对出现的，有开始标签有结束标签。
2，会有单标记标签 < br/>
3，标签不区分大小写 < br/> 和 < BR/>
4，标签可以嵌套使用，但是一定要注意顺序
<body>
<a>百度一下</a>
</body>
7，html标签
7.1 title标签
<head>
<title>标题标签</title>
</head>
7.2 meta标签
<meta charset="UTF-8" />
charset:网页的编码格式
<meta name="keywords" content="123" />
keywords:搜索关键字
<meta name="description" content="123456" />
description:对该网页的文字描述
7.3 标题标签
<h1></h1>
<h2></h2>
...
<h6></h6>
标题标签
字体大小不一样，h1最大为2em h6最小0.67em （font-size: 0.67em;）
字体加粗 font-weight: bold;
为块状标签 display: block; （独自占一行）
属性：
align:center/left/right 水平对齐方式 中/左/右
7.4, 段落标签
<p>
段落标签
</p>
1,独占一行，而且上下有一定的的间距，也是快状标签
属性：
align:center/left/right 水平对齐方式 中/左/右
7.5 换行标签
<br/>
7.6 水平线标签
<hr/>
属性：
width="500px" 宽度
color="red" 颜色
size="6" 大小
7.7 字体样式标签
<b>字体加粗</b>
<strong>字体加粗</strong>
<b>加粗</b> <strong>加粗</strong>
<em>斜体</em> <i>斜体</i>
7.8 特殊符号
> 大于 great then
< 小于 less then
空格
" 引号
© 版权符号
7.9 图像标签
image 图片
<img />
属性
src : 图片的路径
相对路径：推荐使用
绝对路径：
width:宽度
height:高度
title:鼠标悬浮在图片上显示的文字信息
alt:当图片加载失败时，显示的文字信息
7.9 超链接
<a>超链接</a>
属性
href : 超链接 链接的地址
超链接的类型
1，空链接： <a href="#">空链接</a> 返回顶部
2，页面间链接：实现页面的跳转 <a href="../01/test1.html">百度一下</a>
3，锚链接：
1，创建跳转的标记
<a name="f1"></a>
2，创建跳转到指定标记的链接
<a href="#f1">1f</a>
4，功能性链接：
<a href="mailto:234234@qq.com">234234@qq.com</a>
8，颜色
color属性不仅可以写所有的颜色单词，还可以用16进制的数表示
16进制：0-9 a-f
三原色： RGB red green blue
f f f
color=#ffffff 表示白色
#000 或者 #000000 表示黑色
9，标签的分类
1,块状标签
标签头部尾部都会换行，独占一行，也叫霸道标签
一般块状标签都会有algin属性
例如：p h1-h6 hr
可以通过css设置其宽度和高度
2,内联标签（行内标签）
不会换行，而且不能设置宽度和高度
例如：a span font
3,内联块状标签
不会换行，但是可以设置宽度和高度
例如：img
这三种类型的标签可以通过css相互转换
第二章：列表、表格与媒体元素
1，媒体元素
图片，视频，音频
1.1 音频标签
audio : 音频
<audio src="" ></audio>
属性：
src:音频的路径
controls:音频的控制器
autoplay：自动播放
loop="3" : 循环播放的次数
<audio controls>
<source src="music/music.mp3" type="audio/mpeg"/>
<source src="music/music.ogg" type="audio/ogg"/>
你的浏览器不支持audio元素
</audio>
1.2 视频标签
vedio : 视频
<vedio></vedio>
属性：src视频路径
controls:音频的控制器
autoplay：自动播放
loop="3" : 循环播放的次数
width: 宽度
height: 高度
<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>
2，列表标签
属于块状标签
1,有序列表 order list
<ol>
<li></li>
</ol>
ol属性
type: 1 / A / a / I / i
2,无序列表 un order list
<ul>
<li></li>
</ul>
属性
type: circle 空心圆 / disc 实心圆 / square 实心方块
3,定义列表
<dl>
<dt></dt>
<dd></dd>
</dl>
3，表格
<table border="1">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<tr>
<th>表头（加粗居中）</th>
</tr>
屬性：
border: 边框大小
cellspacing ： 单元格和单元格之间的间隙 距离
cellpadding ： 单元格和内容之间的距离
witdh: 宽度
height: 高度
td中的属性：
单词：行--rows 列--column
colspan:合并列
rowspan:合并行
第三章：表单
表单：登录，注册，搜索
包含 各种各样的输入框+提交按钮=表单
1.表单标签：form
表单作用：提交表单内的数据到某个地方
快递： 1，要寄的东西（可能有多个）
2，要有包裹
3，快递单（寄到哪里去，什么人收，联系电话…）
表单：
1，要有提交的数据（内容）-- 表单元素
2，要用form标签将表单元素包裹起来
3，要有form标签的属性（action：要提交的地址，method：提交的方式）
<form action="" method="">
action:动作，表示表单要提交的地址
method:方法，表示该表单提交的方式
get方式 ： 默认方式
提交的内容可以在地址栏中看到，不安全，但是速度快，
提交内容的大小一般在2kb一下
post方式 ：
提交的内容在地址栏中看不到，安全，但是相对速度慢，
提交内容的大小没有限制
一般推荐使用post提交
表单提交必须配置提交按钮
</form>
2，表单元素
2.1 input标签
<input type="" >
input:输入
Scanner input = new Scanner(System.in);
input标签 <input /> 输入框 默认type属性为 text
1，文本框： <input type="text"/>
2，密码框：<input type="password" />
3，复选框：<input type="checkbox" /> 可以多选
属性：checked 默认选择
4，单选框：<input type="radio">
如果要达到单选的目的则必须将这些单选框取同样的name属性
属性：checked 默认选择
5，隐藏域：<input type="hidden">
6，文件域：<input type="file">
属性： name ：为输入框 取名字（暂时没什么用，s2会用到）
value ： 值，默认值
size ：文本框大小
maxlength ：允许数值的最大长度
2.2 按钮
1，普通按钮 <input type="button" value="按钮名称">
2，提交按钮 <input type="submit" value="提交按钮">
3，重置按钮 <input type="reset" value="重置按钮">
重置按钮会将表单元素重置到原来的值，并不是清空
4，图片按钮 <input type="image">
<input type="image" src="img/a.jpg" />
2.3 列表框–下拉框
<select>
<option>男</option>
<option>女</option>
</select>
属性：
name:
size: 下拉框显示的行数
option中的属性
selected:默认选中
value:要提交的值
2.4多行文本域
<textarea>
</textarea>
属性
name:表单元素的名称
cols:列
rows:行
2.5H5标签
1,邮箱标签 <input type="email"> 自带验证功能
2，数字标签 <input type="number" step="1" max="10" min="1">
属性
min:最小值
max:最大值
step:跳步 每次加减多少
3，网址标签 <input type="url">
4，滑块：<input type="range" max="100" min="10" value="10">
5，搜索框 :<input type="search" name="sousuo"/>
6，颜色拾取器：<input type="color">
2.6 标签的只读和禁用
只读标签：<input type="text" readonly>
禁用标签：<input type="text" disabled value="abcde"><br/>
只读：不能写入，但是可以随着表单提交的目的地
禁用：不能写入，同时不能提交
2.7 表单元素的标注
增强鼠标的可用性
自动将焦点转移到与该标注相关的表单元素上
<label for="id">标注的文本</label>
<input type="radio" name="gender" id="male"/>
第四章 初始CSS3
1，CSS概念
Cascading Style Sheet 级联样式表 , 层叠样式表
表现HTML或XHTML文件样式的计算机语言
包括对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定
2，CSS的优势
内容与表现分离
网页的表现统一，容易修改
丰富的样式，使得页面布局更加灵活
减少网页的代码量，增加网页的浏览速度，节省网络带宽
运用独立于页面的CSS，有利于网页被搜索引擎收录
3，CSS的基本语法
选择器{
声明1：值1 ;
声明2：值2 ;
}
选择器：如何才能选中HTML页面上的标签对象
声明：选中HTML对象只会 对该对象的样式声明
值：样式声明的值
例如
select{
color : red;
}
4，CSS的用法
1, 内部样式
写在html的head标签里面
<style type="text/css">
写CSS代码...
</style>
type="text/css" 在html5中可以省略
2, 行内样式
写在标签里面
<a href="#" style="color: aqua;">百度一下</a>
3, 外部样式
1，新建一个css文件
2，将这个css文件和html文件关联起来
链接式：<link href="style.css" rel="stylesheet" type="text/css" />
导入式：
<style type="text/css">
@import url("style.css");
</style>
优先级：行内样式>内部样式>外部样式
5，CSS3基本选择器
1,标签选择器
选中所有的div
div{
}
2,ID选择器 #id 一般是唯一的
选择id为div2的标签
#div2{
}
3,类选择器 class 可以是多个标签
在标签上定义一个class属性
.className{
}
4,并集选择器
多个选择器之间用逗号隔开，表示同时选中
.li1,p{
}
优先级：ID选择器>类选择器>标签选择器
6，补充标签
div: 层级标签，块状标签 一般用来布局
span: 行内标签。一般用来描述文字
font：字体标签
<font size="20px" color="red">dd</font>
7，CSS高级选择器
7.1 层次选择器
1,后代选择器 E F 空格
选择id为div2标签的后代li标签
#div2 li{
border: 1px solid red;
}
2，子选择器 E>F
ol>li{
border: 1px solid red;
}
3，相邻兄弟选择器 E+F
只会向下选择一个
ol+div{ //选择ol相邻的div标签
}
4，通用兄弟选择器 E~F 同辈选择器
向下选择多个同辈的标签
ol~div{ //选择ol同辈的div标签
border: 1px solid red;
}
7.2 结构伪类选择器 （过滤选择器）
Element 元素
Node 节点
Tag 标签
odd 奇数
even 偶数
attribute 属性
E:first-child 作为父元素的第一个子元素的元素E
E:last-child 作为父元素的最后一个子元素的元素E
E F:nth-child(n) 选择父级元素E的第n个子元素F，（n可以是1、2、3），关键字为even、odd
p:nth-last-child(n)
E:first-of-type 选择父元素内具有指定类型的第一个E元素
E:last-of-type 选择父元素内具有指定类型的最后一个E元素
E F:nth-of-type(n) 选择父元素内具有指定类型的第n个F元素
E F:nth-last-of-type(n) 从后面开始查找
1,查找第一个p元素
p:first-child{
background-color: pink;
}
2，查找最后一个作为子元素的p标签
p:last-child{
background-color: pink;
}
3，查找指定的子元素
li:nth-child(odd){
background-color: blue;
}
小括号中可以写下标n，下标从1开始
可以写表达式 2n ,那么表达式的n从0开始
可以写odd ,even
4，选择父元素内具有指定类型的第n个F元素
p:nth-of-type(2){
background-color: pink;
}
7.3 属性选择器
E[attr] 选择匹配具有属性attr的E元素
E[attr=val] 选择匹配具有属性attr的E元素,并且属性值为val（其中val区分大小写）
E[attr^=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val] 选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val] 选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
1，查找具有name和id属性的div标签
div[name][id]{
background-color: orange;
}
2，查找name属性为div4的div标签
div[name=div4]{
background-color: orange;
}
3，查找name属性是di开头的div标签
div[name^=di]{
background-color: orange;
}
4，查找name属性是以c结尾的div标签
div[name$=c]{
background-color: orange;
}
5，查找name属性包含c的div标签
div[name*=c]{
background-color: orange;
}
第五章，CSS3美化网页元素
1，字体样式
font-family 设置字体类型 font-family:"隶书";
font-size 设置字体大小 font-size:12px;
font-style 设置字体风格 font-style:italic;
font-weight 设置字体的粗细 font-weight:bold;
font 在一个声明中设置所有字体属性 font:italic bold 36px "宋体";
1.1自定义字体
前提:要下载ttf格式的字体文件，再将字体文件放在项目中
@font-face {
font-family:"gun";
src: url("字体视界法棍体.ttf");
}
div{
font-family: "gun";
}
1.2 字体风格
font-style:
属性值
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique 浏览器会显示一个倾斜的字体样式。
inherit 规定应该从父元素继承字体样式。
2,文本样式
color 设置文本颜色 color:#00C;
text-align 设置元素水平对齐方式 text-align:right;
text-indent 设置首行文本的缩进 text-indent:20px;
line-height 设置文本的行高 line-height:25px;
text-decoration 设置文本的装饰 text-decoration:underline;
2.1 字体颜色
div{
color:red;
}
颜色值：可以写英文单词 例如 red,green ,yellow ,orange ,pink,blue....
十六进制的颜色值 例如 #ff00ff #fff
rgb(255,0,0);
rgba(255,0,0,0.3); a 最后一个值表示透明度（0-1）0表示完全透明，1表示不透明
2.2 text-decoration
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
2.3 文本阴影
text-shadow : color x-offset y-offset blur-radius;
text-shadow: black 5px 5px 3px;
color:阴影的的颜色
x-offset：x轴的位置，为正数则向右 ，负数向左
y-offset：y轴的位置，正数向下，负数向上
blur-radius：模糊半径，阴影的模糊度。越大越模糊。只能为正数。
2.4 超链接伪类
a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}
a:visited 单击访问后超链接样式 a:visited {color:#333;}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:#ff7300;}
a:active 鼠标单击未释放的超链接样式 a:active {color:#999;}
a:link->a:visited->a:hover->a:active
love hate 爱恨原则 l v h a
a:hover{ /* 鼠标移上超链接时 */
/* 移上去的颜色 */
color: red;
/* 去掉下划线 */
text-decoration: none;
}
2.5 列表样式2-1
list-style-type
none 无标记符号 list-style-type:none;
disc 实心圆，默认类型 list-style-type:disc;
circle 空心圆 list-style-type:circle;
square 实心正方形 list-style-type:square;
decimal 数字 list-style-type:decimal
2.6 背景样式
背景颜色
background-color : red;
背景图片
background-image : url(地址) ;
background-repeat : repeat/no-repeat/repeat-x/repeat-y ; 背景的平铺方式
background-position : x y ; 背景的定位 x 是水平定位，y是垂直定位。
background : 背景样式简写
background:red; //背景颜色
background:url(图片地址) no-repeat x y; 简写方式
背景尺寸
background-size :
auto 默认值，使用背景图片保持原样
percentage 当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover 整个背景图片放大填充了整个元素
contain 让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域
2.7 CSS3渐变
background: linear-gradient(to right,red,yellow,blue)
语法：linear-gradient ( position, color1, color2,…)
position：to left(从右到左); to right ; to top ; to bottom ; to left top;
top 上 ，bottom 下 ，left 左 ， right 右
第六章 盒子模型
盒子模型的组成
1，边框（border-top border-bottom border-left border-right border）
2，内容（元素）
3，内容到边框的距离叫做内边距 padding
padding-top padding-bottom padding-left padding-right
4，盒子与其他元素之间的距离叫做外边距 margin
margin-top margin-bottom margin-left margin-right
1,边框
border
border-color : 边框颜色
border-width : 边框宽度
thin 细
medium 中细
thick 厚
像素值
border-style : 边框样式
solid(实线) double(双线) dashed(虚线) dotted(点线)
none(没有边框) hidden(隐藏边框)
1，border : 1px solid red; 所有边框 都是同样的效果
2，border-color : red green blue yellow ; 顺时针方向每个边框的颜色 上-右-下-左
3，border-color : red green; 上下是红色，左右是绿色
4，border-color : red green blue; 上是红色，左右是绿色，下是蓝色
2,标签类型的相互转换
1，块状标签 block
2，行内标签 inline
3，行内块状标签 inline-block
通过 display 属性相互转换
display: inline;
3，外边距(margin)
margin:10px; 所有的外边距
margin:10px 20px;
margin:10px 20px 30px;
margin:10px 20px 30px 40px;
margin-top
margin-bottom
margin-left
margin-right
margin:0px auto; 上下没有外边距，左右自适应。居中
网页居中对齐的必要条件
块元素
固定宽度
4，内边距(padding)
5, 盒子模型的实际宽高
宽：内容+左右内边距+左右边框宽度+左右外边距
6，box-sizing
拯救盒子模型
box-sizing：content-box | border-box | inherit;
content-box：默认值
border-box：盒子的宽度或高度等于元素内容的宽度或高度
inherit：元素继承父元素的盒子模型模式
7，圆角边框
border-radius: 10px;
10px 就是圆角的半径
border-radius: 10px; 四个角的圆角半径都是10
制作圆形，半圆，扇形。
8，盒子阴影
盒子阴影
box-shadow: x-offset y-offset blur-radius color inset ;
x-offset : x轴的偏移位置。正数向右，负数向左
y-offset : y轴的偏移位置。正数向下，负数向上
blur-radius : 模糊半径 ，越大越模糊
color : 阴影的颜色
inset : 表示盒子的内阴影，如果不写，则默认是外阴影
x y 模糊半径 背景扩展大小
box-shadow: rgba(255,0,0,.5) 0px 0px 20px 10px ;
位置除了 0px 0px 20px 10px 顺序不能变，其他颜色，可以变
第七章：浮动
1,标准文档流
标准文档流：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式
2,标准文档流的组成
块级元素（block）
<h1>…<h6>、<p>、<div>、列表 <table>
独占一行，可以设置宽度高度
内联元素（inline）
span a
不独占一行，不可以设置设置宽度高度
内联块级元素（inline-block）
img
不独占一行，可以设置宽高度
三种元素之间可以相互转换
display:inline-block;
display:none; 隐藏标签元素
3，浮动
float: left/right/none;
none:是默认值，不浮动
left:向左浮动
right:向右浮动
浮动的特点：
1，浮动会使该标签脱离标准文档流，但不会脱离文字流。可以做文字包裹图片效果
2，浮动会使标签变block元素
3，浮动元素前面有一个未浮动块级元素，则浮动时不会浮动其上。
4，清除浮动
清除浮动对其他元素的影响。
clear:left/right/both;
left 在左侧不允许浮动元素
right 在右侧不允许浮动元素
both 在左、右两侧不允许浮动元素
none 默认值。允许浮动元素出现在两侧
5，父容器塌陷问题解决
1，可以给父容器设置高度
2，在浮动元素后面加上
<div class="clear"></div>
.clear{clear: both; margin: 0px; padding: 0px;}
3，在父容器上加上
.content{
border: 1px solid black;
overflow: hidden;
}
4，在父容器的样式中加上
.content:after{
content: '333';
display: block;
clear: both;
}
6，溢出处理
overflow:
visible 默认值。内容不会被修剪，会呈现在盒子之外
hidden 内容会被修剪，并且其余内容是不可见的
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
第八章 定位网页元素
1，position
position属性
static：默认值，没有定位
relative：相对定位
absolute：绝对定位
fixed：固定定位
1,相对定位
relative属性值
相对自身原来位置进行偏移
偏移设置：top、left、right、bottom
top:向下移动。离上边的距离。
相对定位元素的规律
设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响
设置相对定位的盒子原来的位置会被保留下来
2，绝对定位
absolute
绝对定位会使该元素脱离文档流，原来的位置会被其他元素占用。
如果设置了偏移量 ，并且父元素没有定位，则这个偏移量是相对浏览器（body）
如果父元素设置了定义，则这个偏移量是相对父元素。
3，固定定位
fixed
固定定位也会脱离文档流，
类似绝对定位，不过区别在于定位的基准不是祖先元素，而是浏览器窗口
4，定位小结
相对定位的特性
相对于自己的初始位置来定位
元素位置发生偏移后，它原来的位置会被保留下来
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
相对定位的使用场景
相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
绝对定位的特性
绝对定位是相对于它的定位父级的位置来定位，如果没有设置定位父级，则相对浏览器窗口来定位
元素位置发生偏移后，原来的位置不会被保留
层级提高，可以把标准文档流中的元素及浮动元素盖在下边
设置绝对定位的元素脱离文档流
绝对定位的使用场景
一般情况下，绝对定位用在下拉菜单、焦点图轮播、弹出数字气泡、特别花边等场景
固定定位的特性
相对浏览器窗口来定位
偏移量不会随滚动条的移动而移动
固定定位的使用场景
一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
5 ，z-index属性
调整元素定位时重叠层的上下位置
z-index属性值：整数，默认值为0
设置了positon属性时，z-index属性可以设置各元素之间的重叠高低关系
z-index值大的层位于其值小的层上方
z-index:是用于对定位元素层次之间的上下次序。
第九章 利用CSS3制作网页动画
1,CSS3变形 transform
transform:
translate()：平移函数，基于X、Y坐标重新定位元素的位置
translate(10px ,20px); 10px 表示向右平移10px,20px表示向下平移20px
translate(10px); 一个值向右平移
translateX(tx); 只在x轴平移
translateY(ty); 只在y轴平移
translateZ()
scale()：缩放函数，可以使任意元素对象尺寸发生变化
scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
scale(2); x轴和y轴同时放大2倍
scale(1,2); x轴1倍不变，y轴放大2倍
scaleX(sx)：表示只设置X轴的缩放
scaleY(sy)：表示只设置Y轴的缩放
rotate()：旋转函数，取值是一个度数值
rotate(45deg); 旋转45度
transform-origin: 0px 0px; 指定旋转时的中心位置
left top ;
50% 50%
skew()：倾斜函数，取值是一个度数值
skew(10deg); x轴倾斜10度
skew(10deg,10deg); x轴 y轴
skewX（ax）：表示只设置X轴的倾斜
skewY（ay）：表示只设置Y轴的倾斜
2，CSS3过渡
transition:[transition-property transition-duration transition-timing-function transition-delay ]
transition-property:要实现过度的属性
指定的CSS属性
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
transition-duration:
义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
transition-timing-function : 过渡动画函数
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定 动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
transition-delay : 过渡延迟时间
指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
0：默认值，元素过渡效果立即执行
扫一扫
826
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
