css制作面包屑导航_html/css_WEB-ITnose
程序员文章站
2022-05-22 16:23:04
...
css2制作面包屑导航主要的原理就是利用绝对定位以及当元素的宽度和高度都为零时边框的挤压性质,效果图
代码:
- HTML
- CSS
- JavaScript
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!