昨天有一个朋友问我，我网站右上角那几个按钮，鼠标经过时变色是怎么做到的，我答道是用CSS控制
的，他大吃一惊，说还以为我是用javascript来实现的，怎么CSS也可以实现这种特效吗?我无语。。
好吧，虽然网上已经很多这类的教程了，但既然某些懒人还是懒得自己去找，那我就在这里写一次吧，
CSS有三个伪类用来控制访问样式，分别是a:link,a:hover和a:visited。
a:link就是链接正常时的样式，a:hover是鼠标经过时链接的样式，而a:visited则是已经访问过的链接的
样式。它们有几个常用的属性：
text-decoration：控制链接文本的下划线
color：控制链接文本的颜色
background-color：链接的背景颜色
background-image：用来放置背景图片的
通常我们会把链接做成列表，譬如
href="XXX.html">按钮1
href="XXX.html">按钮2
很多写CSS的时候就会直接写
.button ul li a{background-image:url(XXX.gif); width:80px;
height:30px;}
然后出来的效果根本不是这么回事，背景图片只显示了很小的一块， 不能显示整个按钮出来。
这里有一个误区，我们知道标签是属于内联元素(不知道内联元素和块元素概念的童鞋请自行百度
一下)，内联元素是没有宽度和高度属性的，所以你在CSS中指定的宽度和高度是没有用的，背景图片
还是会按照内联元素的方式来显示标签中的内容。
所以，首先要把标签先转换成块元素来显示
.button ul li a{ display:block; background-image:url(XXX.gif);
width:80px; height:30px; line-
height:30px;}
还要加上line-height行高，这样背景图片就会正常显示了
OK，我们来个实例，先用photoshop做好按钮的两个样式，分别是正常时和鼠标经过时的样式，如图
1、这个是正常时的gif图片
CSS代码：.button ul li a{ display:block;
text-decoration:none;
background:url(../images/button.gif)
no-repeat;
color:#fff; }//这里的color是文本字体的颜色
2、这个是鼠标经过时的gif图片
CSS代码：.button ul li a:hover{
color:#fff;//同上
text-decoration:none;
background:url(../images/button2.gif)
no-repeat; }
