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

Implementieren Sie die Breadcrumb-Navigationsleiste mit CSS

不言
Freigeben: 2018-06-21 16:05:17
Original
2986 Leute haben es durchsucht

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>
Nach dem Login kopieren

 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;
}
Nach dem Login kopieren
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;
}
Nach dem Login kopieren
Zum Schluss den Float löschen:

.fixed {
clear: both;
}
Nach dem Login kopieren
Methode 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//m.sbmmt.com/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//m.sbmmt.com/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>
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage