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;}