天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>评测>css技巧之链接的标注

css技巧之PDF、ZIP、DOC链接的标注

Levelup2007-11-10 09:25我要吐槽

      CSS越来越广泛的被运用,层叠样式表拥有很多表格布局所没有的优势,首先从布局或者页面的设计与出现在页面中的信息中作严格的分离,从而让页面的设计能够很容易被改变,仅用一个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以下浏览器不支持属性选择器。好在,可以通过在每个元素中添加类,使用JavaScriptDOM实现相似的效果。

       下面给出了一个解决办法: 

以下是引用片段:
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; }

作者:网思责任编辑:兜兜猫)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级