Utilisez CSS pour ajouter une icône de flèche à droite du texte du lien hypertexte

De nombreux sites Web bien connus ajoutent une icône en forme de flèche à droite du lien texte, tels que Google Webmaster Management Backend, le site officiel d'Alexa, etc. L'avantage de cette conception est de rendre le lien plus accrocheur et plus facile à utiliser. identifier.

Pour ajouter une icône en forme de flèche à droite du lien texte, la plupart des gens utilisent des images d'arrière-plan CSS pour y parvenir, y compris l'arrière-plan de gestion des webmasters de Google mentionné ci-dessus, le site officiel d'Alexa, etc. Oui, cette méthode est la plus simple à maîtriser et à appliquer. C’est exactement ainsi que cet article vous présentera.

Jetons d'abord un coup d'œil aux rendus.

L'image d'arrière-plan CSS implémente l'ajout d'une icône de flèche à droite de la chaîne de texte

L'image ci-dessus montre deux styles de lien hypertexte, qui sont deux icônes de flèche différentes . En fait, il s'agit d'une image d'arrière-plan. Nous pouvons automatiquement ajouter une telle image d'arrière-plan à droite de la chaîne de texte via CSS.

Le code css est le suivant :

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

Le code clé est background:url Ici, l'url est une adresse d'image. Dans le code CSS ci-dessus, l'URL utilise une chaîne base64 d'une icône en forme de flèche (Introduction : utilisez un navigateur pour obtenir facilement la chaîne base64 d'une image. L'avantage est que vous n'avez plus besoin de demander des images, ce qui vous fait gagner du temps et). améliorer l’efficacité de la soumission.

Ce qui suit est le code clé du HTML :

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

Utilisez select control un menu déroulant Effet. Cependant, étant donné que le contrôle de sélection ne peut modifier que la longueur, mais ne peut pas modifier la hauteur, la couleur et d'autres styles, il semble parfois inesthétique de correspondre à la mise en page globale de la conception Web. Pour cette raison, le menu déroulant implémenté par p+css est largement utilisé par les concepteurs Web. Grâce à p+css, vous pouvez obtenir l'effet de style souhaité à votre guise, rendant le menu déroulant et la mise en page globale de la page Web plus beaux et plus harmonieux.

Comme vous pouvez le voir dans le code html ci-dessus, nous n'avons en fait pas besoin d'écrire de code supplémentaire, juste un lien hypertexte normal. L'avantage de ceci est que nous pouvons modifier le code CSS à tout moment pour définir différents styles de liens hypertexte. Que l'icône en forme de flèche à droite soit nécessaire ou non, cela peut être facilement fait en CSS.

Le code html complet est le suivant :

 






     

       超链接样式一

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

[Recommandations associées]

1 Tutoriel vidéo gratuit CSS3

2 .

Tutoriel sur l'utilisation de la validation de formulaire H5 et CSS3

3

Tutoriel de code CSS3 pour réaliser un effet de coin arrondi de boîte carrée

. 4.

Vous apprendre à dessiner des motifs circulaires standards avec CSS

5.

Vous apprendre à écrire des styles CSS de manière standardisée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!