基于html和CSS3制作简单侧边导航栏_ Div+Css教程-查字典教程网
基于html和CSS3制作简单侧边导航栏
基于html和CSS3制作简单侧边导航栏
发布时间:2017-01-07 来源:查字典编辑
摘要:本文为大家分享了一个侧边导航栏css示例,供大家参考,具体内容如下效果图:html:XML/HTMLCode复制内容到剪贴板优先级全部P1P...

本文为大家分享了一个侧边导航栏css示例,供大家参考,具体内容如下

效果图:

html:

XML/HTML Code复制内容到剪贴板 <divclass="sidebar"> <ul> <li>优先级 <ul> <li><aonclickaonclick=""class="sidebar-selected">全部</a></li> <li><aonclickaonclick="">P1</a></li> <li><aonclickaonclick="">P2</a></li> <li><aonclickaonclick=“">P3</a></li> <li><aonclickaonclick="">P4</a></li> </ul> </li> </ul> </div>

css:

CSS Code复制内容到剪贴板 .sidebar{ border-right:1pxsolid#f0f2f1; width:180px; float:left; padding-left:35px; } .sidebar>ul{ list-style:none; padding:0; margin:0; } .sidebar>ul>li{ font-size:18px; font-weight:400; padding:0010px; margin-top:5px; } .sidebar>ul>li>ul{ border-top:1pxdashedrgba(0,0,0,0.1); display:block; list-style:none; margin:5px010px0; padding:10px0010px; font-size:14px; max-height:138px; overflow:auto; } .sidebara{ line-height:1.5; } .sidebara:hover{ color:#e74430; cursor:pointer; } .sidebar-selected{ color:#e74430; }

以上就是css侧边导航栏实例讲解,希望对大家学习制作导航栏有所帮助。

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类