简单的导航分页效果

来源:互联网 发布:使用ping命令测试网络 编辑:程序博客网 时间:2024/05/21 07:12

<body><div class="wrap" >   <ul>      <li class="section checked">  page1</li>      <li class="section">  page2</li>   </ul></div><div>   <div class="page page1">      这是第一个分页   </div>   <div class="page page2">      这是第二个分页   </div></div>
下面是css
.section{   cursor: pointer;   border: 1px solid #00a0e9;   border-radius: 3px;   padding-left: 10px;}.checked{   cursor: pointer;   border: 1px solid #E45A3A;}.page1 {   display: block;   width: 500px;   margin: 0 auto;}.page2 {   width: 500px;   margin: 0 auto;   display: none;}.wrap ul li {   float: left;   list-style: none;/*去掉默认的圆点符号*/   padding: 10px;   margin-left: 10px;}


只是实现最简单的效果,没有做任何美化,望见谅

原创粉丝点击