CSS-Fähigkeiten-Linkanmerkung

CSS hat viele Vorteile, die Tabellenlayouts nicht haben Das Layout oder die Seite Das Design ist strikt von den Informationen getrennt, die auf der Seite angezeigt werden, sodass das Design der Seite einfach geändert werden kann, indem einfach eine CSS--Datei durch eine andere ersetzt wird. Dadurch werden viele Techniken von Benutzern wiederverwendet, was einen gewissen Arbeits- und Zeitaufwand reduziert. In diesem Artikel wird die Methode zum Kommentieren von PDF-, ZIP- und DOC-Links vorgestellt.
Manchmal möchten wir den Typ unseres Hyperlinks mit einem kleinen Symbol deutlich angeben. Handelt es sich um ein zip-Dokument oder eine pdf
-Datei. Auf diese Weise weiß der Besucher, dass der Link, auf den er klicken möchte, zum Herunterladen dient und nicht zum Öffnen einer anderen Seite. Wenn jeder IE7 oder FF verwendet. Wir können den Attributselektor [att$=val] auf jeden Fall verwenden, um Attribute zu finden, die mit einem bestimmten Wert enden (z. B. .zip und .doc).

Das Folgende ist ein Zitat:

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

Leider unterstützen Browser unter

以下是引用片段：

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

IE6

keine Attributselektoren. Glücklicherweise können Sie mit JavaScript und DOM einen ähnlichen Effekt erzielen, indem Sie jedem Element Klassen hinzufügen.

Folgendes ist eine Lösung :

Das Folgende ist ein Zitat:

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

Natürlich müssen Sie diese

以下是引用片段：

CSS-Klassen zu Ihrer CSS
-Datei hinzufügen:

Das Folgende ist ein Zitatfragment:

以下是引用片段：

-->

Das obige ist der detaillierte Inhalt vonCSS-Fähigkeiten-Linkanmerkung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!