Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So richten Sie dynamische Hyperlinks mit CSS ein (Code im Anhang)

yulia
Freigeben: 2018-09-26 15:46:14
Original
3534 Leute haben es durchsucht

Dieser Artikel führt Sie hauptsächlich in die Methode zum Festlegen dynamischer Hyperlinks mit CSS ein. Er enthält eine relativ leicht verständliche Code- und Textbeschreibung. Ich hoffe, dass er für Sie hilfreich ist.

In HTML werden Hyperlinks durch die Markierung implementiert, und die spezifische Adresse verwendet das href-Attribut der Markierung .

ali's Blog

Standardmäßig sind Hyperlinks beim Durchsuchen einheitlich, blau und unterstrichen. und der angeklickte Hyperlink ist lila und ebenfalls unterstrichen.

CSS kann verschiedene Attribute von Hyperlinks festlegen, wie Schriftarten, Farben, Hintergründe usw., und durch Pseudokategorien viele dynamische Effekte erzeugen.

Entfernen Sie zunächst die Unterstreichung des Hyperlinks:

a{   text-decoration:none;  }
Nach dem Login kopieren

Zu diesem Zeitpunkt werden sowohl der Hyperlink selbst als auch die Unterstreichung des angeklickten Hyperlinks entfernt.

CSS-Pseudokategorie – Pseudo-Klassen verankern, Pseudokategorie verwenden, um dynamische Downloads zu erstellen. Die spezifischen Attribute sind wie folgt:

A:link – der normale Hyperlink-Stil in normalen Browsern Stil.

A:visited – der Stil des angeklickten Hyperlinks.

A:hover – der Stil, wenn der Mauszeiger über einen Hyperlink fährt.

A:active – Der Stil des Hyperlinks, wenn darauf geklickt wird, d. h. wenn er gerade aktiv ist.

<html>
       <head>
              <title>                    
              </title>
              <style>
                     <!--
                     a:link{
                     color:#005799;
                     text-decoration:none;
              }
                     a:visited{
                     color:#0000;
                     text-decoration:none;
              }
                     a.hover{
                     color:#ffff00;
                     text-decoration:underline;
              }
                     -->
              </style>
       </head>    
       <body>
              <table width="600px"cellpadding="2" class="chara1" align="center">
                     <tr>
                            <td><a href="#">首页</a></td>
                            <td><a href="#">心情日记</a></td>
                            <td><ahref="#">Free</a></td>
                            <td><a href="#">一起走到</a></td>
                            <td><a href="#">从明天起</a></td>
                            <td><a href="#">纸飞机</a></td>
                            <td><a href="#">下一站</a></td>
                     </tr>   
              </table>
       </body>
</html>
Nach dem Login kopieren

Wie Sie sehen können, werden die Hyperlinks selbst dunkelblau ohne Unterstreichungen. Wenn Sie mit dem Mauszeiger darüber fahren, werden sie gelb und unterstrichen.

Darüber hinaus können verschiedenen Pseudoattributen des Hyperlinks verschiedene Hintergrund-, Rahmen- und Typografieeffekte hinzugefügt werden. Der aktuelle Aktivierungsstatus ist a:aktiv, was im Allgemeinen in sehr wenigen Fällen angezeigt wird und selten verwendet wird.

Wenn der Benutzer auf einen Hyperlink klickt, verschiebt sich der Fokus leicht auf andere Stellen, z. B. ein neu geöffnetes Fenster usw. Zu diesem Zeitpunkt ist der Hyperlink derzeit nicht mehr aktiv.

Das obige ist der detaillierte Inhalt vonSo richten Sie dynamische Hyperlinks mit CSS ein (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage