css+html+js 分页列表 2020-12-12

分页显示1(css+html+js)

1.html代码     一个ul和盛放分页的盒子

 <ul class="newslist">
    </ul>
    <div class="btn-box">
    </div>

2.css

      ul,
      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      ul {
        border: 1px solid #ccc;
        border-color: #ccc transparent transparent;
        width: 70%;
        margin: 20px auto;
      }
      li {
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        position: relative;
        color: #333;
        /* cursor: pointer; */
      }
      .del {
        display: block;
        line-height: 54px;
        position: absolute;
        right: 16%;
        color: rgb(231, 4, 4, 0);
      }
      .show {
        color: rgb(231, 4, 4);
        display: block;
        right: 15%;
        transition: all 0.5s;
      }
      .hidden {
        display: none;
        transition: all 0.3s linear;
      }

      .btn-box {
        margin: 20px auto;
        width: 100%;
        text-align: center;
      }
      a {
        border: none;
        border-radius: 6px;
        display: inline-block;
        padding: 10px 15px;
        background: rgb(127, 199, 117);
        color: #fff;
        text-decoration: none;
        margin: 0 2px;
      }
      a.unclick {