Comment créer : Navigation de pâtes CSS

Apprenez à créer une navigation de pâtes en utilisant CSS.

Essayez-le vous-même

Comment créer une navigation de pâtes

La navigation de pâtes offre des liens vers chaque page visitée par l'utilisateur précédemment et affiche la position actuelle de l'utilisateur sur le site.

Première étape - Ajouter HTML :

<ul class="breadcrumb">
  <li><a href="#">Accueil</a></li>
  <li><a href="#">Photos</a></li>
  <li><a href="#">Été 15</a></li>
  <li>Italie</li>
</ul>

Deuxième étape - Ajouter CSS :

/* 设置列表样式 */
ul.breadcrumb {
  padding: 10px 16px;
  list-style: none;
  background-color: #eee;
}
/* 并排显示列表项 */
ul.breadcrumb li {
  display: inline;
  font-size: 18px;
}
/* 在每个列表项前后添加斜杠符号 (/) */
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "/\00a0";
}
/* 为列表内的所有链接添加颜色 */
ul.breadcrumb li a {
  color: #0275d8;
  text-decoration: none;
}
/* 鼠标悬停时添加颜色 */
ul.breadcrumb li a:hover {
  color: #01447e;
  text-decoration: underline;
}

Essayez-le vous-même

Pages associées

Tutoriel :Pagination CSS