CSS スキル リンク アノテーション

CSS には、テーブル レイアウトにはない多くの利点があります。まず、ページに表示される情報からレイアウトやページ デザインを厳密に分離します。 as to 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 を使用して各要素にクラスを追加することで、同様の効果を実現できます。了 出 以下は解決策です :

以下は引用の一部です:

Rrree

もちろん、cssに必要ですファイルに、次の

css クラスを追加します:

以下は引用のスニペットです:

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 スキル リンク アノテーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。