Hur man skapar: CSS brödsmål navigering

Lär dig hur man använder CSS för att skapa brödsmål navigering.

Prova själv

Hur man skapar brödsmål navigering

Brödsmål navigering tillhandahåller länkar till varje sida som användaren har besökt tidigare och visar användarens nuvarande position på webbplatsen.

第krok 1 - Lägg till HTML：

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pictures</a></li>
  <li><a href="#">Summer 15</a></li>
  <li>Italy</li>
</ul>

第krok 2 - Lägg till 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;
}

Prova själv

Relaterade sidor

Tutoriel:CSS-sidor