前言
本节实现的目标是使用HTML的CSS实现图标的状态的切换，效果图如下
HTML标签 <a> 四态
本demo使用html中的<a>标签来演示，<a>也是有四态，如下：
a:link /*未访问时的状态*/
a:visited /*已访问过的状态*/
a:hover /*鼠标移动到链接上时的状态*/
a:active /*鼠标按下去时的状态*/
本节只实现了其中的三态转换，分别为：link、hover、active，图标如下
扫描二维码关注公众号，回复：
9980700 查看本文章
该图标为90x30尺寸
HTML代码
上图为demo的文件夹内容，其中img文件夹里存放的是上图所示的三态图标，其中test.html内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.test a{background: url(img/testweb.png) no-repeat scroll 0 0 transparent;
width: 30px;
display: block;
height: 30px;
line-height: 12em;
overflow: hidden;
}
.test a:hover{
background-position: -30px 0px;
}
.test a:active{
background-position: -60px 0px;
}
</style>
</head>
<body>
<div class="test">
<a >关闭</a>
</div>
</body>
</html>
该工程 点此下载
你可以看到代码其实不多，因为我也是小白，好记性不如烂笔头，接下来我将上面用到的知识整理一下
