CSS3干货25：利用伪标签实现面包屑导航

面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。

--百度百科“面包屑导航”词条 

关于伪标签，可以查看 CSS3中伪元素::before和::after的经典用法

一般的面包屑导航

1. HTML 结构

主要利用 ul 和 li 制作整体结构。

前面几项都有超链接，最后一项内容不是超链接，就用 span 标签，因为它不需要点击。

分割符号 `>` 利用 li 的伪标签 ::after 来做。但是，第一项 li 和 最后一项  li 的伪标签内容为空。

<div class="box1">
    <ul class="bread">
        <li>当前位置：</li>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><span>关于我们详情</span></li>
    </ul>
</div>

2. CSS 样式

具体 CSS 代码如下：

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
a{
    text-decoration: none;
}
.box1{
    height: 40px;
    background: #eee;
    width: 1000px;
    line-height: 40px;
    margin-left: auto;
    margin-right: auto;
}
.box1 .bread{
    padding-left: 20px;
}
.box1 .bread li{
    float: left;
}
.box1 .bread li a,
.box1 .bread li span{
    display: inline-block;
    padding-left: 5px;
    padding-right: 5px;
    color: #333;
}
.box1 .bread li a:hover{
    color: #f30;
}
.box1 .bread li::after{
    content: ">";
}
.box1 .bread li:last-child::after,
.box1 .bread li:first-child::after{
    content:"";
}

特殊形状的面包屑导航

主要利用了 伪标签 ::before 和 after 制作了每个部分 头尾形状：

制作它们的关键是：设置宽高为 0 ；再添加边框。这个时候的边框，其实就是 4 个三角形（如下图所示）。

边框色为透明 transparent。需要哪个边框，就设置哪个边框颜色为指定色彩就可以。

这图片，其实就是 上下边框的左边部分。

知道了关键后，就来看代码。

1. HTML 结构

<div class="box">
    <ul class="breadNav">
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
        <li><a href="#">关于我们详情</a></li>
    </ul>
</div>

2. CSS 样式

*{
    margin: 0;
    padding: 0;
}
ul,li,ol{
    list-style: none;
}
a{
    text-decoration: none;
}

.box{
    margin: 100px;
    height: 50px;  /* 整个面包屑导航高 50。这个数据很关键。*/
}
.breadNav li{
    float: left;
    margin-left: 35px; /* 每个 li 适当拉开距离  */
}
.breadNav li a{
    display: block;
    line-height: 50px;
    padding-left: 20px; /* 超链接内容间距拉开 */
    padding-right: 20px;
    background: #eee;
    position: relative; /* 相对定位 */
    color: #333;
    font-size: 16px;
}
.breadNav li a::after,
.breadNav li a::before{
    content: "";
    width: 0;
    height: 0;
    /* 伪标签边框宽 25px 为整个高度的一般，边框颜色透明 。*/
    border:25px transparent solid;
    position: absolute;  /* 绝对定位，方便把定位伪标签位置 */
}
.breadNav li a::after{
    border-left-color:#eee;  /* 尾部三角，只有左边框，就设置左边框颜色  */
    left:100%;
    top:0;
}
.breadNav li a::before{
    /* 头部形状，只有上下边框，就设置上下边框色  */
    border-top-color:#eee;
    border-bottom-color:#eee;
    left:-25px;  /* 上下边框宽度是 50px，值需要它们的一半露出来。  */
    top:0;
}
/* 鼠标移动到超链接上改变颜色  */
.breadNav li a:hover{
    background: #f30;
    color: #fff;
}
.breadNav li a:hover::before{
    border-top-color:#f30;
    border-bottom-color:#f30;
}
.breadNav li a:hover::after{
    border-left-color:#f30;
}

完工~！

这个网页中说的 10 个纯css的面包屑导航，都是这么做的。

http://www.360doc.com/content/18/0125/10/33667232_724927599.shtml