Cómo crear una paginación receptiva usando CSS?

Un sitio web a menudo consiste en una gran cantidad de páginas que contienen varios contenidos. En una situación, donde su sitio web tiene numerosas páginas, agregar una paginación que responde se convierte en una necesidad. La importancia de una paginación puede enfatizarse por el hecho de que facilita la navegación para un usuario. Permite a un usuario ver una página web de su propia elección y les permite saber en qué página se encuentra. Los sujetos en discusión en este artículo se enumeran a continuación.

1. Cómo crear una paginación receptiva

2. Cómo diseñar una paginación

Cómo crear una paginación receptiva

Primero creemos una simple paginación. A los fines de hacerlo, necesitamos crear un contenedor Div y anidar varias etiquetas de anclaje que representan diferentes páginas de un sitio web utilizando dígitos numéricos. Aquí está el código HTML relevante.

Html

"
1
2
3
4
5
6
"

La primera y la última etiqueta de anclaje usan los códigos hexadecimales para agregar una cita de ángulo doble que apuntan a la izquierda y una punta derecha.

Ahora diseñemos las etiquetas de anclaje usando CSS básico.

CSS

.Pagination A
de color negro;
flotador izquierdo;
relleno: 10px 15px;
Decoración de texto: ninguna;

Aquí hemos asignado algo de relleno a las etiquetas de anclaje y algo de color al texto dentro de ellas, además, hemos flotado toda la paginación a la izquierda y para eliminar el subrayado de las etiquetas de anclaje, hemos establecido la decoración del texto en ninguno.

Producción

Se creó una simple paginación con éxito.

Ahora que sabemos cómo hacer una paginación básica, aprendamos cómo podemos hacer que su sensación e interactiva use varias técnicas.

Cómo hacer una paginación activa y rugable

Las paginaciones deben estar en un estado activo, así como a flota para que el usuario sepa en en qué página está en él/ella.

Html

"
1
2
3
4
5
6
"

En el código anterior, estamos asignando la cuarta etiqueta de anclaje el estado activo.

CSS

.Pagination A
de color negro;
flotador izquierdo;
relleno: 10px 15px;
Decoración de texto: ninguna;

.paginación a.activo
Color de fondo: Rosybrown;
color blanco;

.Pagination A: Chover: no (.activo)
Color de fondo: LightGray;

El código anterior especifica que cuando una página está en un estado activo, la etiqueta de anclaje correspondiente tendrá un color de fondo marrón rosado y el color de texto será blanco. Mientras tanto, cuando un usuario se cierne sobre las etiquetas de anclaje que no están activas, el color de fondo cambiará a gris claro.

Producción

Se generó una paginación activa y rugible.

Cómo diseñar una paginación

Ahora que hemos aprendido a crear una paginación receptiva, sumergirnos en varias formas en que podemos diseñar la paginación.

Cómo agregar bordes a una paginación

Para crear bordes alrededor de cada una de las etiquetas de anclaje en una paginación, se utiliza la propiedad fronteriza CSS.

CSS

.Pagination A
de color negro;
flotador izquierdo;
relleno: 10px 15px;
Decoración de texto: ninguna;
borde: 1px gris sólido;

.paginación a.activo
Color de fondo: Rosybrown;
color blanco;

.Pagination A: Chover: no (.activo)
Color de fondo: LightGray;

En el código anterior, estamos especificando que cada etiqueta de anclaje de la paginación tendrá un borde de 1px con color gris sólido.

Producción

Se han agregado con éxito las fronteras a la paginación.

Cómo alterar el tamaño de una paginación

Simplemente cambiando el tamaño de fuente del texto dentro de cada una de las etiquetas de anclaje, puede alterar el tamaño de una paginación receptiva.

CSS

.Pagination A
de color negro;
flotador izquierdo;
relleno: 10px 15px;
Decoración de texto: ninguna;
tamaño de fuente: 30px;
borde: 1px gris sólido;

.paginación a.activo
Color de fondo: Rosybrown;
color blanco;

.Pagination A: Chover: no (.activo)
Color de fondo: LightGray;

Aquí hemos establecido el tamaño de fuente en 30px.

Producción

El tamaño de la paginación se ha mejorado.

Cómo centrar una paginación

A menudo sucede que la estructura de la página web requiere que los desarrolladores web colocen la paginación en el centro de la página. Sigue el ejemplo a continuación.

Html

"
1
2
3
4
5
6
"

Para centrar toda la paginación, hemos creado otro contenedor Div y anidado el otro Div dentro de él.

CSS

.centro
Text-Align: Center;

.div
Pantalla: bloque en línea;

.div a
de color negro;
flotador izquierdo;
relleno: 10px 15px;
Decoración de texto: ninguna;
borde: 1px gris sólido;

.div a.activo
Color de fondo: Rosybrown;
color blanco;

.Div A: Hover: no (.activo)
Color de fondo: LightGray;

Ahora usando la clase asignada a la primera div, estamos alineando el texto al centro. Mientras tanto, estamos configurando la visualización del segundo div a bloqueo en línea para centrar toda la paginación.

Producción

La paginación se ha centrado.

Cómo agregar un efecto de transición a una paginación

Simplemente asigne una duración de transición a las etiquetas de anclaje para agregar un efecto de transición cada vez que un usuario se cierne sobre las etiquetas de anclaje.

CSS

.div a
de color negro;
flotador izquierdo;
relleno: 10px 15px;
Decoración de texto: ninguna;
borde: 1px gris sólido;
Duración de transición: 0.5s;

.div a.activo
Color de fondo: Rosybrown;
color blanco;

.Div A: Hover: no (.activo)
Color de fondo: LightGray;

La duración de la transición se ha establecido en 0.5 segundos.

Producción

Se ha agregado un efecto de transición a la paginación.

Conclusión

Una paginación receptiva es una parte integral de un sitio web que consiste en un numeroso número de páginas. Hace que la navegación sea fácil para los usuarios y déjalos en qué página se encuentran. Se puede crear una paginación básica utilizando elementos HTML como DIV y etiquetas de anclaje. Además, puede hacer que responda agregando un estado activo y un efecto flotante. Además, puede diseñar una paginación de muchas maneras, como puede alterar su tamaño, crear bordes, agregar un efecto de transición, etc. utilizando varias propiedades de CSS. En este artículo, se le ha demostrado cómo crear y diseñar una paginación receptiva.