首頁 > web前端 > html教學 > css制作面包屑导航_html/css_WEB-ITnose

css制作面包屑导航_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:52:44
原創
1163 人瀏覽過

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!

 

  

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板