首页 >web前端 >css教程 >css利用A标签的背景可能作出很有意思的效果第1/2页_经验交流

css利用A标签的背景可能作出很有意思的效果第1/2页_经验交流

PHP中文网
PHP中文网原创
2016-05-16 12:06:371807浏览

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

他提出来的效果,是九天音乐首页一个FLASH的作的效果,要用CSS模仿同样的效果,可能是因为不想用FLASH或是SEO之类的目地。于是用FW作了两张GIF的图片,来模仿这样的效果,由于是是测试用,所以图片等很多方面没有考虑的特别细。有些粗糙,但看上去还是有那么点意思的,呵呵……  

首先说一下:a:link、a:visited、a:hover、a : active:可能有人说我这是废话,但如果是新手看到了这个,会很有用的,别人告诉你的东西,总比自已悟上半天的快。 

复制代码 代码如下:


a:link{} 
a:visited {} 
a:hover {} 
a:active {}  



以上语句分别定义了“正常链接”“已访问过的链接”“鼠标停在上方时”“点下鼠标时”的样式。

对于新手,这里千万要注意,在书写的过程中,这四行的顺序千万要按上边的次序来写,否则显示出来的效果会和预想的不一样。简单的记忆方面就是“LVHA”。love ha.

以下是制用这个效果要用到的两张图片:
         
以下是CSS部分:

复制代码 代码如下:


 


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

复制代码 代码如下:


 

以下是效果:


[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]



声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn