CSS2.0實現麪包屑

本文轉載自 http://www.cnblogs.com/tugenhua0707/p/3485384.html

    CSS2.0實現麪包屑

      麪包屑這樣的 咱們之前都是用背景圖片作這塊工做，可是直到大概2個星期以前在新浪微博上看到用css3.0實現這樣的麪包屑 可是目前狀況下IE6-8並不支持css3.0 只有標準遊覽器(像火狐 谷歌等支持)。因爲有前一次總結一篇關於"CSS實現氣泡框效果" 的文章 其中有關於怎麼樣實現小三角形的列子  因此感受用那個小三角形能夠正好模擬這塊工做，因此也就試着作了一個。下面咱們來看看麪包屑大概是個什麼樣的效果！以下圖：

  

  如上所示：

  思路：

　　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代碼：

 <div class="demo"></div>

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

 1. 首先咱們來看看css border屬性，當咱們把一個div border-color設置成不一樣顏色時候，能夠看到四邊都成了矩形了。以下css代碼

.demo {width:50px;height:50px;border-width:50px;border-style:solid;border-color:#CCC #00F #933 #0C9;}

以下圖所示：

 

2.  若是咱們繼續把div的寬度和高度設爲0的話 那麼四邊會成了三角形了。

   以下圖所示：

  

  可是IE6下 上下是三角形 左右是矩形框：以下：

 

 經過實驗發現當把div的font-size和line-height都設爲0的時候，div的四邊在IE6下都能造成完美的三角形：代碼以下

.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC #00F #933 #0C9;line-height:0;font-size:0;}

3.   很明白咱們只須要一個三角形，那麼咱們只須要把其餘三邊顏色設置爲透明或者設置爲和背景顏色相同就能夠製做出一個三角形出來了，將其餘三邊顏色設置爲透明，即color的值爲transparent，若是其餘三邊顏色跟頁面背景同樣，雖然視覺上只能看到一個三角，但背景顏色一旦改變，其餘三邊顏色也要隨之改變。以下代碼：

.demo{width:0; height:0; border-width:50px; border-style:solid; border-color:#CCC transparent transparent transparent;line-height:0;font-size:0;}

可是在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樣式

*{ margin:0; padding:0;}
ul,li{list-style:none;}
.box{position:relative;margin:100px auto;background:#ccc;width:600px;height:32px;line-height:32px;overflow:hidden;}
.box li{float:left;width:200px;text-align:center;position:relative;z-index:2;}

能夠實現以下效果：

2. 咱們如今的問題是 我但願在每列右側添加一個小三角形 背景爲白色 覆蓋到灰色背景上面去 因此咱們能夠在em標籤上寫css樣式 製做小三角如上有怎麼製做的 因此這裏就很少說了. 代碼以下：

.box li em{width:0;height:0;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;border-width:24px 0 24px 24px;position:absolute;right:-24px;top:-8px;line-height:0;font-size:0;}

加上css代碼後 效果圖以下：

 

安照正常狀況下 由於我是在每列右側加一個小三角 且用了overflow：hidden 因此最後一個小三角沒有了，可是在IE6，7下 最後一個也有小三角 因此我在最外層容器

.box{position:relative};加了一個相對定位 因此目前兼容IE6+ 火狐 谷歌等遊覽器。

3. 如今已經作成如上所示的樣子 咱們離咱們想要的效果尚未完成 因此咱們如今還須要在li標籤上 須要再作個小三角形 背景爲灰色 覆蓋到上面去 CSS代碼以下：

.box li i{width:0;height:0;border-color:transparent transparent transparent #ccc;border-style:dashed dashed dashed solid;border-width:16px 0 16px 16px;position:absolute;right:-16px;top:0;line-height:0;font-size:0;}

4. 可是因爲當前有選中的狀態 因此還要把current樣式加上 以下：

.box li.current{background:#933;z-index:1;}
.box li.current i{border-color:transparent transparent transparent #933;}

如今一切都完成了 效果以下：

如今把全部代碼綜合下：

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代碼以下：

*{ margin:0; padding:0;}
ul,li{list-style:none;}
.box{position:relative;margin:100px auto;background:#ccc;width:600px;height:32px;line-height:32px;overflow:hidden;}
.box li{float:left;width:200px;text-align:center;position:relative;z-index:2;}
.box li em{width:0;height:0;border-color:transparent transparent transparent #fff;border-style:dashed dashed dashed solid;border-width:24px 0 24px 24px;position:absolute;right:-24px;top:-8px;line-height:0;font-size:0;}
.box li i{width:0;height:0;border-color:transparent transparent transparent #ccc;border-style:dashed dashed dashed solid;border-width:16px 0 16px 16px;position:absolute;right:-16px;top:0;line-height:0;font-size:0;}
.box li.current{background:#933;z-index:1;}
.box li.current i{border-color:transparent transparent transparent #933;}