How to Create: CSS Breadcrumb Navigation

Jifunze kuhakika mifanyiko wa kuzalisha mifanyiko wa kibarua cha CSS.

亲自试一试

How to Create Breadcrumb Navigation

Mifanyiko wa inayopewa kwa mifano ya ukurasa wa hivi karibuni ambao mtumishi alifikia na inaonyesha hatua ya mtumishi katika tovuti.

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