基于html和CSS3制作简单侧边导航栏

前端技术 2023/09/01 CSS

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

效果图:

html:

XML/HTML Code复制内容到剪贴板
  1. <div class=\"sidebar\">  
  2.     <ul>  
  3.         <li>优先级   
  4.              <ul>  
  5.                 <li><aonclickaonclick=\"\"class=\"sidebar-selected\">全部</a></li>  
  6.                 <li><aonclickaonclick=\"\">P1</a></li>  
  7.                 <li><aonclickaonclick=\"\">P2</a></li>  
  8.                 <li><aonclickaonclick=“\" >P3</a></li>  
  9.                 <li><aonclickaonclick=\"\">P4</a></li>  
  10.             </ul>  
  11.         </li>  
  12.     </ul>  
  13. </div>  
  14.   

css:

CSS Code复制内容到剪贴板
  1. .sidebar {   
  2.     border-right1px solid #f0f2f1;   
  3.     width180px;   
  4.     floatleft;   
  5.     padding-left35px;   
  6. }   
  7.   
  8. .sidebar>ul {   
  9.     list-stylenone;   
  10.     padding: 0;   
  11.     margin: 0;   
  12. }   
  13.   
  14. .sidebar>ul>li {   
  15.     font-size18px;   
  16.     font-weight: 400;   
  17.     padding0010px;   
  18.     margin-top5px;   
  19. }   
  20.   
  21. .sidebar>ul>li>ul {   
  22.     border-top1px dashed rgba(0,0,0,0.1);   
  23.     displayblock;   
  24.     list-stylenone;   
  25.     margin5px010px0;   
  26.     padding10px0010px;   
  27.     font-size14px;   
  28.     max-height138px;   
  29.     overflowauto;   
  30. }   
  31.   
  32. .sidebar a {   
  33.     line-height: 1.5;   
  34. }   
  35.   
  36. .sidebar a:hover {   
  37.     color#e74430;   
  38.     cursor:pointer;   
  39. }   
  40.   
  41. .sidebar-selected {   
  42.      color#e74430;   
  43. }   

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

本文地址:https://www.stayed.cn/item/3115

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。