CSS implémente le menu de liste d'icônes LI avec de petites images-tutoriel CSS-php.cn

CSS implémente le menu de liste d'icônes LI avec de petites images

不言

Libérer： 2018-06-05 15:34:28

original

2321 Les gens l'ont consulté

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>

Copier après la connexion

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!