div+css实现面包屑导航-默认竖线分隔、箭头分隔、空白分隔

江山如画 • 2023年1月5日上午7:40 • 网页制作 • 阅读 141

div+css实现面包屑导航，主要用到了CSS3伪元素before，大家可以通过本利好好理解before的使用方法，下面125建站网给出实现代码。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      ul,li{list-style: none;}			/* 多行式面包屑导航-默认竖线分隔 */
      .m-crumb{overflow:hidden;line-height:1.5;}
      .m-crumb ul{margin-left:-20px;}
      .m-crumb li{float:left;word-wrap:normal;white-space:nowrap;}
      .m-crumb li:before{display:inline-block;width:20px;text-align:center;content:'|';font-size:12px;color:#ccc;font-family:\5b8b\4f53;}
      /* 箭头分隔 */
      .m-crumb-arr li:before{content:'\3E';}
      /* 空白分隔 */
      .m-crumb-blank ul{margin-left:-10px;}
      .m-crumb-blank li:before{width:10px;content:'';}
    </style>
  </head>
  <body>
    <nav class="m-crumb">
        <ul class="f-cb">
            <li><a href="http://www.125jz.com/">首页</a></li>
            <li><a href="http://www.125jz.com/course">教程</a></li>
            <li><a href="http://www.125jz.com/course/html">网页制作</a></li>
            <li><a href="http://www.125jz.com/course/webdesign">网页设计</a></li>
        </ul>
    </nav>
    <nav class="m-crumb m-crumb-arr">
        <ul class="f-cb">
            <li><a href="http://www.125jz.com/">首页</a></li>
            <li><a href="http://www.125jz.com/course">教程</a></li>
            <li><a href="http://www.125jz.com/course/html">网页制作</a></li>
            <li><a href="http://www.125jz.com/course/webdesign">网页设计</a></li>
        </ul>
    </nav>
    <nav class="m-crumb m-crumb-blank">
        <ul class="f-cb">
           <li><a href="http://www.125jz.com/">首页</a></li>
            <li><a href="http://www.125jz.com/course">教程</a></li>
            <li><a href="http://www.125jz.com/course/html">网页制作</a></li>
            <li><a href="http://www.125jz.com/course/webdesign">网页设计</a></li>
        </ul>
    </nav> 
  </body>
</html>

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/11155.html