Heim > Artikel > Web-Frontend > CSS implementiert einen dreidimensionalen horizontalen Schaltflächenmenüeffekt

CSS implementiert einen dreidimensionalen horizontalen Schaltflächenmenüeffekt

不言Original: 2018-06-25 17:05:182110Durchsuche

In diesem Artikel wird hauptsächlich CSS zur Implementierung eines dreidimensionalen horizontalen Tastenmenüeffektcodes vorgestellt, der den Effekt des Überfahrens mit der Maus und der Darstellung eines Tastendrucks realisieren kann. Er hat einen starken dreidimensionalen 3D-Effekt und beinhaltet CSS basierend auf dem Hover-Attribut. Freunde, die es benötigen, können sich auf Tipps zum Festlegen von Rändern beziehen:

Dieser Artikel beschreibt das Beispiel für die Verwendung von CSS zum Implementieren eines dreidimensionalen horizontalen Schaltflächenmenüeffektcodes. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Dies ist ein horizontales und dreidimensionales CSS-Schaltflächenmenü. Es übernimmt die in CSS übliche UL/LI-Struktur und verfügt über ein praktisches Layout Wenn Sie die Maus platzieren, wird ein dreidimensionales Menü angezeigt. Das visuelle Gesamterlebnis ist komfortabel, die Codekompatibilität ist gut, einfach und effizient.

Der spezifische 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>
#navigation {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
}
#navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  padding-top: 4px;
}
#navigation li {
  display: inline;
}
#navigation a:link, #navigation a:visited { 
  margin-right: 2px;
  padding: 3px 10px 2px 10px; 
  color: #A62020;
  background-color: #FCE6EA;
  text-decoration: none;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #717171;
  border-right: 1px solid #717171;
}
#navigation a:hover {
  border-top: 1px solid #717171;
  border-left: 1px solid #717171;
  border-bottom: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
}
</style>
</head>
<body id="contact">
<p id="navigation">
 <ul>
 <li class="recipes"><a href="#">脚本之家</a></li>
 <li class="contact"><a href="#">脚本下载</a></li>
 <li class="articles"><a href="#">网页特效</a></li>
 <li class="articles"><a href="#">官方博客</a></li>
 <li class="articles"><a href="#">友情链接</a></li>
 <li class="buy"><a href="#">联系我们</a></li>
 </ul>
</p>
</body>
</html>

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Lernen aller hilfreich ist PHP chinesische Website!

Verwandte Empfehlungen:

So verwenden Sie CSS3, um horizontale und vertikale Bildschirme anzupassen

So verwenden Sie CSS3, um 3D zu erreichen Umblättern von Büchern Effekt

Das obige ist der detaillierte Inhalt vonCSS implementiert einen dreidimensionalen horizontalen Schaltflächenmenüeffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie die CSS-Popup-FensterzentrierungNächster Artikel：So implementieren Sie die CSS-Popup-Fensterzentrierung

In Verbindung stehende Artikel

Mehr sehen