Maison > interface Web > tutoriel HTML > css制作面包屑导航_html/css_WEB-ITnose

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

WBOY
Libérer: 2016-06-24 11:52:44
original
1164 Les gens l'ont consulté

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

代码:

<ul>    <li>HTML<i></i></li>    <li><em></em>CSS<i></i></li>    <li><em></em>JavaScript<i></i></li></ul>
Copier après la connexion

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;    }
Copier après la connexion

Done!

 

  

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal