<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>按钮练习和雪碧图
<style type="text/css">
/* .btn:link{*/
/* display: block;*/
/* width: 54px;*/
/* height: 26px;*/
/* background-image: url(01.png);*/
/* background-repeat: no-repeat;*/
/* }*/
/* .btn:hover{*/
/* width: 110px;*/
/* height: 24px;*/
/* background-image: url(02.png);*/
/* }*/
/* !*鼠标放入时*!*/
/* .btn:active{*/
/* width: 112px;*/
/* height: 28px;*/
/* background-image: url(020.png);*/
/* }*/
/*!* 鼠标点击时*!*/
/*精灵图*/
/*雪碧图*/
.btn:link {
display:block;
width:54px;
height:26px;
background-image:url(01.png);
background-repeat:no-repeat;
}
.btn:hover{
background-position: -93px 0px;
}
.btn:active{
background-position: -186px 0px;
}
/* 解决闪烁 把照片合成一张
照片整合技术background-position
只发一次请求 同时加载多个图片 提高访问效率
雪碧图有点
解决闪烁
一次加载多个图片position
只发一次请求*/
<a href="#" class="btn">
-->
