Rumah > hujung hadapan web > html tutorial > css制作面包屑导航_html/css_WEB-ITnose

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

WBOY
Lepaskan: 2016-06-24 11:52:44
asal
1165 orang telah melayarinya

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

代码:

<ul>    <li>HTML<i></i></li>    <li><em></em>CSS<i></i></li>    <li><em></em>JavaScript<i></i></li></ul>
Salin selepas log masuk

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;    }
Salin selepas log masuk

Done!

 

  

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan