CSS应用:根据文件类型显示不同图标

久伴与我i好吗

久伴与我i好吗

2016-02-19 18:54

关注图老师设计创意栏目可以让大家能更好的了解电脑,知道有关于电脑的更多有趣教程,今天给大家分享CSS应用:根据文件类型显示不同图标教程,希望对大家能有一点小小的帮助。

  有时候我们的博客上经常会提供一些资源供别人下载,但是像是PJBlog中,所有的下载链接都只用一个图标来表示。有了新CSS3的属性选择符这项新技术后我们就可以根据下载文件的不同类型显示不同的图标了。

    这里我们要用到的是
E [att$=value]{…} 

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

    它的意思用以选取所有以value结尾的元素E。那么我们可以这样写:
a[href$='.torrent'] {   
 padding: 5px 20px 5px 0;  
 background: transparent url(icons/icon_torrent.gif) no-repeat center right;  
}  
a[href$='.vcard'] {   
 padding: 5px 20px 5px 0;  
 background: transparent url(icons/icon_vcard.gif) no-repeat center right;  
}  
a[href$='.exe'] {   
 padding: 5px 20px 5px 0;  
 background: transparent url(icons/icon_exe.gif) no-repeat center right;  
}  
a[href$='.dmg'], a[href$='.app'] {   
 padding: 5px 20px 5px 0;  
 background: transparent url(icons/icon_dmg.gif) no-repeat center right;  

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

CSS应用:根据文件类型显示不同图标

Web开发
CSS应用:根据文件类型显示不同图标

注册文件类型,设置文件图标

编程语言 网络编程
注册文件类型,设置文件图标

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

根据分辨率不同调用不同的css文件

Web开发
根据分辨率不同调用不同的css文件

根据IE版本不同调用不同CSS样式文件

Web开发
根据IE版本不同调用不同CSS样式文件

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

Linux创建FIFO文件类型的方法

服务器
Linux创建FIFO文件类型的方法

XHTML三种文件类型声明

Web开发
XHTML三种文件类型声明

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

躲在自己的角落,假装自己很快乐~

躲在自己的角落,假装自己很快乐~

CSS 让IE ff Opera同时支持Alpha透明

CSS 让IE ff Opera同时支持Alpha透明
下拉加载更多内容 ↓