您现在的位置是：网站首页> 编程资料编程资料
css利用A标签的背景可能作出很有意思的效果第1/2页_经验交流_
2023-05-25
220人已围观
简介 css利用A标签的背景可能作出很有意思的效果第1/2页_经验交流_
这个效果是今天有人写邮件给我问的一个效果，记前以前利用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部分：
以下是布局部分：
程序代码
他提出来的效果，是九天音乐首页一个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需再刷新一下页面才能执行]
相关内容
- DL.DT.DD实现左右的布局简单例子第1/2页_经验交流_
- 大家看了就明白了css样式中类class与标识id选择符的区别小结_经验交流_
- DIV+CSS布局中不推荐使用的标签集合Dont Use These Tags_经验交流_
- 为了防止乱码，请将用于页面编码的meta charset放到title的前面_经验交流_
- 使用CSS解决文字环绕图片问题的代码_经验交流_
- RGB 加成色 说明_基础教程_
- 非常漂亮的css星级效果总结第1/2页_经验交流_
- 用css alpha 滤镜 实现input file 样式美化代码_经验交流_
- 用margin和overflow属性实现div间距的方法_经验交流_
- 用iframe margin实现调用其他网页的某一区域的方法_经验交流_
