Aprende a crear una paginación sensible el uso de CSS.
sencilla paginación
Si usted tiene un sitio web con una gran cantidad de páginas, es posible que desee agregar algún tipo de paginación para cada página:
Para crear una paginación, estilo de una lista HTML:
Ejemplo
ul.pagination {
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li
{display: inline;}
ul.pagination li a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
} Inténtalo tú mismo " Activa y Hoverable paginación
Resalte la página actual con un .active clase, y utilizar el :hover selector para cambiar el color de cada vínculo al mover el ratón sobre ellos:
Ejemplo
ul.pagination li a.active {
background-color:
#4CAF50;
color: white;
}
ul.pagination li
a:hover:not(.active) {background-color: #ddd;} Inténtalo tú mismo " Redondeados botones activos y Hoverable
Añadir la border-radius propiedad si quieres un botón redondeado "activa" y "libera":
Ejemplo
ul.pagination li a {
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
} Inténtalo tú mismo " Efecto de transición Hoverable
Añadir la transition la propiedad de los enlaces de la página para crear un efecto de transición en vuelo estacionario:
Limita con la paginación
Utilice la border propiedad para añadir bordes de la paginación:
Bordes redondeados
Consejo: Añadir bordes redondeados a su primero y último eslabón de la paginación:
Ejemplo
.pagination li:first-child a {
border-top-left-radius:
5px;
border-bottom-left-radius: 5px;
}
.pagination li:last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Inténtalo tú mismo " El espacio entre los enlaces
Consejo: Añadir el margin propiedad si usted no desea agrupar los enlaces de la página:
Ejemplo
ul.pagination li a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Inténtalo tú mismo " Tamaño de paginación
Cambiar el tamaño de la paginación con el font-size propiedad:
La paginación centrada
Para centrar la paginación, envolver un elemento contenedor alrededor de ella (como <div> ), y añadir text-align:center
Más ejemplos
Ejemplo
Inténtalo tú mismo "Migas de pan
Otra variación de la paginación es el denominado "migas de pan":
Ejemplo
ul.breadcrumb {
padding: 8px 16px;
list-style: none;
background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
padding: 8px;
color: black;
content: "/\00a0";
}
Inténtalo tú mismo "