NEC学习 ---- 模块 -多行式面包屑导航

最新推荐文章于 2019-01-30 18:10:38 发布

转载最新推荐文章于 2019-01-30 18:10:38 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Zell-Dinch/p/4527125.html

本文介绍了一种使用HTML和CSS实现面包屑导航的方法，并提供了一个具体的示例代码。该示例通过设置特定的CSS样式来展示如何创建带有竖线分隔符的面包屑导航效果。

如上面形式面包屑的写法:

HTML如下,

<div class="m-crumb">
    <ul class="f-cb">
        <li><i>|</i><a href="#">面包屑导航, 竖线分割</a></li>
        <li><i>|</i><a href="#">面包屑, 可多行</a></li>
        <li><i>|</i><a href="#">面包屑</a></li>
        <li><i>|</i>文字</li>
    </ul>
</div>

CSS如下,

<style type="text/css">
    .m-crumb {
        width:80%;
        margin:45px auto;
        line-height: 1.5;overflow: hidden;
    }
    .m-crumb ul {
        margin-left: -20px; /* 这个是用来去掉第一个|线的 */
    }
    .m-crumb li{
        font-size:14px;
        float: left;
        white-space: nowrap; /* 空白的处理方式: normal 空白被浏览器忽略; pre 空白被浏览器保留; nowrap 文本不换黄,文本会在同一行上继续, 直到遇到<br/>*/
        word-wrap: normal; /* 换行的处理方式: normal 正常换行; break-word: 在长单词处换行 */
    }
    .m-crumb li i{
        display:inline-block;*display:inline;*zoom:1;width:20px; /*关键代码*/
        color:#ccc;text-align:center;font-size:14px;
    }
</style>

还有一种:

这种面包屑的就是有间隔, 利用margin-left达到目的, 代码略.

转载于:https://www.cnblogs.com/Zell-Dinch/p/4527125.html