Heim > Artikel > Web-Frontend > Implementieren Sie die Breadcrumb-Navigationsleiste mit CSS

Implementieren Sie die Breadcrumb-Navigationsleiste mit CSS

不言Original: 2018-06-21 16:05:172950Durchsuche

Dieser Artikel stellt hauptsächlich zwei reine CSS-Breadcrumb-Navigationsleisten-Implementierungscodes vor. Freunde, die nicht wissen, wie es geht, können einen Blick darauf werfen Ich muss darauf verweisen

Nachfolgend finden Sie zwei reine CSS-Breadcrumb-Navigationsleisten-Implementierungscodes im Internet, die jedoch nicht geeignet sind Erledige es für dich.

Methode 1,

Beschreibung: Diese Methode verwendet CSS3, keine Bilder und ist mit verschiedenen Webkit-Browsern kompatibel. Zuerst das Bild oben:

　1. Der erste ist der HTML-Code, der nur ein einfaches ul und li erfordert 🎜>　

<p id="crumbs">
<ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">目录</a></li>
 <li><a href="#">子目录</a></li>
</ul>
<p class="fixed"></p>
</p>

　2. Als nächstes folgt der CSS-Code, um das reguläre LI-Floating und eine Tag-Verschönerung festzulegen:

#crumbs ul li {
float: left;
list-style: none;
}
#crumbs ul li a {
display: block;
float: left;
height: 34px;
background: #f66fa2;
text-align: center;
padding: 10px 20px 0 45px;
position: relative;
margin: 0 10px 0 0;
font-size: 20px;
text-decoration: none;
color: #fff;
}

Der nächste Schritt ist der Schlüssel zur Breadcrumb-Navigation. Platzieren, Pfeileffekt durch Vorher und Nachher erzeugen:

#crumbs ul li a:after {
content: "";
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-left: 22px solid #f66fa2;
position: absolute; right: -22px; top: 0;
z-index: 1;
}
#crumbs ul li a:before {
content: "";
border-top: 22px solid transparent;
border-bottom: 22px solid transparent;
border-left: 22px solid #fff;
position: absolute; left: 0; top: 0;
}
#crumbs ul li:first-child a {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
padding-left: 40px;
}
#crumbs ul li:first-child a:before {
display: none;
}
#crumbs ul li:last-child a {
padding-right: 30px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
#crumbs ul li:last-child a:after {
display: none;
}
#crumbs ul li a:hover {
background: #e56592;
transition: all 0.2s ease;
}
#crumbs ul li a:hover:after {
border-left-color: #e56592;
transition: all 0.2s ease;
}

Zum Schluss den Float löschen:

.fixed {
clear: both;
}

Methode 2:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.php.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.php.cn/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8″ />
<title>纯css制作面包屑，兼容IE6</title>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}   
a,img{border:0;}   
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}   
/* demo */   
.demo{width:600px;margin:100px auto;background:#f0f0f0;position:relative;}   
.demo ul{height:32px;overflow:hidden;}   
.demo li{float:left;width:200px;text-align:center;position:relative;z-index:2;font-weight:bold;font-size:14px;line-height:32px;}   
.demo li em{position:absolute;right:-24px;top:-8px;width:0;height:0;line-height:0;border-width:24px 0 24px 24px;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;}   
.demo li i{position:absolute;right:-16px;top:0;width:0;height:0;line-height:0;border-width:16px 0 16px 16px;border-color:transparent transparent transparent #f0f0f0;border-style:dashed dashed dashed solid;}   
.demo li.current{background:#f60;color:#fff;z-index:1;}   
.demo li.current i{border-color:transparent transparent transparent #f60;}   
</style>
</head>
<body>
<p class="demo">
<ul class="clearfix">
<li>面包屑一<em></em><i></i></li>
<li class="current">面包屑二<em></em><i></i></li>
<li>面包屑二<em></em><i></i></li>
</ul>
</p>
</body>
</html>

Das ist es. Der gesamte Inhalt dieses Artikels soll für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Implementierung des Fortschrittsbalkens für das Laden von CSS3- und HTML5-Webseiten

CSS3 und Javascript implementiert den Effekt des Fortschrittsbalkens

Das obige ist der detaillierte Inhalt vonImplementieren Sie die Breadcrumb-Navigationsleiste mit CSS. 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：CSS realisiert einen automatischen Zeilenumbruch, um zu verhindern, dass das Div unterbrochen wird und das Layout beeinträchtigt.Nächster Artikel：CSS realisiert einen automatischen Zeilenumbruch, um zu verhindern, dass das Div unterbrochen wird und das Layout beeinträchtigt.

In Verbindung stehende Artikel

Mehr sehen