css制作面包屑导航

浏览数：37 / 时间：2015年06月09日

css2制作面包屑导航主要的原理就是利用绝对定位以及当元素的宽度和高度都为零时边框的挤压性质，效果图

代码：

<ul>
    <li>HTML<i></i></li>
    <li><em></em>CSS<i></i></li>
    <li><em></em>JavaScript<i></i></li></ul>

css:

    ul{
        list-style:none;
    }
    li{
        float:left;
        width:200px;
        height:32px;
        line-height:32px;
        background-color:gray;
        text-align:center;
        font-size:14px;
        font-weight:bold;
        font-family:Arial;
        position:relative;
        margin-left:5px;
        cursor:pointer;
    }
    em,i{
        display:block;
        width:0;
        height:0;
        border-style:solid;
        border-width:16px 0 16px 16px;
        position:absolute;
    }
    i{
        right:-16px;
        top:0;
        border-color:transparent transparent transparent gray;
        z-index:2;
    }
    em{
        left:0;
        top:0;
        border-color:transparent transparent transparent white;
    }
    li:hover{
        background-color:orange;
        color:#FFF;
    }
    li:hover i{
        border-color:transparent transparent transparent orange;
    }

Done!