# HTML基础
## 一、html标签
```html
<html></html>之间的文本描述网页
<body></body>之间的文本是可见的页面内容
<title></title>之间的文本是网页标题
<h1></h1>~<h6></h6>为标题
<p>这是段落</p>
<big>这是大号字</big>
<b>这是粗体文本</b>
<em>这是着重文字</em>
<i>这是斜体</i>
<small>这是小号字</small>
<strong>这是加重语气</strong>
<sub>这是下标字</sub>
<sup>这是上标字</sup>
<ins>这是插入字</ins>
<del>这是删除字</del>
<br/>这是换行符
<hr/>这是横线
<!--这是注释-->
<a href="">这是超链</a>
```
### 1、meta元标签
```html
<!--设置网页的关键字-->
<meta name="keywords" content="HTML5,JavaScript,前端,Java" />
<!--指定网页的描述-->
<meta name="description" content="发布h5、js等前端相关的信息"/>
<!--
请求重定向
5秒后跳转页面
url 统一资源定位符
uri 统一资源描述符
-->
<meta http-equiv="refresh" content="5;url=http://www.baidu.com"/>
```
### 2、a标签
<a>标签定义超链接，用于从一张页面链接到另一张页面。
```html
属性：
href:指向要链接的目标
alt:无法加载图片时显示的文字
title:鼠标悬停显示图片的说明文字
width:单独定义宽或高时图片按比例缩放
target
1._blank 新窗口打开网页
2._self 当前页面跳转(默认)
也可以从A页面的甲位置跳到B页面的乙位置:
b.html指定位置添加id
a.html <a href="b.html#id"></a>
#bottom 去底部
#top 去顶部
#id 去指定id处
```
### 3、table标签
```html
<!--
colspan 跨多列
rowspan 跨多行
-->
<table border="1">
<tr align="center">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr align="center">
<td>张三</td>
<td>13</td>
<td rowspan="2">男</td>
</tr>
<tr align="center">
<td>张三</td>
<td>13</td>
</tr>
<tr align="center">
<td>张三</td>
<td colspan="2">13</td>
</tr>
</table>
```
### 4、ol和ul标签
```html
<!--
无序列表
circle 空心圆
disc 默认实心圆
square 实心矩形
-->
<ul type="circle">
<li>香蕉</li>
<li>橘子</li>
<li>苹果</li>
</ul>
<ul type="disc">
<li>香蕉</li>
<li>橘子</li>
<li>苹果</li>
</ul>
<ul type="square">
<li>香蕉</li>
<li>橘子</li>
<li>苹果</li>
</ul>
<!--
有序列表
1 数字顺序
a 小写字母
A 大写字母
i 小写罗马数字
I 大写罗马数字
-->
<ol type="1">
<li>香蕉</li>
<li>橘子</li>
<li>苹果</li>
</ol>
<ol type="a">
<li>香蕉</li>
<li>橘子</li>
<li>苹果</li>
</ol>
<ol type="i">
<li>香蕉</li>
<li>橘子</li>
<li>苹果</li>
</ol>
<!--
dl 自定义列表
dt 列表项
dd 内容
-->
<dl>
<dt>所属学院</dt>
<dd>计算机应用</dd>
<dt>所属专业</dt>
<dd>计算机软件工程</dd>
</dl>
```
## 二、内联框架
frameborder 设置是否显示框架的边框
0 不显示
1 默认值 显示边框
scrolling 设置对象是否可以滚动
auto 默认值 浏览器自动判断是否需要滚动
yes 设置有滚动条
no 不可滚动
noresize 是否允许调整框架窗口大小
超链指向链接 再通过target指向iframe
```html
<frameset rows="20%,*" frameborder="0">
<frame name="top" src="../列表/index.html" scrolling="auto" noresize="noresize" />
<frameset cols="20%,*">
<frame name="left" src="../表格/index.html" scrolling="no" noresize="noresize" />
<frame name="main" src="../选择器/index.html" scrolling="no" noresize="noresize" />
</frameset>
</frameset>
<!--src 初始显示的页面
target 将页面显示进目标框架里
-->
<a href="../作业7.4/test1.html" target="mainFrame">显示第一个页面</a><br />
<a href="../作业7.4/test2.html" target="mainFrame">显示第一个页面</a><br />
<a href="../作业7.4/test3.html" target="mainFrame">显示第一个页面</a><br />
<iframe src="../作业7.4/test4.html" width="800px" height="200px" scrolling="yes" name="mainFrame"></iframe>
```
## 三、表单
form 表单
action 表单提交的路径或者请求地址
method 提交方式get/post
input
text 文本框
1.size 文本框的长度
2.maxlength 能输入的最大字符串长度
3.readonly 只读
4.disabled 不可选
5.value 文本框初始值
6.placeholder 占位符 一般用作提示输入格式
password 密码框
hidden 隐藏域
用户在页面中看不到 元素不影响页面布局
reset 重置按钮 让表单回到初始状态
submit 提交按钮 将表单内容发送到action提供的路径
button 普通按钮 需要js的点击事件才起作用
radio 单选按钮 多个选择项需要指定相同的name值
checkbox 复选框 可同时选择多个选项 一般同类别选项name值设一致
1.checked 默认被勾选
file 文件域
可选择本机文件上传
image 图片点击事件
textarea 文本域
1.rows 设置文本域的高度 字体大小的倍数
2.cols 设置文本域的宽度
select_option 下拉菜单
1.selected 默认被选中
2.multiple 展开下拉菜单
```html
<form action="" method="post">
<input type="text" maxlength="10" size="100" readonly="readonly" id="loginName" name="loginName" value="张三" />只读
<br />
<input type="text" disabled="disabled" />不可选
<br />
<input type="password" name="password" />密码框
<br />
<input type="text" placeholder="占位" />占位
<br />
<input type="hidden" name="h" id="h" value="隐藏" />
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
<br />
<input type="checkbox" name="game" value="dnf" />地下城
<input type="checkbox" checked="checked" name="game" value="cf" />穿越火线
<input type="checkbox" checked="checked" name="game" value="lol" />英雄联盟
<br />
<input type="file" name="file" value="file" />
<br />
<input type="number" />
<br />
<input type="color" />
<br />
<textarea name="" rows="10" cols="50" >首都华盛顿
首都华沙看
发哈开始
</textarea>
<br />
<input type="image" src="../img/rrw/btn_reg.gif" />
<select name="" multiple="multiple">
<option value="">苹果</option>
<option value="" selected="selected">橘子</option>
<option value="">香蕉</option>
</select>
<input type="reset" value="重置按钮" />
<input type="button" onclick="on()" value="普通按钮" />
<input type="submit" value="提交按钮"/>
</form>
<form action="">
<!--fieldset标签
在字段集legend包含的文本和其他元素外面绘制一个方框
-->
<fieldset id="">
<legend>用户信息</legend>
姓名：<input type="text" />
年龄：<input type="text" /><br />
手机：<input type="text" />
邮箱：<input type="text" /><br />
<legend>用户信息</legend>
姓名：<input type="text" />
年龄：<input type="text" /><br />
手机：<input type="text" />
邮箱：<input type="text" /><br />
</fieldset>
</form>
<script type="text/javascript">
function on(){
alert("你点我了")
}
</script>
```
# CSS基础
## 一、字体和文本
/**
* color 设置字体颜色
* font-size 字体大小
* 实际为字体所占格子的大小
* font-family 字体类型
* 可以同时指定多个字体 浏览器优先使用前边字体 不支持则换下一个
* 分为5大类：1.serif 衬线字体
* 2.sans-serif 非衬线字体
* 3.monospace 等宽字体
* 4.cursive 草书字体
* 5.fantasy 虚幻字体
* font-style 字体风格
* 1.normal 默认值 标准字体显示
* 2.italic 斜体
* 3.oblique 文字倾斜效果 大部分浏览器不对两种进行区分
* font-weight 可用来设置文本的加粗效果
* 1.normal
* 2.bold 文字加粗显示
* 3.100~900九种值
* font-variant 可用来设置小型大写字母
* 1.normal
* 2.small-caps 文本以小型大写字母显示 字体变小但是小写转大写
*/
```html
<style type="text/css">
.p1{
font-style: italic;
color: red;
font-size: 30px;
font-family: "华文彩云" "curlz mt" "微软雅黑";
font-variant: small-caps;
/**
* 斜体 加粗 小大写没有顺序要求 可写可不写
* 大小和字体需要设置
* 字体必须为最后一个样式 大小为倒数第二个
/*font: small-caps bold italic 60px "微软雅黑";*/
}
.p2{
font-size: 20px;
/**
* line-height 行高 用来设置行间距
* 行间距=行高-字体大小
* 1.直接设置大小
* 2.指定一个百分数，相对于字体大小进行计算
* 3.传一个数值，代表字体大小的倍数
*/
line-height: 2;
}
.p3{
/**
* text-transform 设置文本大小写
* 1.none 默认值 不做任何处理
* 2.capitalize 单词首字母大写 通过空格识别单词
* 3.uppercase 所有字母大写
* 4.lowercase 所有字母小写
* text-decoration 可用来设置文本的修饰
* 1.none 默认值 正常显示
* 2.underline 为文本添加下划线
* 3.overline 为文本添加上划线
* 4.line-through 为文本添加删除线
* letter-spaceing 可以指定字符间距
* word-spaceing 可以设置单词之间的距离 即字符间空格大小
*/
text-transform: capitalize;
text-decoration: line-through;
letter-spacing: 10px;
word-spacing: 20px;
}
a{
/**
* 去除超链默认自带的下划线
*/
text-decoration: none;
}/**
* text-align 用于设置文本的对齐方式
* 1.left 默认值 文本靠左对齐
* 2.right 文本靠右对齐
* 3.center 文本居中对齐
* 4.justify 两端对齐
* text-indent 设置首行缩进 给定正值向右缩进 负值向左 可以用于隐藏
*/
</style>
```
## 二、选择器
### 1、元素选择符
```html
<style>
/*所有元素*/
*{
color: red;
}
/*所有a标签*/
a{
color: blue;
font-size: 40px;
}
/*id为content的p对象*/
p#content{
color: gray;
}
/*class值为hh的类选择器 可以有多个对象*/
p.hh{
color:green;
}
</style>
```
### 2、关系选择符
```html
<style>
/*被center包含的所有p元素 包括直接子元素和间接子元素*/
center p{
color: darkorchid;
}
/*只包括直接子元素*/
center>p{
font-size: 40px;
}
/*紧贴在center元素后的p元素 两者为兄弟元素*/
center+p{
font-size: 30px;
}
/*center元素后面的所有兄弟元素p*/
center~p{
color: hotpink;
}
</style>
```
### 3、属性选择符
```html
<style>
/*所有具有class属性的a元素*/
a[class]{
font-size: 50px;
}
/*具有class元素且属性值等于oo的a元素*/
a[class="oo"]{
color: red;
}
/*具有class且有用空格分隔的kk值*/
p[class~="kk"]{
font-size: 60px;
}
/*具有class且属性值以cc开头*/
p[class^="cc"]{
color: pink;
}
/*具有class且属性值以ff结尾*/
p[class$="ff"]{
color: brown;
}
/*具有class且属性值包含ss*/
p[class*="ss"]{
color: green;
}
/*具有class且属性值以aa开头并用-分隔字符串*/
p[class|="aa"]{
color: yellow;
}
</style>
```
### 4、伪类选择符
```html
<style type="text/css">
a:link{
color: red;
}
a:hover{
color: blue;
}
a:active{
color: yellow;
}
a:visited{
color: green;
}
/*对象成为输入焦点时的样式*/
input:focus{
background-color: red;
}
/*p标签中除class值为nn外其他元素*/
p:not(.nn){
color: blue;
}
/*li的父元素的第一个子元素*/
li:first-child{
color: green;
}
/*最后一个子元素*/
li:last-child{
color: yellow;
}
/*父元素仅有一个子元素*/
li:only-child{
font-size: 40px;
}
/*父元素的第n个元素 这里是2
或者even偶数个 odd奇数个
*/
li:nth-child(2){
color: red;
}
/*父元素的倒数第n个元素*/
li:nth-last-child(2){
color: #9932CC;
}
/*同类型(这里是p)中第一个同级(层)兄弟元素 不同层的第一个都生效*/
p:first-of-type{
font-size: 50px;
}
/*没有任何子元素(包括text节点)的元素*/
p:empty{
height: 25px;
border: 1px solid #9932CC;
background-color: red;
}
/*处于选中状态的元素(checkbox或radio)*/
input:checked+span{
background-color: #0000FF;
}
/*处于可选状态的元素
* enabled 默认
* 不可选 disabled
*/
input:disabled{
background-color: gray;
}
input:enabled:focus{
background-color: yellow;
}
/*去掉无序列表前面标记*/
ul{
list-style: none;
}
</style>
```
### 5、伪对象选择符
```html
<style type="text/css">
/*第一个字符*/
p:first-letter{
font-size: 40px;
font-weight: bold;
}
/*第一行*/
p:first-line{
color: red;
}
/*设置在对象前的内容，与content一起使用*/
p:before{
background-color: yellow;
content: "能看到我吗";
}
p:after{
font-size: 20px;
content: "我走了";
}
/*对象被选择*/
p::selection{
color: pink;
}
</style>
```
## 三、内联元素
```html
<style type="text/css">
.box1{
/**
* display:none; 不会再页面中显示且不再占据页面的位置
* visibility 设置元素的隐藏和显示的状态
* 1.visiable 默认值 默认会在页面显示
* 2.hidden 元素隐藏 不会在页面中显示 但依然占用位置
*/
width: 1000px;
height: 100px;
background-color: red;
visibility: hidden;
}
.s1{
/**
* 内联元素不能设置width和height
* padding-left padding-right 可以设置水平方向的内边距
* 可以设置垂直方向内边距 但不会影响页面布局
* border 可以设置边框 但垂直的边框不会影响页面布局
* margin-left margin-right 支持水平方向的外边距
* 不支持垂直外边距
* 水平方向的相邻外边距不会重叠
*/
padding-left: 100px;
padding-right: 100px;
border: 50px blue solid;
margin-left: 100px;
margin-right: 100px;
}
a{
/**
* display 可以将一个内联元素变成块元素
* 1.inline 将一个元素作为内联元素显示
* 2.block 将一个元素设置块元素显示
* 3.inline-block 将一个元素转换为行内块元素
* 既可以设置宽高又不会独占一行
* 4.none 不显示元素 且元素不会在页面中继续占有位置
* visibility : hidden 隐藏的元素虽然不会在页面中显示 但依然占用位置
*/
background-color: green;
display: inline-block;
width: 500px;
height: 500px;
}
</style>
```
## 四、盒子模型
```html
<style type="text/css">
/**
* div真实大小
* 1.内容区 大小由width height指定
* 2.边框 border
* 3.内边距 padding
*/
div{
width: 400px;
height: 400px;
background-color: red;
/**
* border-width 边框宽度
* 1.指定一个值 上下左右
* 2.指定两个值 上下 左右
* 3.指定三个值 上 左右 下
* border-color 边框颜色 也可以指定四边不同颜色
* border-style 边框样式
* 1.none 默认值，没有边框
* 2.solid 实线
* 3.dotted 点状边框
* 4.dashed 虚线
* 5.double 双线
* 同样可以指定四边不同样式
* padding 内边距 边框与内容区的距离
* margin 外边距
* 1.auto 自适应能设置的最大值
* 如margin-left 容器左外边距设成最大值 浏览器宽度减去容器宽度
* 子元素样式以父元素为标准
*/
border-color: black;
border-width: 20px 30px 40px;
border-left-style: solid;
border-right-style: dashed;
border-top-style: dotted;
border-bottom-style: double;
padding: 50px 20px;
margin-left:auto;
/*border: solid 10px yellow;*/
}
/*消除浏览器自带边距样式*/
*{
margin: 0;
padding: 0;
}
</style>
```
## 五、文档流
文档流
块元素
1.块元素在文档流中会独占一行，块元素会自上向下排列
2.块元素在文档流中默认宽度是父元素的100%
3.块元素在文档流中的高度默认被内容撑开
内联元素
1.内联元素在文档流中只占自身大小，默认从左向右排列
2.内联元素的宽度高度默认被内容撑开
auto
当元素的宽度值为auto时，此时指定内边距不会影响可见框的大小
```html
<div style="background-color: red;">
<div style="height: 50px;"></div>
</div>
<div style="width: 100px; height: 100px; background-color: green;"></div>
<span style="background-color: yellowgreen;"> 我是一个span</span>
<span style="background-color: yellowgreen;"> 我是一个span</span>
<span style="background-color: yellowgreen;"> 我是一个span</span>
<span style="background-color: yellowgreen;"> 我是一个span</span>
```
### 1、浮动
浮动的元素不会盖住文字 文字会自动环绕在浮动元素的周围
块元素在文档流中默认垂直排列
如果希望块元素在页面中水平排列 可以使块元素脱离文档流
float 使元素浮动
1.none 默认值
2.left 元素脱离文档流 向页面左侧浮动
3.right
元素脱离文档流后，下边的元素会立即向上移动
元素浮动会尽量向页面的左上或右上移动 直到遇到父元素的边框或者其他浮动元素
如果浮动元素上方是一个没有浮动的块元素 则浮动元素在该元素下方停靠 不会超过块元素
消除浮动：
clear
1.left 消除左侧浮动元素对其的影响
2.right
3.both 消除两侧浮动元素对其的影响 自动选择左右影响较大的
### 2、overflow
子元素默认存在于父元素的内容区中 超过内容区大小时会溢出
overflow 设置如何处理溢出内容
1.visiable 默认值 不会对溢出内容做处理
2.hidden 溢出的内容会被裁剪
3.scroll 会为父元素添加水平和垂直滚动条 不论内容是否溢出
4.auto 会根据需求添加水平和垂直滚动条
### 3、高度塌陷
在文档流中，父元素的高度默认是被子元素撑开的。但是当为子元素设置浮动以后，子元素会完全脱离文档流。此时会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下方的所有元素都会向上移动，导致页面布局混乱
1.将父元素的高度写死
父元素的高度将不能自动适应子元素的高度，不推荐使用
2.开启元素的BFC
特性：
1.父元素的垂直外边距不会和子元素重叠
2.开启BFC的元素不会被浮动元素覆盖
3.开启BFC的元素可以包含浮动的子元素
开启方式
1.设置元素浮动
使用这种方式虽然可以撑开父元素，但会导致父元素的宽度丢失，也会导致下方元素上移。不能解决问题
2.设置元素绝对定位
3.设置元素为inline-block
可以解决问题，但是会导致宽度丢失。不推荐
4.将元素的overflow设置为一个非visible的值
推荐设置为hidden
clear
可以直接在高度塌陷的父元素最后添加一个空白的div
由于这个div并没有浮动，所以可以撑开父元素的高度
再对其进行消除浮动
缺点：会在页面中添加多余的结构
参数：
1.left 消除左侧浮动元素对其的影响
2.right
3.both 消除两侧浮动元素对其的影响 自动选择左右影响较大的
```html
<style>
/**
* 解决方案
* 通过after伪类向元素的最后添加一个空白的块元素，然后对其消除浮动
* 不会再页面中添加多余的div
*/
.clearfix:before,.clearfix:after{
/*添加一个内容*/
content: "";
/*转换为一个块元素*/
display: block;
/*消除两侧的浮动*/
clear: both;
}
/*在IE6及以下不支持after伪类 需要使用hasLayout处理*/
.clearfix{
zoom: 1;
}
</style>
```
## 六、背景
```html
<style type="text/css">
.box1{
height: 500px;
margin: 0 auto;
background-color: #bfa;
/**
* background-image 设置背景图片
* 1.如果背景图片大于元素，默认会显示图片的左上角
* 2.如果背景图片和元素一样大，则会将背景图片全部显示
* 3.如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
* 4.一般情况下设置背景图片时都会同时指定一个背景颜色
*/
background-image: url(img/1.jpg);
/**
* background-repeat 用于设置背景图片的重复方式
* 1.repeat 默认值，背景图片会水平垂直都重复平铺
* 2.no-repeat 背景图片不会重复，只显示一张
* 3.repeat-x 背景图片沿水平方向重复
* 4.repeat-y
*/
background-repeat: no-repeat;
/**
* background-position 调整背景图片再元素中的位置
* 1.top right left bottom center给定水平和垂直方向两个值 如果只给一个则第二个默认是center
* 2.指定两个数字代表偏移量 正数向右或下 负数向左或上
*/
background-position: -80px -40px;
/*background-attachment: fixed;*/
}
body{
background-image: url(img/1.jpg);
background-repeat: no-repeat;
/**
* background-attachment 设置背景图片是否随页面一起滚动
* 1.scroll 默认值 背景图片随着窗口滚动
* 2.fixed 背景图片会固定在某一位置 始终跟随页面
* 一般此属性设置给body
*/
background-attachment: fixed;
}
</style>
```
## 七、表格
```html
<!--
有一些情况下表格是非常长的 这时就需要将表格分为三个部分，表头，表体，表尾
HTML中为我们提供了三个标签
thead tbody tfoot
这三个标签的作用就是用来区分表格的不同部分，是table的子标签，而tr则需要写在这些标签当中
thead中的内容永远会显示在表格的头部
tbody中的内容永远会显示在表格的中间
tfoot中的内容永远会显示在表格的底部
如果表格中没有写tbody，浏览器会在表格中自动添加，并将所有的tr都放到tbody中
所以tr并不是table的子元素，而是tbody的子元素
通过table>tr无法选中行 需要通过tbody>tr
-->
<style type="text/css">
table{
width: 300px;
margin: 0 auto;
/**
* table和td边框之间默认有一个距离
* 此属性可以设置这个距离
*/
border-spacing: 0px;
/**
* border-collapse 设置表格的边框合并
* 此属性会使border-spacing失效*/
border-collapse: collapse;
}
</style>
```
## 八、层级与透明度
```html
<style type="text/css">
.box2{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
/**
* z-index 设置元素的层级
* 如果定位元素的层级是一样，则下边的元素会盖住上边的
* 给定一个正整数作为值，值越大层级越高，越上层显示
* 对于没有开启定位的元素不能使用z-index
* 父元素的层级再高也不会盖住子元素
*/
z-index: 25;
/**
* opacity 设置元素的背景透明度
* 需要给定一个0-1之间的值
* 0表示完全透明
* 1表示完全不透明
*/
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
```
## 九、定位
### 1、相对定位
```html
<style type="text/css">
.box2{
width: 200px;
height: 200px;
background-color: blue;
/**
* relative 相对定位
* 1.当开启了元素的相对定位以后，而不设置偏移量，元素不会发生任何变化
* 2.相对定位是相对于元素在文档流中原来的位置进行定位
* 3.相对定位的元素不会脱离文档流
* 4.相对定位会使元素提升一个层级
* 5.相对定位不会改变元素的性质，块还是块，内联还是内联
*/
position: relative;
/**
* 当开启了元素的定位(position属性是一个非static值)时
* 通过top right left bottom设置偏移量
* 或者给定指定数值
* 通常偏移量只需要设定水平和垂直方向两个值
*/
top: 100px;
left: 100px;
}
</style>
```
### 2、绝对定位
```html
<style type="text/css">
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/**
* absolute 绝对定位
* 1.开启绝对定位，会使元素脱离文档流
* 2.开启绝对定位后如果不设置偏移量，元素的位置不会发生变化
* 3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定的（一般开启子元素的绝对定位时都会同时开启父元素的相对定位）
* 4.绝对定位会使元素提升一个层级
* 5.绝对定位会改变元素的性质，内联元素会变成块元素
*/
position: absolute;
top: 100px;
}
</style>
```
### 3、固定定位
```html
<style type="text/css">
.box2 {
width: 200px;
height: 200px;
background-color: yellow;
/**
* fixed 固定定位
* 1.大部分特点与绝对定位相同
* 2.固定定位永远都会相对于浏览器窗口进行定位
* 3.固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动
*/
position: fixed;
left: 0px;
top: 0px;
}
</style>
```
## 十、图片整合
```html
<style type="text/css">
/**
* 问题：点击链接产生视觉点击效果需要切换背景图片来完成 使用不同图片进行加载有闪烁效果出现 体验不佳
* 原因：背景图片以外部资源的形式加载进网页，每加载一次需要发送一次请求
* 而外部资源并不是同时加载，只有在使用的时候才会开始加载
* 本次由于浏览器开始只会加载link时的背景图片 当hover和active被触发时才开始加载对应图片需要一定时间 所以可能会产生视觉上的闪烁效果
* 解决：将三张图片整合同时加载
* 再通过background-position切换图片的位置进行显示
* 这样浏览器只需要发送一次请求
*/
.btn:link{
display: block;
width: 93px;
height: 29px;
background-image: url(img/btn.png);
background-repeat: no-repeat;
}
.btn:hover{
background-position: -93px 0px;
}
.btn:active{
background-position: -186px 0px;
}
</style>
```
