css技巧之連結的標註

      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; }

以上是css技巧之連結的標註的詳細內容。更多資訊請關注PHP中文網其他相關文章！