首页 > 代码库 > css制作面包屑导航

css制作面包屑导航

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!

 


css制作面包屑导航