css制作面包屑导航

浏览数：39 / 时间：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!

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

css制作面包屑导航