CSS Enlacesdepagicación/ Pagination链接

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS Enlacesdepagicación/ Pagination链接相关的知识，希望对你有一定的参考价值。

***** 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>

以上是关于CSS Enlacesdepagicación/ Pagination链接的主要内容，如果未能解决你的问题，请参考以下文章

css 第19集React Scrimba

19、css样式的优先级

19,CSS 滤镜

CSS3动画-旋转图标制作19

CSS学习19-清除浮动

[19/06/07-星期五] CSS基础_布局&定位