这个效果是今天有人写邮件给我问的一个效果，记前以前利用A标签的背景写过一个类似的效果。于是刚刚回来就写了一下他要求的效果！顺便贴出来和大家分享一下，如果你很有创意，那么你一定能作出更有意思的效果。

他提出来的效果，是九天音乐首页一个FLASH的作的效果，要用CSS模仿同样的效果，可能是因为不想用FLASH或是SEO之类的目地。于是用FW作了两张GIF的图片，来模仿这样的效果，由于是是测试用，所以图片等很多方面没有考虑的特别细。有些粗糙，但看上去还是有那么点意思的，呵呵……
首先说一下：a:link、a:visited、a:hover、a : active：可能有人说我这是废话，但如果是新手看到了这个，会很有用的，别人告诉你的东西，总比自已悟上半天的快。

以上语句分别定义了“正常链接”“已访问过的链接”“鼠标停在上方时”“点下鼠标时”的样式。
对于新手，这里千万要注意，在书写的过程中，这四行的顺序千万要按上边的次序来写，否则显示出来的效果会和预想的不一样。简单的记忆方面就是“LVHA”。love ha.
以下是制用这个效果要用到的两张图片：

以下是CSS部分：

以下是布局部分：
程序代码

以下是效果：


看完了，其实这东西一点技术含量也没有，就是用了两张图片。但是，如果你能让这两张图片有更多的变化，而且能组合得非常好，那一定可能用这样简单的代码来作出很有意思的效果，那时就不是模仿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/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
//见下边注解1；这里定义了文字色和背景图片还有边框色；
#test a:hover,#test a:active{color:#000;background:url(/upload/tech/20091012/20091012141432_3c7781a36bcd6cf08c11a970fbe0e2a6.gif); border:1px solid #FF6600;}
</style>

注解1：
程序代码
#test a:link,#test a:visited{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
这行是简写的形式，不简写应该是这样的：
程序代码
#test a:link{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
#test a:visited{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}

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

程序代码
//这样写会对全网页的a标签生效；
a:link{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.gif);}
//这样写会覆盖上一行中重复的属性
#test a:visited{color:#000;background:url(/upload/tech/20091012/20091012141432_67e103b0761e60683e83c559be18d40c.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>
看效果：

评论 (0) All

登陆 还没注册？