Heim > Web-Frontend > HTML-Tutorial > css制作面包屑导航_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:52:44
Original
1164 Leute haben es durchsucht

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

代码:

<ul>    <li>HTML<i></i></li>    <li><em></em>CSS<i></i></li>    <li><em></em>JavaScript<i></i></li></ul>
Nach dem Login kopieren

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;    }
Nach dem Login kopieren

Done!

 

  

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage