html和css实现面包屑导航

实现效果：

html代码：

         <ul class="bread">
          <li class="type-name">
            <a href="#">首页</a>
          </li>
          <li class="type-name">
            <a href="#">一级菜单</a>
          </li>
          <li class="type-name">
            <a href="#">搜索</a>
          </li>
        </ul>

css代码：

 .bread {
    width: 1240px;
    height: 24px;
    margin: 0 auto;
    padding-top: 19px;
    .type-name {
      display: inline-block;
    }
    .type-name a {
      font: 400 14px/24px PingFangSC-Regular, PingFang SC;
      color: #222222;
    }
    .type-name + .type-name:before {
      content: ">\00a0";
    }
    .type-name:last-child a {
      font: 400 14px/24px PingFangSC-Regular, PingFang SC;
      color: #07cd5a;//控制最后一个li的颜色和前面不同
    }
    .type-name:hover {  //鼠标滑过效果
      a {
        font: 400 14px/24px PingFangSC-Regular, PingFang SC;
        color: #07cd5a;
      }
    }
  }