CSS implementiert den WEB-Standard-Menüeffektcode mit umgekehrter Dreiecksmarkierung-CSS-Tutorial-php.cn

CSS implementiert den WEB-Standard-Menüeffektcode mit umgekehrter Dreiecksmarkierung

不言

Freigeben： 2018-06-05 15:29:19

Original

1860 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich CSS zum Implementieren des WEB-Standardmenüeffektcodes mit einer umgekehrten Dreiecksmarkierung vorgestellt. Er verwendet reines CSS, um den Anzeigeeffekt der umgekehrten Dreiecksmarkierung zu realisieren. Dies ist sehr einfach und praktisch. Freunde, die es brauchen, können darauf verweisen

Das Beispiel in diesem Artikel beschreibt die CSS-Implementierung des WEB-Standardmenüeffektcodes mit einer umgekehrten Dreiecksmarkierung. Teilen Sie es als Referenz mit allen. Die Details sind wie folgt:

Hier ist eine Demonstration des WEB-Standardmenüs mit einer in CSS implementierten umgekehrten Dreiecksmarkierung.

Der spezifische Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

<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>

Nach dem Login kopieren

Zugehörige Empfehlung:

Verwenden Sie reines CSS, um den Beispielcode zum Deaktivieren von Mausklickereignissen zu implementieren

Das obige ist der detaillierte Inhalt vonCSS implementiert den WEB-Standard-Menüeffektcode mit umgekehrter Dreiecksmarkierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!