HTML代码
<div id="breadcrumb">
<ul class="crumbs">
<li class="first"><a href="#" style="z-index:9;"><span></span>Blog Home</a></li>
<li><a href="#" style="z-index:8;">Archives</a></li>
<li><a href="#" style="z-index:7;">2011 Writing</a></li>
<li><a href="#" style="z-index:6;">Tips for jQuer</a></li>
</ul>
</div>
CSS式样:
.crumbs { display: block; }
.crumbs li { display: inline; }
.crumbs li.first { padding-left: 8px; }
.crumbs li a,
.crumbs li a:link,
.crumbs li a:visited {
color: #666;
display: block;
float: left;
font-size: 12px;
margin-left: -13px;
padding: 7px 17px 11px 25px;
position: relative;
text-decoration: none;
}
.crumbs li a {
background-image: url(/assets/stylesheets/images/bg-crumbs.png);
background-repeat: no-repeat;
background-position: 100% 0;
position: relative;
}
.crumbs li a:hover {
color: #333;
background-position: 100% -48px;
cursor: pointer;
}
.crumbs li a:active {
color: #333;
background-position: 100% -96px;
}
.crumbs li.first a span {
height: 29px;
width: 3px;
border-left: 1px solid #d9d9d9;
position: absolute;
top: 0px;
left: 0px;
}
PS:原文地址:点击打开链接
效果页面:面包屑导航效果