CSS implémente un effet de menu de boutons horizontaux en trois dimensions-tutoriel CSS-php.cn

CSS implémente un effet de menu de boutons horizontaux en trois dimensions

不言

Libérer： 2018-06-25 17:05:18

original

2163 Les gens l'ont consulté

Cet article présente principalement CSS pour implémenter un code d'effet de menu de boutons horizontaux en trois dimensions, qui peut réaliser l'effet du glissement de la souris et de la présentation d'une pression sur un bouton. Il a un fort effet tridimensionnel 3D et implique du CSS basé sur le. attribut de survol. Pour des conseils sur la configuration des bordures, les amis qui en ont besoin peuvent se référer à

Cet article décrit l'exemple d'utilisation de CSS pour implémenter un code d'effet de menu de boutons horizontaux en trois dimensions. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu de boutons CSS horizontal et tridimensionnel. Il adopte la structure UL/LI couramment utilisée en CSS et a une disposition pratique. LI est défini comme un style de bouton. la souris est placée, elle affichera un menu en trois dimensions. L'expérience visuelle globale est confortable, la compatibilité du code est bonne, simple et efficace.

Le code spécifique 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>
#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>

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention. au site Web PHP chinois !

Recommandations associées :

Comment utiliser CSS3 pour faire correspondre les écrans horizontaux et verticaux

Comment utiliser CSS3 pour obtenir de la 3D retournement de livres Effet

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!