Verwenden Sie CSS, um rechts vom Text-Hyperlink-Text ein Pfeilsymbol hinzuzufügen

Viele bekannte Websites fügen rechts neben dem Textlink ein Pfeilsymbol hinzu, z. B. das Google Webmaster Management Backend, die offizielle Alexa-Website usw. Der Vorteil dieses Designs besteht darin, dass der Link auffälliger und einfacher zu verwenden ist identifizieren.

Um rechts neben dem Textlink ein Pfeilsymbol hinzuzufügen, verwenden die meisten Leute dazu CSS-Hintergrundbilder, einschließlich des oben erwähnten Google Webmaster-Management-Hintergrunds, der offiziellen Alexa-Website usw. Ja, diese Methode ist am einfachsten zu beherrschen und anzuwenden. Genau so stellt Sie dieser Artikel vor.

Werfen wir zunächst einen Blick auf die Renderings.

CSS-Hintergrundbild implementiert das Hinzufügen eines Pfeilsymbols rechts von der Textkette

Das obige Bild zeigt zwei Hyperlink-Stile, bei denen es sich um zwei verschiedene Pfeilsymbole handelt Tatsächlich handelt es sich um ein Hintergrundbild, das wir über CSS automatisch rechts von der Textkette hinzufügen können.

Der CSS-Code lautet wie folgt:

.content{
    width:600px;
    margin:30px 30px 30px 30px;
    font-family:"Microsoft Yahei",Georgia,"Times New Roman",Times,serif;
    font-size:14px;
    color:#333;
    line-height:185%;
}
.content a {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAVklEQVR4Xn3PgQkAMQhDUXfqTu7kTtkpd5RA8AInfArtQ2iRXFWT2QedAfttj2FsPIOE1eCOlEuoWWjgzYaB/IkeGOrxXhqB+uA9Bfcm0lAZuh+YIeAD+cAqSz4kCMUAAAAASUVORK5CYII=) center right no-repeat;
    padding-right:13px;
    margin-left:3px;
    margin-right:3px;
    text-decoration: underline;
    color: #c30;
}
.content a:hover {
    color: blue;
}

Der Schlüsselcode ist „background:url“. Hier ist „URL“ eine Bildadresse. Im obigen CSS-Code verwendet die URL eine Base64-Zeichenfolge eines Pfeilsymbols (Einführung: Verwenden Sie einen Browser, um die Base64-Zeichenfolge eines Bildes einfach abzurufen. Dies hat den Vorteil, dass Sie keine Bilder mehr anfordern müssen, was Zeit und Geld spart). Verbesserung der Einreichungseffizienz.

Das Folgende ist der Schlüsselcode von HTML:

<p>
    <font style="font-size:16px;font-weight:bold">超链接样式一</font><br>

Verwenden Sie select control, es ist sehr einfach zu implementieren ein Dropdown-Menü „Effekt“. Da das select-Steuerelement jedoch nur die Länge, nicht aber die Höhe, Farbe und andere Stile ändern kann, erscheint es manchmal unansehnlich, sich an das Gesamtlayout im Webdesign anzupassen. Aus diesem Grund wird das von p+css implementierte Dropdown-Menü häufig von Webdesignern verwendet. Mit p + css können Sie den gewünschten Stileffekt erzielen und so das Dropdown-Menü und das Gesamtlayout der Webseite schöner und harmonischer gestalten.

Wie Sie dem obigen HTML-Code entnehmen können, müssen wir eigentlich keinen zusätzlichen Code schreiben, sondern nur einen normalen Hyperlink. Dies hat den Vorteil, dass wir den CSS-Code jederzeit ändern können, um verschiedene Hyperlink-Stile festzulegen. Unabhängig davon, ob das Pfeilsymbol auf der rechten Seite benötigt wird oder nicht, kann dies problemlos in CSS erfolgen.

Der vollständige HTML-Code lautet wie folgt:

 






     

       超链接样式一

          html里使用select控件，非常容易就能实现下拉菜单的效果。但是由于select控件只能更改长度，不能更改高度和颜色等样式，因此在网页设计中有时候显得与整体布局搭配不太美观。正因为这个原因，p+css实现的下拉菜单便大量被网页设计师使用。通过p+css，可以随心所欲的实现自己想要的样式效果，使得下拉菜单与网页整体布局搭配的更美观和谐。
     

[Verwandte Empfehlungen]

1. Kostenloses CSS3-Video-Tutorial

2 . Tutorial zur Verwendung der H5- und CSS3-Formularvalidierung

3. CSS3-Code-Tutorial zur Vervollständigung eines quadratischen Box-Effekts mit abgerundeten Ecken

4. Lernen Sie, wie Sie standardmäßige Kreismuster mit CSS zeichnen

5.Lernen Sie, wie Sie CSS-Stile auf standardisierte Weise schreiben

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS, um rechts vom Text-Hyperlink-Text ein Pfeilsymbol hinzuzufügen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!