当前位置:起点学习辅导网培训频道电脑知识学习网页制作HTML与CSS教程CSS应用:根据文件类型显示不同图标

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

08-08 00:34:14浏览次数:692栏目:HTML与CSS教程
标签:html与css教程,css教程,html网页设计教程, CSS应用:根据文件类型显示不同图标,

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

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

    它的意思用以选取所有以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;  

,CSS应用:根据文件类型显示不同图标
《CSS应用:根据文件类型显示不同图标》相关文章
给资讯打分:
网友评论: