CSS制作面包屑导航

话不多说,直接上图片

mianbao.png

原理解释

1,采用UL LI 里面嵌套A标签,因为是要点击的导航;

2,最后一个当前状态嵌套SPAN标签(如果最后一项也需要点击就不要用SPAN标签,对应的CSS也去就就OK);

3,用到伪类 before after first-child last-child。

4,这个是根据文字多少来改变宽度,所以不支持自适应;

html代码

css代码

#breadcrumb{ position:relative;
  list-style:none;
  display: inline-block;
  border:#dedede solid 1px; border-radius:6px; overflow:hidden;
  background:#dedede;
  padding:0 -30px 0 0;
  li{
    float:left;
    a,span.text{
      color:#7e8c8d;
      display:block;
      background: @white;
      text-decoration: none;
      position:relative;
      height: 40px;
      line-height:40px;
      padding: 0 32px 0 27px;
      text-align: center;
      margin-right: 21px;
    }
    &:first-child{
      a{
        padding:0 26px 0 20px;
        &:before{
          border:none;
         }
      }
    }
    &:last-child{
      a{
        padding-right:15px;
        &:after{
          border:none;
         }
      }
    }
    a{   
      &:before,
      &:after{
        content: "";
        position:absolute;
        top: 0;
        border:0 solid @white;
        border-width:20px 10px;
        width: 0;
        height: 0;
      }
      &:before{
        left:-20px;
        border-left-color:transparent;
      }
      &:after{
        left:100%;
        border-color:transparent;
        border-left-color:@white;
      }
      &:hover{
        background-color: @green;
        color:@white;
        &:before{
          border-color:@green;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:@green;
        }
      }
      &:active{
        background-color: @green-darken;
        
        &:before{
          border-color:@green-darken;
          border-left-color:transparent;
         }
        &:after{
          border-left-color:@green-darken;
        }
      }
    }
    span.text{   
      &:before,
      &:after{
        content: "";
        position:absolute;
        top: 0;
        border:0 solid @white;
        border-width:20px 10px;
        width: 0;
        height: 0;
      }
      &:before{
        left:-20px;
        border-left-color:transparent;
      }
      &:after{
        left:100%;
        border-color:transparent;
        border-left-color:@white;
      }
    }
  }
  li span.white{position:absolute; display:block; width:21px; border-right:@white solid 21px; height:40px; top:0; right:0; }
}

特别说明

1,CSS用的是 lesscss 所以 上面会出现一些以@开头的变量,后面可自行添加或者修改成颜色

2,本次主键后面会一次性全部上传

版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:CSS制作面包屑导航

本文地址:http://www.aweb.cc/article/detail/id/506.html

css实现步骤条/进度条 <<上一篇