當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

面包屑 CSS

發布時間：2025/6/17 CSS 62 豆豆

生活随笔收集整理的這篇文章主要介紹了面包屑 CSS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

關于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>

運行代碼

轉載于:https://www.cnblogs.com/kuikui/p/3541343.html

總結

以上是生活随笔為你收集整理的面包屑 CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。