面包屑 CSS

本文轉載自查看原文 2014-02-09 12:21 4503 css/html

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

關於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"> 1 第一項 </li> <li> 2 第二項 </li> <li class="last"> 3 第三項 </li> </ul> </div> <div class="iBread iBreadFour"> <ul class="iCls"> <li class="on"> 1 第一項 </li> <li> 2 第二項 </li> <li > 3 第三項 </li> <li class="last"> 4 第四項 </li> </ul> </div> <div class="iBread iBreadFive"> <ul class="iCls"> <li > 1 第一項 </li> <li class="on" > 2 第二項 </li> <li > 3 第三項 </li> <li> 4 第四項 </li> <li class="last"> 5 第五項 </li> </ul> </div> </body> </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS2.0實現面包屑 CSS 面包屑導航欄純CSS實現面包屑式導航 element面包屑導航 VUE面包屑組件 vue iview面包屑 Layui導航、面包屑 Js面包屑導航生成帶箭頭的面包屑導航欄 wordpress面包屑導航簡單實現