1. 云栖社区>
  2. 技术文集>
  3. 列表>
  4. 正文

CSS2.0实现面包屑

作者:用户 来源:互联网 时间:2016-03-11 17:39:27

line-heightdashpx三角形一个三角transparentOpenGLES2.0三角形禁用Transparent下三角小三角指引

CSS2.0实现面包屑 - 摘要: 本文讲的是CSS2.0实现面包屑,   面包屑这样的 我们以前都是用背景图片做这块工作,但是直到大概2个星期之前在新浪微博上看到用css3.0实现这样的面包屑 但是目前情况下IE6-8并不支

  面包屑这样的 我们以前都是用背景图片做这块工作,但是直到大概2个星期之前在新浪微博上看到用css3.0实现这样的面包屑 但是目前情况下IE6-8并不支持css3.0 只有标准游览器(像火狐 谷歌等支持)。由于有前一次总结一篇关于"CSS实现气泡框效果" 的文章 其中有关于怎么样实现小三角形的列子  所以感觉用那个小三角形可以正好模拟这块工作,所以也就试着做了一个。下面我们来看看面包屑大概是个什么样的效果!如下图:

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

如下图所示:

 CSS2.0实现面包屑-css面包屑导航代码

2.  如果我们继续把div的宽度和高度设为0的话 那么四边会成了三角形了。

   如下图所示:

  CSS2.0实现面包屑-css3 面包屑

  但是IE6下 上下是三角形 左右是矩形框:如下:

 CSS2.0实现面包屑-css3扁平化面包屑导航

 通过实验发现当把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 如下:

 CSS2.0实现面包屑-div css 面包屑

  但通过实验发现把border-style设置为dashed后,IE6下其他三边就能透明了!如下:

  CSS2.0实现面包屑-css 面包屑

现在小三角已经制作完毕!

    现在面包屑的小三角该怎么做?

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

可以实现如下效果:

CSS2.0实现面包屑-css面包屑导航代码

. 我们现在的问题是 我希望在每列右侧添加一个小三角形 背景为白色 覆盖到灰色背景上面去 所以我们可以在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代码后 效果图如下:

 CSS2.0实现面包屑-css3 面包屑

安照正常情况下 因为我是在每列右侧加一个小三角 且用了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;}
 

现在一切都完成了 效果如下:

CSS2.0实现面包屑-css3扁平化面包屑导航

现在把所有代码综合下:

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

页面已完成 如有不足之处 请留言!谢谢!!



以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有 的相关内容,欢迎继续使用右上角搜索按钮进行搜索line-height , dash , px , 三角形 , 一个 , 三角 , transparent , OpenGLES2.0三角形 , 禁用Transparent , 下三角 小三角指引 css 面包屑、css面包屑导航代码、css3 面包屑、css3扁平化面包屑导航、div css 面包屑,以便于您获取更多的相关知识。

效果-jquery ajax仿文件夹层级打开

... $("#list li .text").on("click", function (e) { //加载面包屑 loadCrumb(); //加载列表数据 loadListData(); } }); }); } //加载面包屑 function loadCrumb() { $.post("ListHandler.a...

php可应用于面包屑导航的迭代寻找家谱树实现方法_php技巧

本文实例讲述了php可应用于面包屑导航的迭代寻找家谱树实现方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的php程序设计有所帮助。

php可应用于面包屑导航的递归寻找家谱树实现方法

本文实例讲述了php可应用于面包屑导航的递归寻找家谱树实现方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的php程序设计有所帮助。

递归无限分类实现1

#递归实现无线分类##1.两种使用场景* 分类下拉列表 * 面包屑导航## 2.分类下来列表分类下拉类表主要使用在后台添加商品或者文章界面选择分类的时候。1. 用什么体现下拉缩进2. 实现原理 (where pid=id); 通过父的pid作为id,再把id作...

使用static静态成员实现服务器端缓存(导航面包屑)~续

  在写完首篇cache文章后,有些朋友给我来信,希望可以使用JS的方法来实现这个导航功能,所以,才有了这篇文章,JS与C#不同,它虽然有引用类型,但它不具备一些引用类型的特性,如它的方法参数为对象时,也是通过...

前三篇
后三篇
弹性可伸缩的计算服务,助您降低 IT 成本,提升运维效率

40+云计算产品,6个月免费体验

稳定可靠、可弹性伸缩的在线数据库服务,全球最受欢迎的开源数据库之一

云服务器9.9元/月,大学必备