Heim > Artikel > Web-Frontend > Erstellen Sie mit CSS einen dreieckigen Navigationsaufforderungseffekt (Codebeispiel)

Erstellen Sie mit CSS einen dreieckigen Navigationsaufforderungseffekt (Codebeispiel)

云罗郡主Original: 2018-11-26 15:38:182196Durchsuche

Der Inhalt dieses Artikels befasst sich mit der Erstellung eines dreieckigen Navigationsaufforderungseffekts. Er hat einen gewissen Referenzwert. Ich hoffe, dass er für Sie hilfreich ist.

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

Der Effekt ist wie folgt:

Erstellen Sie mit CSS einen dreieckigen Navigationsaufforderungseffekt (Codebeispiel)

Das Obige ist eine vollständige Einführung in den Effekt der Erstellung einer Dreieck-Navigationsaufforderung mit CSS, wenn Sie möchten Weitere Informationen zum CSS3-Tutorial finden Sie auf der chinesischen PHP-Website.

Das obige ist der detaillierte Inhalt vonErstellen Sie mit CSS einen dreieckigen Navigationsaufforderungseffekt (Codebeispiel). 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：Implementieren Sie ein adaptives Breitenmenü mit CSS (Codebeispiel)Nächster Artikel：Implementieren Sie ein adaptives Breitenmenü mit CSS (Codebeispiel)

In Verbindung stehende Artikel

Mehr sehen