以前在美化网页时,经常会为不同的链接追加不同的图标,以示区别明确告诉用户这是个什么样的链接,更直接。传统的作法是定义不同的class,然后追加到每个链接上,但是现在有了css3强大的属性选择器(IE7及以上版本都支持),就解放了我们命名的阻碍,也对html的结构尺寸减少了不少。
效果:
素材:
网页代码:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
margin: 5px;
}
a{
text-decoration: none;
padding-right: 20px;
background-image: url(a.png);
background-position: right top;
background-repeat: no-repeat;
}
a[href^="http://"]{
background-position-y: -409px;
}
a[href^='mailto:']{
background-position-y: -354px;
}
a[href='home']{
background-position-y: -382px;
}
a[href='#']{
background-position-y: -329px;
}
a[href$='.doc']{
background-position-y: 0;
}
a[href$='.ppt']{
background-position-y: -50px;
}
a[href$='.xls'],a[href$='.xlsx']{
background-position-y: -75px;
}
a[href$='.html']{
background-position-y: -100px;
}
a[href$='.pdf']{
background-position-y: -125px;
}
a[href$='.jpg'],a[href$='.gif'],a[href$='.png']{
background-position-y: -172px;
}
a[href$='.swf']{
background-position-y: -193px;
}
a[href$='.zip'],a[href$='.rar']{
background-position-y: -217px;
}
a[href$='.mp3']{
background-position-y: -245px;
}
a[href$='.exe']{
background-position-y: -273px;
}
a[href$='.txt']{
background-position-y: -300px;
}
</style>
</head>
<body>
<ul>
<li><a href="http://blog.csdn.net/pvfhv">博客</a></li>
<li><a href="home">首页</a></li>
<li><a href="a.doc">word文档</a></li>
<li><a href="b.ppt">powerpoint文档</a></li>
<li><a href="c.xls">excel文档</a></li>
<li><a href="c.xls">excel2014版本文档</a></li>
<li><a href="d.html">html文档</a></li>
<li><a href="e.pdf">pdf文档</a></li>
<li><a href="f.jpg">jpg图片文档</a></li>
<li><a href="f.gif">gif图片文档</a></li>
<li><a href="f.png">png图片文档</a></li>
<li><a href="g.swf">flash文档</a></li>
<li><a href="h.zip">zip压缩文档</a></li>
<li><a href="h.rar">rar压缩文档</a></li>
<li><a href="j.mp3">mp3文档</a></li>
<li><a href="h.exe">exe安装文件</a></li>
<li><a href="a.txt">txt文本文档</a></li>
<li><a href="mailto:abc@gmail.com">abc@gmail.com</a></li>
<li><a href="#">本地链接</a></li>
</ul>
</body>
</html>