热门搜索 :
考研考公
您的当前位置:首页正文

css制作面包屑导航_html/css

2020-11-27 来源:东饰资讯网

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!

      

    Top