css实现面包屑导航

浏览数：43 / 时间：2015年06月09日

HTML代码：

1 <div id="breadcrumb">  
2      <ul class="crumbs">  
3          <li class="first"><a href="#" style="z-index:9;"><span></span>Blog Home</a></li>  
4          <li><a href="#" style="z-index:8;">Archives</a></li>  
5          <li><a href="#" style="z-index:7;">2011 Writing</a></li>  
6          <li><a href="#" style="z-index:6;">Tips for jQuer</a></li>  
7      </ul>  
8  </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;  
    }