Beim Entwerfen einer Website müssen wir manchmal verschiedene Stile erstellen, die auf den Attributen der Seitenelemente basieren, beispielsweise für verschiedene Link -Typen, werden verschiedene Link -Symbole angezeigt. CSS -Selektoren sind eine sehr nützliche Technik. Durch sie können wir leicht bestimmte Effekte erzielen. Heute werden wir den Immobilienwählers von CSS vorstellen, indem wir einen personalisierten Linkstil erstellen.
Schauen wir uns zuerst die Demonstration an:
Wie in der obigen Abbildung zu sehen ist, definieren wir einen anderen Stil für jeden Link: Wenn der Wert des HREF -Attributs von Link A "Mailto" -Mail -Link ist, wird ein Symbol der E -Mail hinter dem Link angezeigt. Wenn die Word -Datei verwendet wird, wird das Word -Dokument -Symbol dahinter angezeigt.
Tatsächlich ist es sehr einfach, eine solche Funktion zu implementieren.
Es ist zu beachten, dass IE7 und IE8 CSS -Selektor unabhängig von CSS 2.1 oder CSS 3 -Version unterstützen, und Webkit, Gecko Core und Opera unterstützen dies auch nicht.
OK, lassen Sie uns diese Stile implementieren:
1. Grundlegende Linkstil Zuerst bereiten wir ein CSS -Sprites -Bild vor und integrieren alle Symbole in dieses A.GIF.
| A { Hintergrund: URL (A.GIF) No-Repeat Right 4px; Padding-Right: 18px; Farbe:#369; Zeilenhöhe: 24px; } |
Auf diese Weise definieren wir den Standardstil für alle Links, und auf der rechten Seite aller Links wird ein kleines rotes Pfeilsymbol angezeigt.
2. Definieren Sie personalisierte Stile.
Mailtomailto -Mail -Links befinden sich im Stil von href = "mailto: [email protected]".
| a [href^= "mailto:"] {{{{{{{{{{{{{{{{ Hintergrund -Pusität: rechts -242px; } |
Wir glauben im Allgemeinen, dass alle DOC -Dateilinks im Format von href = "abc.doc" sind, was bedeutet, dass die Verbindungsadresse mit .doc endet, sodass wir das Format von [ATT $ = val] verwenden müssen. Der Stil ist wie folgt:
| a [href $ = ". doc"] { Hintergrundposition: Rechts -160px } |
Dokumente in PDF, Excle, MP3 -Formaten werden ebenfalls auf diese Weise implementiert.
Links, die Qianduan.net -Felder für Links enthalten, die eine bestimmte Zeichenfolge enthalten, können Sie [ATT*= val] verwenden:
| A { Hintergrund: URL (A.GIF) No-Repeat Right 4px; Padding-Right: 18px; Farbe:#369; Linienhöhe: 24px; } a [href^= "mailto:"] {Hintergrundposition: rechts -242px;} a [href $ = ". doc"] {Hintergrundposition: rechts -161px} a [href $ = ". xls"] {Hintergrundposition: rechts -282px} a [href $ = ". pdf"] {Hintergrundposition: rechts -79px} a [href $ = ". mp3"] {Hintergrundposition: rechts -204px} a [href $ = ". swf"] {Hintergrundposition: rechts -120px} a [href $ = ". rar"] {Hintergrundposition: rechts -38px} a [href*= "qianduan.net"] {Hintergrundposition: rechts -328px} |
Und wenn wir es verwenden, müssen wir keine zusätzliche Klasse hinzufügen:
| <a href = "abc.doc"> Wortdokument </a> |