CSS implementiert ein LI-Symbollistenmenü mit kleinen Bildern-CSS-Tutorial-php.cn

CSS implementiert ein LI-Symbollistenmenü mit kleinen Bildern

不言

Freigeben： 2018-06-05 15:34:28

Original

2387 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die CSS-Implementierung des LI-Symbollistenmenüs mit kleinen Bildern vorgestellt, mit der die normale Anzeige von CSS-Symbolen und die Funktionen des Überschiebens und Klickens zum Anzeigen verschiedener Farben realisiert werden können, einschließlich CSS für besucht, schwebend und aktiv usw. Tipps zur Verwendung finden Freunde in Not unter

Dieser Artikel beschreibt das Beispiel der CSS-Implementierung des LI-Symbollistenmenüs mit kleinen Bildern. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Dies ist ein Li-Listenmenü mit kleinen Bildern und einem vertikalen Symbolmenü. Die Farbe ändert sich, wenn die Maus platziert wird. Die Reaktion auf die Maus entspricht der Benutzererfahrung Es verfügt über eine gute Kompatibilität und einen einfachen Code, der zum Lernen und Verwenden geeignet ist und ein gutes Beispiel für CSS-Anfänger ist.

Der Screenshot des Laufeffekts lautet wie folgt:

Der spezifische Code lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

CSS3 um abgerundete Bilder und ovale Bilder zu erstellen

Verwendung von reinem CSS, um dynamische Texteffekte zu erzielen

Das obige ist der detaillierte Inhalt vonCSS implementiert ein LI-Symbollistenmenü mit kleinen Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!