多姿

  • {{ item.name }}
  • 首页
  • 作品
  • 技巧
  • JWPlayer
  • 友链申请
  • 文章归档

CSS为不同类型的附件添加个性图标

  • 东少
  • 2013-05-02
  • 0

为了美化你的wordpress网站,我们可以为不同的附件类型添加不同的个性化图标.这里就是主要用到了css的属性选择器,以下便是相关的css代码:

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

以上代码直接插入到CSS文件中即可,根据实际情况还需要稍作修改。

html:

<a href="http://dz9.net/2013/04/FONT.zip">CSS3 @font-face 实现个性化字体</div>
<a href="http://dz9.net/2013/05/dz9.net_.docx">dz9.net_.docx</a>
<a href="http://dz9.net/2013/05/原·味-褐瞳.mp3">原·味-褐瞳.mp3</a>

这里就不放演示效果了,自己去测试吧!

© 2022 多姿
Theme by Wing