css 面包屑

来源：互联网发布：图像算法工程师前途编辑：程序博客网时间：2024/05/08 08:15

今天为了写一个简单的样式，研究了半天，图如下：

方法其实很简单，但中间尝试了很多，特记录下来重要的东西。

首先单看图片，发现中间这块使用了两个css的三角形，一块在左边为灰色，一块在右边为白色，写下了如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.div0 {width: 600px;height: 34px;}.div1 {width: 250px;height: 34px;background-color: #999;float: left;position: relative;}.div2 {position: absolute;left: 250px;width: 0px;height: 0px;border-left: #999 17px solid;border-right: #fff 17px solid;border-bottom: #fff 17px solid;border-top: #fff 17px solid;}.div4{ position: absolute;left: 266px;width: 0px;height: 0px;border-left: #fff 17px solid;border-right: #f00 17px solid;border-bottom: #f00 17px solid;border-top: #f00 17px solid;}.div3 {width: 250px;height: 34px;background-color: #F00;float: left;}</style></head><body><div class="div0">  <div class="div1">    <div class="div2"></div>    <div class="div4"></div>  </div>  <div class="div3"></div></div></body></html>

效果如下：

咋一看是实现了，但当我想把中间的空隙缩小时，发现就会变成这样，效果如下：

发现没有，左边的尖被盖上了，才想起来右块的左边框是存在的，只是背景变成了白色而已，法克！就算把左块的 z-index设高也会变成如下效果：

那我把左边块的背景变成透明（transparent）总行了吧，NO!NO!NO! 右边的红色会填充，效果如下：

OMG，是找BD的时候了！

找了半天发现这是一个叫做 “面包屑”导航的东东，效果、代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>* {margin: 0;padding: 0;list-style-type: none;}a {border: 0;}.demo {width: 600px;margin: 50px auto;background: #999;}.demo ul {height: 32px;overflow: hidden;}.demo ul li{float: left;width: 200px;text-align: center;line-height:32px;font-weight: bold;font-size: 16px;position: relative;}.demo li em{position: absolute;width: 0;height: 0;right: -24px;top: -8px;border-width: 24px 0 24px 24px;border-color: transparent transparent transparent #fff;border-style: dashed dashed dashed solid;}.demo li i{position: absolute;width: 0;height: 0;right: -16px;top: 0px;border-width: 16px 0 16px 16px;border-color: transparent transparent transparent #999;border-style: dashed dashed dashed solid;}</style></head><body><div class="demo">  <ul class="clearfix">    <li>面包屑一<em></em><i></i></li>    <li class="current">面包屑二<em></em><i></i></li>    <li>面包屑二<em></em><i></i></li>  </ul></div></body></html>

看了半天，有点不懂啊，遂就用 firbug 调试了一下，终于发现其中的玄机，哦~~~~

原来，道理是一样的，不过他把右边的块，即标签<em>的边框变大了，通过绝对定位将其居中（top:-8px;），如图：

而左边的块，即标签<i>的边框是父级的一半，这样上边框+下边框=父级高度，如图：

同时，em、i（对应的是右块、左块）的上、右、下边框都是透明的，只有左块不同，em（右块）的左边框是白色，i（左块）的边框是灰色的。

这样，大块（em）上又一个小块（i），同时边框透明，就达到了面包屑的效果。

下面的图更能说明问题，把ul的高度加大，黑色为em（右块），红色为i（左块）。

效果是做完了，但这令我想到很多东西，完全可以用css做对话框之类的效果，等等。。。

0 0