Nasıl oluşturulur：CSS ekmek kırımları navigasyonu

Ekmek kırımları navigasyonu nasıl oluşturulur

Ekmek kırımları navigasyonu, kullanıcıların önceki olarak ziyaret ettiği her sayfanın bağlantısını sağlar ve kullanıcıların web sitesindeki mevcut konumunu gösterir.

İlk adım - HTML ekleyin：

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

İkinci adım - CSS ekleyin：

/* 设置列表样式 */
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;
}

Kendi kendine deney

İlgili sayfalar

Eğitim:CSS sayfa bölmesi