WORDPRES使用CSS为附件添加个性图标

05.11-2010 | 三石 | 4 Comments | 1,358 views

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

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

看到效果了吧，那我们如何实现它呢？往下看，这种效果呢是通过CSS实现，把以下代码添加到主题style.css中即可：

1
2
3

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像素，然后显示不同的小图标。是不是很个性，是不是很简单？那就赶快动

使用网盘做下载没特定后缀名的就无法使用此方法了！所以今天给出另一个CSS代码：

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

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

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

想要试试就赶紧吧~

标签：css, wordpress, 使用技巧, 图标

转载注明来源：三石映像 - « WORDPRES使用CSS为附件添加个性图标 »
本文链接地址：http://www.3anshi.com/wordpres-use-css-to-add-a-personal-attachment-icon.html

一	二	三	四	五	六	日
« 十
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29

三石映像

home / web建站