页码链接

Posted 2021-02-27

***** CSS *****
.paginacion{margin:0 20px 20px 0; padding:2px}
.paginacion ul{margin:0; padding:0; text-align:right; font-size:16px}
.paginacion li{list-style-type:none; display:inline; padding-bottom:1px}
.paginacion a, .paginacion a:visited{padding:0 5px; border:1px solid #9C3D3D; text-decoration:none; color:#000}
.paginacion a:hover, .paginacion a:active{border:1px solid #9C3D3D; color:#9C3D3D; background:#EFEFEF}
.paginacion a.paginaActual{background:#9C3D3D; color:#FFF !important; border-color:#9C3D3D; font-weight:700; cursor:default}
.paginacion a.deshabilitado, .paginacion a.deshabilitado:hover{background:#FFF; cursor:default; color:#929292; border-color:#929292; font-weight:400 !important}
.paginacion a.anteriorSiguiente{font-weight:700}
 
***** html *****
<div class="paginacion">
  <ul>
    <li><a href="#" class="anteriorSiguiente deshabilitado">« anterior</a></li>
    <li><a href="#" class="paginaActual">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a>...</li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#" class="anteriorSiguiente">siguiente »</a></li>
  </ul>
</div>