打印

[讨论] CSS美化链接

复制内容到剪贴板
代码:
/*Elements Developed by Ben Henschel*/
/*External Links*/
/*External Link - adds a little external link icon to all of your external links*/
a[href^="http:"] {background: url(/images/elementsImages/externalLink.gif) no-repeat right top; padding-right:10px;}
/*IMPORTANT: Reset your internal links that use absolute URLS by replacing yoursite.com with your site's URL, below*/
a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"] {background-image:none !important; padding-right:0px;}
/*Use on external links that are images or have background colors/borders...when ever you dont want an icon to appear*/
.exempt {background-image:none !important; padding:0px;}
/*This method does not work for IE6 or IE7 (big surpise) you can add the class .external to a few of your important external links so they work in IE6/7 if you wish. IE will just ignore these rules so there are now worries.*/
.external {background: url(/images/elementsImages/externalLink.gif) no-repeat right top; padding-right:10px;}
/*Email Links - adds small email icon to all mailto links*/
a[href^="mailto:"] {background: url(/images/elementsImages/email_link.png) no-repeat right top; padding-right:22px; padding-bottom:5px;}
/*AIM Links - adds small IM icon to all aim:goim?screenname=username links*/
a[href^="aim:"] {background: url(/images/elementsImages/group.png) no-repeat right top; padding-right:22px; padding-bottom:5px;}
/*PDF Links - adds a small PDF icon to all PDF links*/
a[href$=".pdf"] {background: url(/images/elementsImages/page_pdf.png) no-repeat right top; padding-right:22px; padding-bottom:5px;}
/*DOC Links - adds a small word doc icon to all word document links*/
a[href$=".doc"] {background: url(/images/elementsImages/page_word.png) no-repeat right top; padding-right:22px; padding-bottom:5px;}
/*RSS Links - adds a small Feed icon to all RSS feed links*/
a[href$=".rss"], a[href$=".rdf"] {background: url(/images/elementsImages/feed.png) no-repeat right top; padding-right:22px; padding-bottom:5px;}
IE就不要奢望了
greengnn's space/web design
Design your life with Web Standards WEB标准群:46077068
不错,收藏了。

回复 1# greengnn [楼主] 的帖子

楼主还是解释一下效果撒
最好能够提供原素材 谢谢!
上面的代码有些不是很明白 希望解释一下咯
很遗憾,IE7完美支持

 提示:您可以先修改部分代码再运行
圆通快递是垃圾!

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
没搞懂。。。

TOP

看看css2.0 css3.0的“选择符 Selectors”自然明白,楼主的CSS都是向前的兼容性。
因为浏览器兼容性问题,所以很少人关心这类型CSS的应用...

TOP

收藏

TOP

收藏
AVONLOVE

TOP

收藏,谢谢!

TOP

这个似乎在哪儿看到过
  不过现在很多浏览器都不是很完全支持标准 使用这样的样式实现有点困难
如果说结构与表现相分离的话 我不知道这个是否算是标准 WEB标准里面有  但是不是很好理解

TOP

这个相当的标准,样式与数据分离的很好
另外,除了IE6,我估计都能很好的支持lz写得那一堆属性选择符和*=选择符了
圆通快递是垃圾!

TOP

感觉这个好像用样式也能实现。。。感觉都差不多。。。

TOP

这个写法叫什么来着...以前看到过, 有谁提示一下~
消灭零回复( ̄﹏ ̄)

TOP

引用:
原帖由 iinterest 于 2008-8-26 11:18 发表
这个写法叫什么来着...以前看到过, 有谁提示一下~
属性选择器。^以什么什么开头。$以什么什么结束。
还可以这样写,
a[rel~="friend"]{background-image:url(friend.gif);}
<a href="http://www.abc.com/" rel="friend met colleague">
</a>
链接里的rel属性包含有friend,就被挑出来了,就会有背景图片friend.gif
不要浮躁

TOP

以前有个国外写的一套js就全搞定这一切了...不过要是ie都能完美支持这css的写法那太爽了

TOP

感谢14#的解释
消灭零回复( ̄﹏ ̄)

TOP

这个我以前就讲过的,可是地址忘记了。

TOP