Heim > Artikel > Web-Frontend > CSS implementiert ein LI-Symbollistenmenü mit kleinen Bildern
CSS implementiert ein LI-Symbollistenmenü mit kleinen Bildern
- 不言Original
- 2018-06-05 15:34:282307Durchsuche
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>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!