仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 785|回复: 8
打印 上一主题 下一主题

[DIV+CSS] 来看看:PDF、ZIP、DOC链接的标注

[复制链接]
乐观 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 00:14:25 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。
偶然候我们但愿能明白的用小图标来标明我们的超链接的范例。是一个zip文档仍是一个pdf文件。如许会见者就晓得他所要点击的这个链接是下载而不是翻开另外一个页面了。假如一切的人都利用IE7大概FF的话。我们完整可使用[att$=val]属性选择器,寻觅以特定值(好比.zip和.doc)开头的属性。
a[href$=".pdf"]{padding-right:19px;background:url(pdf.gif)no-repeat100%.5em;}
a[href$=".zip"]{padding-right:17px;background:url(zip.gif)no-repeat100%.5em;}
不幸的是IE6以下扫瞄器不撑持属性选择器。幸亏,能够经由过程在每一个元素中增加类,利用JavaScript和DOM完成类似的效果。
上面给出了一个办理举措:
functionfileLinks(){
varfileLink;
if(document.getElementsByTagName(a)){
for(vari=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-repeat100%.5em;}
.docLink{padding-right:19px;background:url(doc.gif)no-repeat100%.5em;}
.zipLink{padding-right:17px;background:url(zip.gif)no-repeat100%.5em;}
效果
最初一点倡议,你的小图标不要太过夺目,这会分离扫瞄者的注重力

</p>
最新版本html5+css3与2014年10月29日,万维网联盟宣布,经过几乎8年的艰辛努力,该标准规范终于最终制定完成。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-12 03:49

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表