网站建设之css技巧之PDF、ZIP、DOC链接的标注
网站建设之css技巧之PDF、ZIP、DOC链接的标注
有时候我们希望能明确的用小图标来标明我们的超链接的类型。是一个zip文档还是一个pdf文件。这样访问者就知道他所要点击的这个链接是下载而不是打开另一个页面了。如果所有的人都使用IE7或者FF的话。我们完全可以使用[att$=val]属性选择器,寻找以特定值(比如.zip和.doc)结尾的属性。
a[href$=".pdf"] { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
a[href$=".zip"] { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }
不幸的是IE6以下浏览器不支持属性选择器。好在,可以通过在每个元素中添加类,使用JavaScript和DOM实现相似的效果。
下面给出了一个解决办法:
function fileLinks() {
var fileLink;
if (document.getElementsByTagName('a')) {
for (var i = 0; (fileLink = document.getElementsByTagName('a')[i]); i++) {
if (fileLink.href.indexOf('.pdf') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'pdfLink';
}
if (fileLink.href.indexOf('.doc') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'docLink';
}
if (fileLink.href.indexOf('.zip') != -1) {
fileLink.setAttribute('target', '_blank');
fileLink.className = 'zipLink';
}
}
}
}
window.onload = function() {
fileLinks();
}
当然,你需要在你的css文件中,增加这几个css类:
.pdfLink { padding-right: 19px; background: url(pdf.gif) no-repeat 100% .5em; }
.docLink { padding-right: 19px; background: url(doc.gif) no-repeat 100% .5em; }
.zipLink { padding-right: 17px; background: url(zip.gif) no-repeat 100% .5em; }
以上就是网站建设之css技巧之PDF、ZIP、DOC链接的标注,希望能帮助大家~!
- 1如何建设网站对百度, google更具有亲和力
- 22015年百度搜索引擎优化新方向、趋势分析
- 32015年百度、搜狗、360搜索引擎的市场占有率对比分析
- 4重庆OA办公系统网站2015年3月份工作安排
- 5虚拟主机常用技术术语解密
- 6网站的重点是什么?展示产品、展现企业吗?
- 7保护好域名安全的几点建议
- 82015年-2016年微信平台OA办公系统、CRM系统建设不可少
- 9网站的含义及组成
- 10哪些国家顶级域名不能注册
- 11使用无线网址的常见问题
- 12IIS链接人数过多是什么原因
- 13我查询的域名已被其他组织注册,该怎么办?
- 14重庆网站建设找哪家好?
- 15服务器租用的优点
- 16网站建设及栏目文章的创建
- 17与域名相关的基础知识
- 18重庆网站建设助力索杰暖通公司打造全新官网
- 19网页制作之如何提高网站速度
- 20网站建设过程中需要注意的一些法律问题
- 21什么是独立的IP地址
- 22网页的上传、更新和维护
- 23如何选择网站空间
- 24有质有量有规律 网站内容实现秒收不再困难
- 25企业门户网站的建设与推广
- 26通用网址问题集锦
- 27域名权益保护刻不容缓
- 28重庆网站建设2015年春节放假通知
- 29暖宝宝的作用原理
- 30教你如何做反向域名解析