（嗨，一个标题写了10分钟……痛苦ing……）

写文章经常会分享一些东西，标个名字做个链接，然后让其他童鞋下载。一般我都是打包成7z格式的压缩文件提供下载的，但偶尔也会直接放上Word文档，还有比如PDF格式的教程。提供不同类型的附件时，为了区分也只能多打几个字，加个括号注明下。今天，我们利用CSS就给不同类型的附件加上一个个性的小图标！

演示效果：我是.7z后缀的压缩文件，我是.doc后缀的Word文档，我是.pdf后缀的PDF文档

看到效果了吧，那我们如何实现它呢？往下看，这种效果呢是通过CSS实现，把以下代码添加到主题style.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;}

代码的含义也很清楚，就是让以.zip .7z .rar，.doc，.pdf为后缀的链接，左填充19像素，然后显示不同的小图标。是不是很个性，是不是很简单？那就赶快动手吧~

分享正在使用的这套图标，预览图：

fjtb.jpg

fujian-icons

当然，如果你不想区分不同类型的附件，那推荐使用预览图中第一行第四个图标，只要在CSS代码中多写几个不同的后缀名就行了！

个人认为，利用各种小图标对不同类型的附件进行标识，对访客来说也是相当友好的！

2009年7月27日补充：

评论中ZWWoOoOo童鞋提到：“直接提供下载的就很好，但像我们用网盘的就没用了。” 的确，上述代码是通过检测链接里的后缀名来实现的，所以对使用网盘做下载没特定后缀名的就无法使用此方法了！所以今天给出另一个CSS代码：

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

这句代码就是检测链接中是以“http://www.rayfile.com/”开头的，在其左边加上一个个性图标。

友情提示，如有童鞋使用多种网盘做下载外链，那可以分别使用它们的网站图标作为它们的标识，这样就可以让访客知道他将打开的是哪个网盘了，对访客来说也是相当友好的！