Paano gumawa: CSS breadcrumb navigation

Paano gumawa ng breadcrumb navigation

Ang breadcrumb navigation ay nagbibigay ng mga link ng bawat pahina na binisita ng user at nagpapakita ng kasalukuyang posisyon ng user sa website.

第一步 - 添加 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>

第二步 - 添加 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;
}

亲自试一试

相关页面

教程：CSS 分页