面包屑导航例子
时间: 2023-07-18 17:15:16 浏览: 46
以下是一个简单的面包屑导航例子:
Home > Products > Clothing > Men's Clothing > Shirts
在这个例子中,用户当前位于“Shirts”页面,通过面包屑导航可以知道该页面所在的位置,以及在该页面之前访问过的页面。用户可以通过点击“Men's Clothing”链接回到上一级页面,或者直接跳转到其他页面。
在HTML中,可以使用ul和li标签来实现面包屑导航。例如:
```
<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Clothing</a></li>
<li><a href="#">Men's Clothing</a></li>
<li class="active">Shirts</li>
</ul>
```
在CSS中,可以为面包屑导航添加样式来美化其外观。例如:
```
.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}
.breadcrumb li {
display: inline-block;
}
.breadcrumb li + li:before {
content: ">";
margin: 0 5px;
color: #ccc;
}
.breadcrumb li.active {
color: #777;
}
```
这些样式可以为面包屑导航添加背景色、边框、间距等样式,同时为当前页面添加特殊的样式,以便用户更容易地识别当前页面。