简单的导航分页效果

最新推荐文章于 2022-02-11 08:55:54 发布

Coding_Boy36

最新推荐文章于 2022-02-11 08:55:54 发布

阅读量440

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/xq43701200/article/details/75048927

版权

html 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<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;
}