本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3制作面包屑型导航条

本文介绍如何不使用任何图像,只使用CSS 3来制作一个面包屑型导航条。

实际运行结果

HTML代码

面包屑型导航条主要由ul、li、a元素构成。

<ul class="bread">
    <li><a href="#">项目一</a></li>
    <li><a href="#">项目二</a></li>
    <li><a href="#">项目三</a></li>
    <li class="current"><a href="#">项目四</a></li>
    <li><a href="#">项目五</a></li>
</ul>

CSS 3样式代码

首先,我们需要将每个列表项(li元素)从竖排排列更改为横排排列。同时将a元素显示为块元素(display:block)。

另外,本示例中采用灰色作为基本色调。

.bread {
    list-style : none;
    overflow : hidden;
}
.bread li {
    float : left;
    line-height : 60px;
}
.bread li a {
    display : block;
    float : left;
    padding : 0 40px 0 50px;
    font-weight : bold;
    color : #666;
    text-decoration : none;
    background: -moz-linear-gradient(left, #EDEDED, #CCCCCC);
    background: -webkit-linear-gradient(left, #EDEDED, #CCCCCC);
    background: -ms-linear-gradient(left, #EDEDED, #CCCCCC);
    background: linear-gradient(left, #EDEDED, #CCCCCC);
    background-color : #CCCCCC;
    text-shadow : 1px 1px 0 #FFFFFF;
}

接下来,我们需要使每一个列表项的右端变为尖形,我们使用CSS 3的transform变形功能、:before、:after选择器对(通过:before、:after选择器制作的)伪元素实行变形功能。

.bread li a::before {
    display : block;
    width : 15px;
    height : 30px;
    border-right : 5px solid #FFFFFF;
    margin : 0 -50px -30px auto;
    background-color : #CCCCCC;
    content : " ";
    -webkit-transform : skew(30deg);
    -moz-transform : skew(30deg);
    transform : skew(30deg);
}
.bread li a::after {
    display : block;
    width : 15px;
    height : 30px;
    border-right : 5px solid #FFFFFF;
    margin : -30px -50px 0 auto;
    background-color : #CCCCCC;
    content : " ";
    -webkit-transform : skew(-30deg);
    -moz-transform : skew(-30deg);
    transform : skew(-30deg);           
}

在a:before与a:after选择器中,我们将content样式属性值都设为" ",以插入一段空间。然后针对这段空间,使用“transform:skew(degree)”样式属性,使右端呈现尖形。

最后,通过current样式类,制作鼠标指针停留在每个列表项上时的样式。

.bread li.current a {
    color : #FFFFFF;
    background : linear-gradient(left, #E69A4F, #BA4A0A);
    background : -webkit-linear-gradient(left, #E69A4F, #BA4A0A);
    background : -moz-linear-gradient(left, #E69A4F, #BA4A0A);
    background : -ms-linear-gradient(left, #E69A4F, #BA4A0A);
    background-color : #BA4A0A;
    text-shadow : 1px 1px 0 #BA4A0A;
}
.bread li.current a::after, .bread li.current a::before {
    background-color : #BA4A0A;
}
.bread li a:hover {
    color : #FFFFFF;
    background : linear-gradient(left, #CCCCCC, #999999);
    background : -webkit-linear-gradient(left, #CCCCCC, #999999);
    background : -moz-linear-gradient(left, #CCCCCC, #999999);
    background : -ms-linear-gradient(left, #CCCCCC, #999999);
    background-color : #999999;
    text-shadow : 1px 1px 0 #999999;
}
.bread li a:hover::before, .bread li a:hover::after {
    background-color : #999999;
}