首先祝大家，在新年里，好的、善良的都都马上有。关于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{ 910px; margin: 20px auto; _overflow: hidden; } .iBread ul{ border-radius: 6px; overflow: hidden; } .iBread li{ position: relative; float: left; 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; 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; 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; 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; 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{ 214.75px; } .iBreadFive li{ 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>
运行代码
