我的CSS心得(1) - 在超链接上加图标

以前在不懂用CSS的时候,在超链接上加图标,往往得到的效果都不是很如意。其实CSS可以帮助我们实现很多超链接样式,这样不仅避免了使用Javascript的麻烦,也加快了运行速度。
  举个例子,大家可以看到 PL-Blog2的模版 中有个更多的链接样式,在前面的图标就是用
CSS定义的。鼠标移动到上面的时候图片的切换也是用CSS控制的。它的样式如下
.more:link,.more:visited{font-weight:bold;background:url(bullet-arrow.gif) no-repeat 0px 0px;padding-left:18px;margin:5px;text-decoration:none;}
.more:hover{background:url(bullet-arrow.gif) no-repeat 0px -15px;}

其中的图片只有一个 bullet-arrow.gif 但是图片有些特别,看图

我把链接图标的信息都存在一张图片里,然后用CSS控制图片时改变背景图片显示的坐标就达到效果了 如果用Javascript来控制图片,那么就麻烦了。

好了,说到这里,有不明白的朋友就给我留言吧。在告诉大家新的模版的一个秘密,用CSS控制网页真的很方便。看下图,这个不同造型的菜单只要改动一下样式表就可以实现了。感兴趣的朋友可以下载回来自己改改看


[本日志由 puterjam 于 2005-02-16 03:56 PM 编辑]
上一篇: PL-Blog 2 开始制作。
下一篇: Blog 喜迁新居!!!
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志:
评论: 8 | 引用: 0 | 查看次数: -
小样[2007-11-22 04:22 PM | | | 60.166.65.235 | del | 回复回复]
这个不行啊`好像是背景链接吧```不是图标链接的切换啊````
不好[2006-10-16 01:49 PM | | | 59.34.242.241 | del | 回复回复]
你这个是在超连接上加背景,不是在加图标!
搞清楚题目啊
puterjam[2005-02-20 10:29 PM | | | 220.173.45.86 | del | 回复回复]
引用内容 引用内容
最初由 热心人 发表于 2005-02-20 10:17 PM:
请问我的按照你的代码做了,效果也出来了,不过就是为什么图片和...

可以这么告诉你,这是IE的毛病,中文字总是要比英文字高那么1~2像素, 你可以在文字后面加上"..."看看,所以对于IE这样的问题.如果是一般的连接只有中文,那么你可以考虑把图形往上提高1~2像素.
热心人[2005-02-20 10:17 PM | | | 222.53.76.218 | del | 回复回复]
请问我的按照你的代码做了,效果也出来了,不过就是为什么图片和文字不能对齐呢,这个问题困扰我好久了!查看图片
Qsonie[2005-02-17 01:41 PM | | | 219.132.142.30 | del | 回复回复]
CSS,网页标准的趋向,一定要学好!哈哈!我也在起步着,,
tug[2005-02-17 10:32 AM | | | 222.35.33.131 | del | 回复回复]
用CSS控制网页,的确很方便。我不太懂网页和CSS,但是一点点尝试(就是动一个数据,然后看看网页什么地方变动了,呵呵)也搞明白了CSS的控制能力。
基本上用CSS改变SKIN很简单。
希望继续保持这个功能。
moodboy[2005-02-16 08:04 PM | | | 61.233.157.94 | del | 回复回复]
大哥过年好呀~!
好久好久没有见到你了呀`1怪想你的呀`1

你过的好吗?
不知道为什么心里老是像是少了些东西~!
怪怪的我也不清楚到底是为什么~!
你那现在上班了没有呀~!
来的时候别忘了给我写封信~!
moodboy_com@163.com
好想你呀~!
小庸[2005-02-16 03:21 PM | | | 222.43.34.94 | del | 回复回复]
干的不错啊
小伙子
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱:
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 开启 | [img]标签 关闭