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

css制作面包屑导航

2024-08-06 15:32:36   217人阅读

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制作面包屑导航


联系
我们