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

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:;width:20px; /*关键代码*/
color:#ccc;text-align:center;font-size:14px;
}
</style>

还有一种:

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

NEC学习 ---- 模块 -多行式面包屑导航的更多相关文章

  1. 学习使用 CSS3 制作网站面包屑导航效果

    作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...

  2. vue 2.0 + elementUI 实现面包屑导航栏

    Main.js 9种响应式面包屑导航和分步导航指示器UI设计 var routeList = []; router.beforeEach((to, from, next) => { var in ...

  3. NEC学习 ---- 模块 - 上图下文图文列表

    上图下文图文列表的效果如下图: 可以看到三个红色框中的三中"上图下文的图文列表"; 这里的代码其实没什么问题, 对于这种布局, 其实可以参考我上一篇介绍: NEC学习 ---- 模 ...

  4. amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb

    amazeui学习笔记--css(常用组件2)--面包屑导航Breadcrumb 一.总结 1.am-breadcrumb:用am-breadcrumb来声明面包屑导航控件,.am-breadcrum ...

  5. Bootstrap <基础十八>面包屑导航(Breadcrumbs)

    面包屑导航(Breadcrumbs)是一种基于网站层次信息的显示方式.以博客为例,面包屑导航可以显示发布日期.类别或标签.它们表示当前页面在导航层次结构内的位置. Bootstrap 中的面包屑导航( ...

  6. Bootstrap (导航、标签、面包屑导航)

    导航 Bootstrap中可用的导航有相似的标记,用基类.nav开头,这是相似的部分.改变修饰类可以改变样式. <!DOCTYPE html> <html> <head& ...

  7. MVC 5 + EF6 入门完整教程14 -- 动态生成面包屑导航

    上篇文章我们完成了 动态生成多级菜单 这个实用组件. 本篇文章我们要开发另一个实用组件:面包屑导航. 面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱 ...

  8. 夺命雷公狗ThinkPHP项目之----企业网站25之网站前台面包屑导航URL的完善

    如果想取出面包屑导航的url那么就必须在model层里面进行多取一个了: <?php namespace Home\Model; use Think\Model; class CategoryM ...

  9. 纯CSS3编写的面包屑导航收集

    整理了10个纯CSS3制作的面包屑导航,这些都是通过CSS3来编写,十分方便,而且实用.有些文章附有教程,大家可以研究学习一下. 漂亮面包屑导航 查看网站 扁平化面包屑导航 查看网站 圆形风格面包屑导 ...

随机推荐

  1. Lost Cows

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9669   Accepted: 6228 Description N (2 ...

  2. EntityFramework Code First 手写代码实现生成数据库

    第一步:写实体类 第二步:写一个实体操作类,此类必须继承Dbcontext,此处的属性,将会在初始化时(第一次作,增,删,改的时候),生成相应的表. 第三步:运行程序,会自动建表 注意: 若实体类发生 ...

  3. Codeforces Round #347 (Div. 2)

    unrating的一场CF A - Complicated GCD #include <bits/stdc++.h> const int N = 1e5 + 5; char a[105], ...

  4. 《Getting Started with Storm》章节一 基础

    注:括号里的字,并且是(灰色)的,是我个人的理解,如有差错,欢迎交流 Storm是一个分布式的.可靠的.容错的数据流处理系统(流式计算框架,可以和mapreduce的离线计算框架对比理解).整个任务被 ...

  5. BZOJ3515 : EvenPaths

    首先拓扑排序,并将障碍点按拓扑序平均分成两半. 那么一条$0$到$1$的路径一定是形如: $0$->前一半点->后一半点->第一个后一半障碍点->后一半点->$1$. 对 ...

  6. wamp 2.5 开放访问权限和设置虚拟域名

    开放访问权限 D:\wamp\bin\apache\apache2.4.9\conf  里的 httpd.conf 搜索www   把 Require local 改为 Require all gra ...

  7. hadoop2.2.0 + hbase 0.94 + hive 0.12 配置记录

    一开始用hadoop2.2.0 + hbase 0.96 + hive 0.12 ,基本全部都配好了.只有在hive中查询hbase的表出错.以直报如下错误: java.io.IOException: ...

  8. ACM n-1位数

    n-1位数 时间限制:3000 ms  |  内存限制:65535 KB 难度:1   描述 已知w是一个大于10但不大于1000000的无符号整数,若w是n(n≥2)位的整数,则求出w的后n-1位的 ...

  9. 5分钟 wamp下php phpmaile发送qq邮件 2015最新方法说明

    13:40 2015/11/20 5分钟 wamp下php phpmaile发送qq邮件 2015最新方法说明 关键点:现在qq邮箱开通smtp服务后会给你一个很长的独立新密码,发邮件配置中的密码需要 ...

  10. 【BZOJ1034】[ZJOI2008]泡泡堂BNB 贪心

    Description 第XXXX届NOI期间,为了加强各省选手之间的交流,组委会决定组织一场省际电子竞技大赛,每一个省的代表队由n名选手组成,比赛的项目是老少咸宜的网络游戏泡泡堂.每一场比赛前,对阵 ...