首先祝大家，在新年里，好的、善良的都都马上有。

关于css实现面包屑已经是一个典型例子了。不过今天还是与大家分享一下实现的原理。
原理：每一段元素固定宽度并向左浮动，头尾突出部分相对父元素用相对定位固定位置，默认为同一颜色，高亮设置指定样式。

详解见下图：

合并小图标，减少链接请求数量

DEMO：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面包屑</title>
<style>
*{margin: 0px;padding: 0px;}
ul,ol,li,dl,dt,dd{list-style: none;}
.iCls{*zoom:1;}
.iCls:after{display:block; overflow:hidden;clear:both; height:0;visibility:hidden; content:".";}
.iBread li i,.iBread li em,.iBread li strong{
background-image:url("http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_ibread.png");
background-repeat: none;
}

.iBread{
width: 910px;
margin: 20px auto;
_overflow: hidden;
}

.iBread ul{
border-radius: 6px;
overflow: hidden;
}

.iBread li{
position: relative;
float: left;
width: 292px;
height: 35px;
line-height: 35px;
color: #666666;
font-weight: bold;
background: #dfdfdf;
margin-right: 17px;
_margin-right: 16px;
text-indent: 80px;

}

.iBread li.last{
margin-right: 0px;
}

.iBread li i{
position: absolute;
right: -17px;
top: 0px;
z-index: 1;
display: block;
width: 17px;
height: 35px;
overflow: hidden;
background-position: -204px 0px;
}

.iBread li em{
display: none;
}

.iBread li strong{
position: absolute;
left: 30px;
top: 3px;
display: block;
width: 30px;
height: 30px;
overflow: hidden;
text-indent: -9999px;
margin-right: 20px;
}

.iBread li strong.one{
background-position: 0px 0px;
}

.iBread li strong.two{
background-position: -34px 0px;
}

.iBread li strong.three{
background-position: -67px 0px;
}

.iBread li strong.four{
background-position: -101px 0px;
}

.iBread li strong.five{
background-position: -134px 0px;
}

.iBread li.on{
z-index: 1;
color: #fff;
background-image:url("http://images.cnblogs.com/cnblogs_com/kuikui/354173/o_ibread.png");
background-repeat: repeat;
background-position: 0px -78px;
}

.iBread li.on i{
right: -19px;
width: 19px;
color: #fff;
background-position: -228px -41px;
}

.iBread li.on em,.iBread li.lastOn em{
position: absolute;
left: -17px;
top: 0px;
z-index: 1;
display: block;
width: 17px;
height: 35px;
overflow: hidden;
background-position: -204px -41px;
}

.iBread li.on strong.one{
background-position: 0px -41px;
}

.iBread li.on strong.two{
background-position: -34px -41px;
}

.iBread li.on strong.three{
background-position: -67px -41px;
}

.iBread li.on strong.four{
background-position: -101px -41px;
}

.iBread li.on strong.five{
background-position: -134px -41px;
}

.iBread li.last i{
background-position: -228px 0px;

}

.iBreadFour li{
width: 214.75px;
}

.iBreadFive li{
width: 168.4px;
}
</style>
</head>
<body>
<div class="iBread">
<ul class="iCls">
<li class="on">
<strong class="one">1</strong>
第一项
<i></i>
</li>
<li>
<strong class="two">2</strong>
第二项
<i></i><em></em>
</li>
<li class="last">
<strong class="three">3</strong>
第三项
<em></em>
</li>
</ul>
</div>

<div class="iBread iBreadFour">
<ul class="iCls">
<li class="on">
<strong class="one">1</strong>
第一项
<i></i>
</li>
<li>
<strong class="two">2</strong>
第二项
<i></i><em></em>
</li>
<li >
<strong class="three">3</strong>
第三项
<i></i><em></em>
</li>
<li class="last">
<strong class="four">4</strong>
第四项
<em></em>
</li>
</ul>
</div>

<div class="iBread iBreadFive">
<ul class="iCls">
<li >
<strong class="one">1</strong>
第一项
<i></i>
</li>
<li class="on" >
<strong class="two">2</strong>
第二项
<i></i><em></em>
</li>
<li >
<strong class="three">3</strong>
第三项
<i></i><em></em>
</li>
<li>
<strong class="four">4</strong>
第四项
<i></i><em></em>
</li>
<li class="last">
<strong class="five">5</strong>
第五项
<em></em>
</li>
</ul>
</div>
</body>
</html>

运行代码

面包屑 CSS的更多相关文章

  1. 菜单导航/URHere/面包屑，通过CSS中的content简洁表达代码

    比如我们要写一个菜单导航/URHere/面包屑,如: 首页 > 个人中心 > 修改密码 代码: <ul> <li><a href="javascri ...

  2. 辛星跟您解析在CSS面包屑中三角形的定位问题

    刚才看到有位网友非常纳闷第二个棕色三角形是怎么定位的,我当感觉在以下说不清楚,就特别开了一片博客.来说清楚它.首先,前面的代码我们先抄下来,至于前面这部分代码是怎么来的,读我的用CSS制作面包屑导航的 ...

  3. amazeui学习笔记--css（常用组件2）--面包屑导航Breadcrumb

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

  4. Bootstrap <基础十八>面包屑导航（Breadcrumbs）

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

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

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

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

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

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

    如上面形式面包屑的写法: HTML如下, <div class="m-crumb"> <ul class="f-cb"> <li& ...

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

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

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

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

随机推荐

  1. SPOJ.Visible Lattice Points(莫比乌斯反演)

    题目链接 /* http://www.spoj.com/problems/VLATTICE/ 题意:求一个n*n*n的晶体,有多少点可以在(0,0,0)处可以直接看到. 同BZOJ.2301 题目即要 ...

  2. 数学——函数极限知识以及sympy库的limit

    函数极限与Sympy库 欢迎访问我的博客 这部分可以参考sympy库中的limit 在$z_0$点处计算$e(z)$函数的极限 \(\lim_{z \to z_0} e(z)\) = limit(e, ...

  3. 潭州课堂25班：Ph201805201 爬虫高级 第六课 sclapy 框架 中间建 与selenium对接 (课堂笔记）

    因为每次请求得到的响应不一定是正常的,   也可以在中间建中与个类的方法,自动更换头自信,代理Ip, 在设置文件中添加头信息列表, 在中间建中导入刚刚的列表,和随机函数 class UserAgent ...

  4. BZOJ2366 : 多重历史

    建立AC自动机,因为不存在某个串是另一个串的后缀,因此匹配到任意位置都只可能匹配一个串. 预处理出每个串出现的所有位置,总的出现次数为$O(m)$. 设$f[i][j]$表示考虑了前$i$个串,最后一 ...

  5. Java实现字符串倒序输出的几种方法

    1. 最容易想到的估计就是利用String类的toCharArray(),再倒序输出数组的方法了. import javax.swing.JOptionPane; public class Rever ...

  6. winform自动更新之AutoUpdater.NET

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/zhaobw831/article/details/82226291使用AutoUpdater.NET ...

  7. Linux centOS Ubuntu --- 使用systemctl添加开机启动

    我们对service和chkconfig两个命令都不陌生,systemctl 是管制服务的主要工具, 它整合了chkconfig 与 service功能于一体. systemctl is-enable ...

  8. Android APK反编译详解（附图） (转)

    这段时间在学Android应用开发,在想既然是用Java开发的应该很好反编译从而得到源代码吧,google了一下,确实很简单,以下是我的实践过程. 在此郑重声明,贴出来的目的不是为了去破解人家的软件, ...

  9. 几种php加速器比较

    一.PHP加速器介绍 PHP加速器是一个为了提高PHP执行效率,从而缓存起PHP的操作码,这样PHP后面执行就不用解析转换了,可以直接调用PHP操作码,这样速度上就提高了不少. Apache中使用mo ...

  10. ubuntu 安装JDK1.6(jdk-6u45-linux-x64.bin)

    ubuntu 安装JDK1.6 首先在官网下载JKD1.6 linux的版本:http://www.oracle.com/technetwork/java/javasebusiness/downloa ...