css技巧之連結的標註

來源:互聯網
上載者:User

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以下瀏覽器不支援屬性選取器。好在,可以通過在每個元素中添加類,使用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; }
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.