CSS implémente le code d'effet de menu standard WEB avec une marque triangulaire inversée-tutoriel CSS-php.cn

CSS implémente le code d'effet de menu standard WEB avec une marque triangulaire inversée

不言

Libérer： 2018-06-05 15:29:19

original

1860 Les gens l'ont consulté

Cet article présente principalement le CSS pour implémenter le code d'effet de menu standard WEB avec une marque triangulaire inversée. Il utilise du CSS pur pour réaliser l'effet d'affichage de la marque triangulaire inversée lorsque la souris glisse dessus. Les amis qui en ont besoin peuvent s'y référer

L'exemple de cet article décrit l'implémentation CSS du code d'effet de menu standard WEB avec une marque de triangle inversé. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration du menu standard WEB avec une marque en triangle inversé implémentée en css.

Le code spécifique est le suivant :

Copiez le code

Le code est le suivant :

<html>
<head>
<title>带倒三角标记的WEB标准菜单</title>
<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>
</head>
<body>
 <ul id="menu">
 <li><a href="#"><span>脚本之家</span><em></em></a></li>
 <li><a href="#"><span>网页特效</span><em></em></a></li>
 <li><a href="#"><span>示例菜单</span><em></em></a></li>
 <li><a href="#"><span>网站导航</span><em></em></a></li>
 </ul>
</body>
</html>

Copier après la connexion

Recommandations associées :

Utilisation de CSS pur pour désactiver un exemple de code d'événements de clic de souris

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!