首页 > 开发 > CSS > 正文

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

2024-07-11 08:33:18
字体:
来源:转载
供稿:网友

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

效果图:

html:

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

css:

CSS Code复制内容到剪贴板
  1. .sidebar {        border-right: 1px solid #f0f2f1;   
  2.     width: 180px;        float: left;   
  3.     padding-left: 35px;    }   
  4.    .sidebar>ul {   
  5.     list-style: none;        padding: 0;   
  6.     margin: 0;    }   
  7.    .sidebar>ul>li {   
  8.     font-size: 18px;        font-weight: 400;   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表