Barre de navigation du fil d'Ariane CSS-tutoriel CSS-php.cn

Barre de navigation du fil d'Ariane CSS

不言

Libérer： 2018-06-21 16:05:17

original

2990 Les gens l'ont consulté

Cet article présente principalement deux codes d'implémentation de barre de navigation CSS pure. Le contenu est relativement simple. Les amis qui ne savent pas comment le faire peuvent venir jeter un œil. si vous en avez besoin, vous pouvez vous y référer

Vous trouverez ci-dessous deux codes d'implémentation de barre de navigation de fil d'Ariane CSS pur. J'ai trouvé quelques méthodes sur Internet mais j'ai pensé qu'elles n'étaient pas adaptées. Seuls ces deux codes CSS purs sont presque les mêmes. faites le tri pour vous.

Méthode 1,

Description : Cette méthode utilise CSS3, sans images et est compatible avec divers navigateurs Webkit. Tout d'abord, l'image ci-dessus :

　1. Le premier est le code HTML, qui est relativement simple. Il ne nécessite qu'un simple ul et li. Le code est le suivant :

<.>

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

Copier après la connexion

2. Vient ensuite le code CSS La première consiste à définir le li flottant régulier et une embellissement de balise :

<🎜. >

#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;
}

Copier après la connexion

La prochaine étape est le pain. L'élément clé de la navigation dans les miettes est de créer des effets de flèches avant et après :

#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;
}

Copier après la connexion

Enfin, effacez le flotteur :

Deuxième méthode :

.fixed {
clear: both;
}

Copier après la connexion

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez prêter attention à. le site PHP chinois !

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

Copier après la connexion

Recommandations associées :

Mise en œuvre de la barre de progression du chargement des pages Web CSS3 et HTML5

CSS3 et Javascript implémente l'effet de la barre de progression

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!