给不同类型的网盘链接和外链加了个性图标

» 2009-07-27 37条评论

今天在木木木木木的帮助下用 css + gif图片“给不同类型的网盘链接加了个性图标”,并且给外链加上外链标志,效果如下:

ziddu网盘
uushare网盘
VIP-file网盘
纳米盘
大米盘
Skydrive
Rayfile
.rar .zip
.7z
外链

图片大小统一用16*16,css 代码参考下面的。

其中的外链的 css 代码如下:

a[href^="http:"]{background:url(images/external.gif) no-repeat right center;padding-right:19px;margin-right:6px;}

其中网盘链接的 css 代码如下:

a[href^="http://www.namipan.com/"]{background:url(images/namipan.gif) no-repeat left center;padding-left:19px;}
a[href^="http://www.damipan.com/"]{background:url(images/damipan.gif) no-repeat left center;padding-left:19px;}
a[href^="http://www.rayfile.com/"]{background:url(images/rayfile.gif) no-repeat left center;padding-left:19px;}

其中文件类型的 css 代码如下:

a[href$=".zip"],a[href$=".7z"],a[href$=".rar"]{background:url(images/rar.gif) no-repeat left center;padding-left:19px;}
a[href$=".doc"]{background:url(images/word.gif) no-repeat left center;padding-left:19px;}
a[href$=".pdf"]{background:url(images/pdf.gif) no-repeat left center;padding-left:19px;}

上面的都是全局定义,我就只在 .post 里面的链接才使用这些个性链接图标,只要在上面的“a[href……”前面加: .post 就可以了,懂点 css 的不说也知道。

相关详细内容可以参考木木的《给不同类型的网盘链接和外链加了个性图标》,他那里还有个性图片下载。

补充:

上面的效果在该死的 IE6 下无效,但大家别忘了dean edwards和他的开源项目ie7-js,我们只要使用一段javascript,就能让 IE6 表现得像个正常的、兼容web标准的浏览器。(第一次看到此方法是Betty的这篇文章《让ie6像个正常的浏览器》)

那么要使 IE6 也有上面的效果,只要在你的主题文件 hearder.php 里面的 <head></head> 之间加上下面的代码就OK了:(复制后自行把 “ 改为英文的 ",《》改为英文的<>)

- -!  贴不了代码,直接去ie7-js

zww
or
oooo

“给不同类型的网盘链接和外链加了个性图标”有37条评论

  1. 0cai says:

    恩 不错的解决方案 记下了 在用户体验上有好处!

  2. Sivan says:

    CSS3就连IE7都有很多属性不支持。

    1. zwwooooo says:

      其实微软应该像对付盗版那样强迫用户升级到ie8——不过国内的政府、银行等网就会死翘翘,但这样也可以促使这些顽固分子升级他们的网站。

  3. 世麟 says:

    不需要了,精简是王道!

    1. zwwooooo says:

      其实太精简也是个极端,恰到好处是最好,但往往是最难的。

  4. ligyxy says:

    skydrive这样的网盘地址没办法有个统一的匹配规则。除非CSS支持正则表达式。。

    1. zwwooooo says:

      对于个人来说前缀一样的,但你想设置一个大家通用的网址是不行的——skydrive是类似每个用户一个子域名前缀。

  5. 你的站做的很好

  6. 这个功能可以拿来试用下,不过不用在网盘上!

  7. says:

    如何联系你,我想请你做个个性的网盘链接图标

回复给 zwwooooo ¬
取消回复

昵称 *

网址

B em del U Link Code Quote