CSS2 0實現麵包屑

2021-09-06 13:12:17 字數 3163 閱讀 7467

css2.0實現麵包屑

如上所示：

思路：1. 頁面有3個li li標籤巢狀有2個標籤 分別模擬2個小三角形 第乙個就是白色背景那塊 第二塊就是和灰色背景重疊的那個小三角。

html**可以寫成如下：

<


div 


class


="box"


>


<


ul>


<


li>gggg<


em>


em><


i>


i>


li>


<


li class


="current"


>gggg<


em>


em><


i>


i>


li>


<


li>gggg<


em>


em><


i>


i>


li>


ul>


div>
下面我們這個例項效果先放放 我們還是來複習下以前寫的 "css實現氣泡框效果" 中怎麼樣實現乙個小三角形吧!

比如頁面有如下html**：

現在我想用css實現乙個小三角形 我們現在該如何做？先不急 慢慢來 一步一步拆分。

1. 首先我們來看看css border屬性，當我們把乙個div border-color設定成不同顏色時候，可以看到四邊都成了矩形了。如下css**

.demo
如下圖所示：

2.  如果我們繼續把div的寬度和高度設為0的話 那麼四邊會成了三角形了。

如下圖所示：

但是ie6下 上下是三角形 左右是矩形框：如下：

通過實驗發現當把div的font-size和line-height都設為0的時候，div的四邊在ie6下都能形成完美的三角形：**如下

.demo
3.   很明白我們只需要乙個三角形，那麼我們只需要把其他三邊顏色設定為透明或者設定為和背景顏色相同就可以製作出乙個三角形出來了，將其他三邊顏色設定為透明，即color的值為transparent，如果其他三邊顏色跟頁面背景一樣，雖然視覺上只能看到乙個三角，但背景顏色一旦改變，其他三邊顏色也要隨之改變。如下**：

.demo
但是在ie6下 又有問題了 ie6不支援透明 transparent 如下：

但通過實驗發現把border-style設定為dashed後，ie6下其他三邊就能透明了！如下：

現在小三角已經製作完畢！

現在麵包屑的小三角該怎麼做？

1. 首先我們看看html結構如下：

<


div 


class


="box"


>


<


ul>


<


li>gggg<


em>


em><


i>


i>


li>


<


li class


="current"


>gggg<


em>


em><


i>


i>


li>


<


li>gggg<


em>


em><


i>


i>


li>


ul>


div>
那麼正常的情況下 我們新增如下css樣式

*ul,li.box.box li
可以實現如下效果：

2. 我們現在的問題是 我希望在每列右側新增乙個小三角形 背景為白色 覆蓋到灰色背景上面去 所以我們可以在em標籤上寫css樣式 製作小三角如上有怎麼製作的 所以這裡就不多說了. **如下：

.box li em
加上css**後 效果圖如下：

安照正常情況下 因為我是在每列右側加乙個小三角 且用了overflow：hidden 所以最後乙個小三角沒有了，但是在ie6，7下 最後乙個也有小三角 所以我在最外層容器

.box;加了乙個相對定位 所以目前相容ie6+ 火狐 谷歌等遊覽器。

3. 現在已經做成如上所示的樣子 我們離我們想要的效果還沒有完成 所以我們現在還需要在li標籤上 需要再做個小三角形 背景為灰色 覆蓋到上面去 css**如下：

.box li i
4. 但是由於當前有選中的狀態 所以還要把current樣式加上 如下：

.box li.current.box li.current i
現在一切都完成了 效果如下：

現在把所有**綜合下：

html**如下：

<


div 


class


="box"


>


<


ul>


<


li>gggg<


em>


em><


i>


i>


li>


<


li class


="current"


>gggg<


em>


em><


i>


i>


li>


<


li>gggg<


em>


em><


i>


i>


li>


ul>


div>
css**如下：

*ul,li.box.box li.box li em.box li i.box li.current.box li.current i

麵包屑導航

麵包屑是一種常見的導航工具，通常出現在網頁內容的上方。麵包屑小巧，簡單，有時候甚至很難引起人們的注意，但就是這麼乙個簡單的小東西，卻有十分重要的作用。今天我們就教大家來認識麵包屑。麵包屑的概念來自於童話故事 漢賽爾和格萊特 當漢賽爾和格萊特穿過森林時，不小心迷路了，但他們發現在沿途走過的地方都撒下了...

Bootstrap 麵包屑導航

十一月小例子效果如下 jsp頁面 查詢 重置資源名稱 資源提供方 資源型別 資源使用方 應用系統 申請時間 操作 資源名稱 資源提供方 資源型別 資源使用方 應用系統 申請時間 操作 js function else if count 1 table list datatable fndestroy...

vue element ui麵包屑導航

1 公共元件layout中引入麵包屑導航元件，具體位置根據自己需要設定，麵包屑導航利用element ui中的，可事先了解 breadcrumb for item in levellist key item.path handlelink item a el breadcrumb item tran...