CSS 实现面包屑导航

1、css，主页的图片可以自己找

CSS 实现面包屑导航

<style>

    .breadcrumbs {
        height: 36px;
        line-height: 36px;
        color: #666;
        font-size: 12px;
        font-family: simsun;
        padding-left: 20px;
        background: url("${ctx}/base/system/zhqyConvergence/img/ho.png") left 10px no-repeat;
    }

    .breadcrumbs a {
        color: #666;
        text-decoration: none;
    }
    .breadcrumbs a:hover {
        color: #f60;
    }
    .breadcrumbs span {
        margin: 0 10px;
    }
</style>

2、jsp

    <div class="breadcrumbs">
        <a href="#">主页<span>&gt;</span></a>
        <a href="#">主页<span>&gt;</span></a>
        <a href="#">主页<span>&gt;</span></a>
    </div>

2、效果图

CSS 实现面包屑导航