ఎలా నిర్మించాలి: CSS బ్రెడ్‌క్రంబ్ నేవిగేషన్

బ్రెడ్‌క్రంబ్ నేవిగేషన్ నిర్మించడానికి ఎలా చేయాలి

బ్రెడ్‌క్రంబ్ నేవిగేషన్ వినియోగదారుకు ముందుగా పరిశీలించిన పేజీల లింకులను అందిస్తుంది మరియు వినియోగదారుని వెబ్‌సైట్‌లో నెలుపును చూపుతుంది.

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