Le contenu de cet article concerne la création d'un effet d'invite de navigation triangulaire avec CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS制作一个三角的导航提示效果</title>
</head>
<style>
#menu {width:500px;padding:0;margin:40px auto;list-style-type:none;}
#menu li {width:100px; float:left; line-height:30px}
#menu a {position:relative;display:block; text-decoration:none; background:#cccccc;width:100px; }
#menu a span {display:block; font-weight:bold;color:#000; border-style:solid;border-width:0px 2px 2px 0px; border-color:#fff #fff #06a #fff;text-align:center; }
#menu a em {display:none;}
#menu a:hover {background:#FF0000;}
#menu a:hover span {color:#fff; }
#menu a:hover em {display:block; overflow:hidden; border:6px solid #06a; border-color:#06a #fff; border-width:6px 6px 0 6px; position:absolute; left:50%; top:100%;margin-left:-6px;}
</style>
<body>
<ul id="menu">
<li><a href="#"><span>CSS教程</span><em></em></a></li>
<li><a href="#"><span>CSS布局</span><em></em></a></li>
<li><a href="#"><span>CSS兼容性</span><em></em></a></li>
<li><a href="#"><span>CSS</span><em></em></a></li>
</ul>
</body>
</html>L'effet est le suivant :
Ce qui précède est une introduction complète à l'effet de la création d'une invite de navigation triangulaire avec CSS, si vous Si vous voulez en savoir plus sur leTutoriel CSS3, veuillez faire attention au site Web PHP chinois.
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!
Que faire s'il n'y a pas de curseur lorsque vous cliquez sur la zone de saisie
Quelle devise est MULTI ?
Comment modifier le nom d'un fichier sous Linux
Méthodes d'analyse des données
site officiel de notepad++
Le rôle de la carte réseau du serveur
La différence entre HTML et HTML5
Introduction aux équipements de surveillance des stations météorologiques
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
