css利用A标签的背景可能作出很有意思的效果

看完了，其实这东西一点技术含量也没有，就是用了两张图片。但是，如果你能让这两张图片有更多的变化，而且能组合得非常好，那一定可能用这样简单的代码来作出很有意思的效果，那时就不是模仿FLASH了，而是FLASH来模仿CSS了。

另然用A标签加宽度或高度不是一个很好的主意，但如果能用简单的代码来实现同样的效果，而且利于维护，我们不用去计较这些东西。就像前段时间听同事说：“技术只是手段”。对，用技术提供好的服务才是最好的，不用特别计较一些东西。就像家里的椅子是用来坐的，而我却用它来当饭桌吃饭，因为在我家这样是最合适的。如果用FLASH来作这样的显示，我想FLASH里边的文字在百度中一定搜不到，而且可不是百分百的用户都有FLASH插件的。

类例的效果应该用客齐集首页的地图上，如果感兴趣可以看一下：http://www.kijiji.cn/index.html

好了，晚安。 

应要求，CSS部分我解释一下！

 程序代码
<style>l
//*代表全部的标签，这里我把所有的标签的marging和padding处理掉；list-style对一些标签不起作用，主要处理掉ul前的序列标记的；
*{ margin:0; padding:0; list-style:none; }
//这个定义网页的文字大小为12px; 行高是正常的1.8倍，和180%是一个意思；还在文字字体和背景色
body{ font-size:12px; line-height:1.8; padding:50px; background: #333; font-family:Verdana;}

//定义ID为test的标签：边框为一个像素的黑色边；左浮动；
#test{ border:1px solid #000; padding:20px; float:left; background:#666666}
//ID用test下边的li标签全部左浮动，并距左边为20个像素
#test li{float:left;margin-left:20px;}

//定义ID为test下边的a标签为block（块）；又定义了宽和高，还有边框等；
#test a{display:block;width:83px; line-height:79px;text-decoration:none; border:1px solid #000; text-align:center;}
//这里就是本文最上边写的两种状态的简写详细见下边的注解1，这里定义了两种状态下的背景图片和文字色；
#test a:link,#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}
//见下边注解1；这里定义了文字色和背景图片还有边框色；
#test a:hover,#test a:active{color:#000;background:url(/upload/20071211191456897.gif); border:1px solid #FF6600;} 
</style>


注解1：

 程序代码
#test a:link,#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}

这行是简写的形式，不简写应该是这样的：

 程序代码
#test a:link{color:#000;background:url(/upload/20071211191456983.gif);}
#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}


前边加了一个#test是这些设置只有在ID为test标签下才会有效，这样不会影响其它地方的设置！


 程序代码

//这样写会对全网页的a标签生效；
a:link{color:#000;background:url(/upload/20071211191456983.gif);}
//这样写会覆盖上一行中重复的属性
#test a:visited{color:#000;background:url(/upload/20071211191456983.gif);}



这里一定要注意的是：覆盖上一行中重复的属性 是“覆盖”，并且是“重复的”标签；

例如以下测试代码：

 程序代码
<style>
 /*这里我定义了文字没有下划线，和文字是加粗的，还有文字的色*/
 a:link,a:visited{color:#000099;text-decoration:none; font-weight:bold}
 a:hover,a:active{color:#000;}

 /*看这里，只有文字的色变了，而其它的属性都是继承下来的*/
 #test a:link,#test a:visited{color:#0000FF;}
 #test a:hover,#test a:active{color:#339900;} 
</style>
看效果：

最新评论