Maison > Article > interface Web > CSS implémente le menu de liste d'icônes LI avec de petites images
CSS implémente le menu de liste d'icônes LI avec de petites images
- 不言original
- 2018-06-05 15:34:282307parcourir
Cet article présente principalement l'implémentation CSS du menu de liste d'icônes LI avec de petites images, qui peut réaliser l'affichage normal des icônes CSS et les fonctions de glissement et de clic pour afficher différentes couleurs, impliquant CSS pour visité, survolé et actif , etc. Pour des conseils d'utilisation, les amis dans le besoin peuvent se référer à
Cet article décrit l'exemple d'implémentation CSS du menu de liste d'icônes LI avec de petites images. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :
Il s'agit d'un menu de liste Li avec de petites images, un menu d'icônes verticales et la couleur changera lorsque la souris est placée. La réponse à la souris est conforme à l'expérience utilisateur. , et il a une bonne compatibilité et un code simple, adapté à l'apprentissage et à l'utilisation, un bon exemple pour les débutants CSS.
La capture d'écran de l'effet en cours d'exécution est la suivante :
Le code spécifique est le suivant :
Copiez le code
Le code est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS图标菜单</title>
<style>
ul#nav {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url("images/peppers.gif") top left no-repeat;
text-decoration: none;
}
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
#nav a:active {
background-position: 0 -138px;
color: #006E01;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">我们</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">购买我们</a></li>
</ul>
</body>
</html>Recommandations associées :
CSS3 pour créer des images arrondies et des images ovales
Utiliser du CSS pur pour obtenir des effets de texte dynamiques
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!