Como criar uma paginação responsiva usando CSS?

Um site geralmente consiste em um grande número de páginas que contêm vários conteúdos. Em uma situação, onde seu site tem inúmeras páginas, adicionando uma paginação que é responsiva se torna uma necessidade. O significado de uma paginação pode ser enfatizado pelo fato de facilitar a navegação para um usuário. Ele permite que um usuário visualize uma página da web de sua própria escolha e permita que eles saibam em qual página estão. Os assuntos em discussão neste artigo estão listados abaixo.

1. Como criar uma paginação responsiva

2. Como estilizar uma paginação

Como criar uma paginação responsiva

Vamos primeiro criar uma paginação simples. Com o objetivo de fazer isso, precisamos criar um contêiner Div e aninhar várias tags de âncora que representam páginas diferentes de um site usando dígitos numéricos. Aqui está o código HTML relevante.

Html

"
1
2
3
4
5
6
"

A primeira e a última etiqueta de ancoragem usam os códigos hexadecimais para adicionar uma ponta à esquerda e uma aspas de ângulo duplo apontando para a direita.

Agora vamos estilizar as tags de âncora usando CSS básico.

CSS

.paginação a
cor preta;
flutuar: esquerda;
preenchimento: 10px 15px;
Decoração de texto: Nenhum;

Aqui atribuímos algum preenchimento às etiquetas de ancoragem e alguma cor ao texto dentro deles, além disso, flutuamos toda a paginação à esquerda e para remover o sublinhado das tags de ancoragem, definimos a decoração de texto para nenhum.

Saída

Uma paginação simples foi criada com sucesso.

Agora que sabemos como fazer uma paginação básica, vamos aprender como podemos tornar sua responsiva e interativa usando várias técnicas.

Como tornar uma paginação ativa e pairável

As paginações precisam estar em um estado ativo e pairável para que o usuário saiba em qual página ele/ela está.

Html

"
1
2
3
4
5
6
"

No código acima, estamos atribuindo a quarta etiqueta de âncora o estado ativo.

CSS

.paginação a
cor preta;
flutuar: esquerda;
preenchimento: 10px 15px;
Decoração de texto: Nenhum;

.paginação a.ativo
Background-Color: Rosybrown;
cor branca;

.Paginação A: Passante: não (não (.ativo)
Background-Color: LightGray;

O código acima especifica que, quando uma página estiver em um estado ativo, a tag de âncora correspondente terá uma cor de fundo marrom rosada e a cor do texto será branca. Enquanto isso, quando um usuário paira sobre as etiquetas de ancoragem que não estão ativas, a cor do fundo muda para cinza claro.

Saída

Uma paginação ativa e pairável foi gerada.

Como estilizar uma paginação

Agora que aprendemos a criar uma paginação responsiva, vamos mergulhar em várias maneiras pelas quais podemos estilizar a paginação.

Como adicionar fronteiras a uma paginação

Para criar fronteiras em torno de cada uma das tags de ancoragem em uma paginação, a propriedade da fronteira CSS é usada.

CSS

.paginação a
cor preta;
flutuar: esquerda;
preenchimento: 10px 15px;
Decoração de texto: Nenhum;
borda: 1px cinza sólido;

.paginação a.ativo
Background-Color: Rosybrown;
cor branca;

.Paginação A: Passante: não (não (.ativo)
Background-Color: LightGray;

No código acima, estamos especificando que cada etiqueta âncora da paginação terá uma borda de 1px com cor cinza sólida.

Saída

Fronteiras foram adicionadas com sucesso à paginação.

Como alterar o tamanho de uma paginação

Simplesmente alterando o tamanho da fonte do texto dentro de cada uma das tags de ancoragem, você pode alterar o tamanho de uma paginação responsiva.

CSS

.paginação a
cor preta;
flutuar: esquerda;
preenchimento: 10px 15px;
Decoração de texto: Nenhum;
tamanho da fonte: 30px;
borda: 1px cinza sólido;

.paginação a.ativo
Background-Color: Rosybrown;
cor branca;

.Paginação A: Passante: não (não (.ativo)
Background-Color: LightGray;

Aqui definimos o tamanho da fonte para 30px.

Saída

O tamanho da paginação foi aprimorado.

Como centralizar uma paginação

Muitas vezes acontece que a estrutura da página da web exige que os desenvolvedores da web coloquem a paginação no centro da página. Siga o exemplo abaixo.

Html

"
1
2
3
4
5
6
"

Para centrar toda a paginação, criamos outro contêiner de div e aninhamos a outra div dentro dele.

CSS

.Centro
Alinhamento de texto: centro;

.div
Exibição: bloco embutido;

.div a
cor preta;
flutuar: esquerda;
preenchimento: 10px 15px;
Decoração de texto: Nenhum;
borda: 1px cinza sólido;

.div a.ativo
Background-Color: Rosybrown;
cor branca;

.Div A: Passe o mouse: não (.ativo)
Background-Color: LightGray;

Agora, usando a classe atribuída à primeira div, estamos alinhando o texto para centrar. Enquanto isso, estamos definindo a exibição da segunda div para o bloco embutido para centralizar toda a paginação.

Saída

A paginação foi centrada.

Como adicionar um efeito de transição a uma paginação

Basta atribuir alguma duração de transição às tags de ancoragem para adicionar um efeito de transição toda vez que um usuário paira sobre as tags de ancoragem.

CSS

.div a
cor preta;
flutuar: esquerda;
preenchimento: 10px 15px;
Decoração de texto: Nenhum;
borda: 1px cinza sólido;
Duração da transição: 0.5s;

.div a.ativo
Background-Color: Rosybrown;
cor branca;

.Div A: Passe o mouse: não (.ativo)
Background-Color: LightGray;

A duração da transição foi definida como 0.5 segundos.

Saída

Um efeito de transição foi adicionado à paginação.

Conclusão

Uma paginação responsiva é parte integrante de um site que consiste em um número numeroso de páginas. Isso facilita a navegação para os usuários e deixe -os. Uma paginação básica pode ser criada usando elementos HTML como DIV e tags de ancoragem. Além disso, você pode responder, adicionando um estado ativo e um efeito mirado a ele. Além disso, você pode estilizar uma paginação de várias maneiras, como você pode alterar seu tamanho, criar bordas, adicionar um efeito de transição, etc. usando várias propriedades CSS. Nesta redação, você demonstrou como criar e estilizar uma paginação responsiva.