Come creare una impaginazione reattiva usando CSS?

Un sito Web è spesso costituito da un gran numero di pagine che contengono vari contenuti. In una situazione, in cui il tuo sito Web ha numerose pagine, aggiungendo una paginazione che è reattiva diventa una necessità. Il significato di una paginazione può essere enfatizzato dal fatto che semplifica la navigazione per un utente. Consente a un utente di visualizzare una pagina web di propria scelta e consente loro di sapere su quale pagina si trovano. I soggetti in discussione in questo articolo sono elencati di seguito.

1. Come creare una impaginazione reattiva

2. Come modellare una impaginazione

Come creare una impaginazione reattiva

Creiamo prima una semplice impaginazione. Ai fini di farlo, dobbiamo creare un contenitore div e nidificare vari tag di ancoraggio che rappresentano diverse pagine di un sito Web utilizzando cifre numeriche. Ecco il codice HTML pertinente.

Html

"
1
2
3
4
5
6
"

Il primo e l'ultimo tag di ancora.

Ora facciamo modellare i tag di ancoraggio usando CSS di base.

CSS

.impaginazione a
colore nero;
Float: a sinistra;
imbottitura: 10px 15px;
DECORAZIONE DEL TESTO: Nessuno;

Qui abbiamo assegnato un po 'di imbottitura ai tag di ancoraggio e un po' di colore al testo al loro interno, inoltre, abbiamo fluttuato l'intera paginazione a sinistra e per rimuovere la sottolinea dai tag di ancora.

Produzione

Una semplice impaginazione è stata creata con successo.

Ora che sappiamo come fare una paginazione di base, scopriamo come possiamo rendere il suo reattivo e interattivo usando varie tecniche.

Come rendere attiva una paginazione

Le paginazioni devono essere in uno stato attivo e hovebili in modo che l'utente sappia su quale pagina si trova.

Html

"
1
2
3
4
5
6
"

Nel codice sopra, stiamo assegnando il quarto tag di ancoraggio lo stato attivo.

CSS

.impaginazione a
colore nero;
Float: a sinistra;
imbottitura: 10px 15px;
DECORAZIONE DEL TESTO: Nessuno;

.Paginazione a.attivo
Background-color: Rosybrown;
colore bianco;

.Paginazione A: Hover: NOT (.attivo)
Background-color: LightGray;

Il codice sopra specifica che quando una pagina è in uno stato attivo, il tag di ancoraggio corrispondente avrà un colore di sfondo marrone roseo e il colore del testo sarà bianco. Nel frattempo, quando un utente si libra sui tag di ancoraggio che non sono attivi, il colore di sfondo cambierà in grigio chiaro.

Produzione

È stata generata una paginazione attiva e hovebile.

Come modellare una impaginazione

Ora che abbiamo imparato a creare una paginazione reattiva, tuffiamo in vari modi in cui possiamo modellare la paginazione.

Come aggiungere bordi a una paginazione

Al fine di creare bordi attorno a ciascuno dei tag di ancoraggio in una paginazione, viene utilizzata la proprietà del bordo CSS.

CSS

.impaginazione a
colore nero;
Float: a sinistra;
imbottitura: 10px 15px;
DECORAZIONE DEL TESTO: Nessuno;
bordo: 1px grigio solido;

.Paginazione a.attivo
Background-color: Rosybrown;
colore bianco;

.Paginazione A: Hover: NOT (.attivo)
Background-color: LightGray;

Nel codice sopra, stiamo specificando che ogni tag di ancoraggio della paginazione avrà un bordo di 1px con colore grigio solido.

Produzione

I bordi sono stati aggiunti con successo alla paginazione.

Come modificare le dimensioni di una paginazione

Semplicemente modificando la dimensione del carattere del testo all'interno di ciascuno dei tag di ancoraggio, è possibile modificare la dimensione di una paginazione reattiva.

CSS

.impaginazione a
colore nero;
Float: a sinistra;
imbottitura: 10px 15px;
DECORAZIONE DEL TESTO: Nessuno;
Font-size: 30px;
bordo: 1px grigio solido;

.Paginazione a.attivo
Background-color: Rosybrown;
colore bianco;

.Paginazione A: Hover: NOT (.attivo)
Background-color: LightGray;

Qui abbiamo impostato la dimensione del carattere su 30px.

Produzione

La dimensione della paginazione è stata migliorata.

Come centrare una impaginazione

Succede spesso che la struttura della pagina web richieda agli sviluppatori Web di posizionare la paginazione al centro della pagina. Segui l'esempio di seguito.

Html

"
1
2
3
4
5
6
"

Per centrare l'intera impaginazione, abbiamo creato un altro contenitore di div e nidificato l'altro div al suo interno.

CSS

.centro
Testo-align: centro;

.div
display: blocco inline;

.div a
colore nero;
Float: a sinistra;
imbottitura: 10px 15px;
DECORAZIONE DEL TESTO: Nessuno;
bordo: 1px grigio solido;

.div a.attivo
Background-color: Rosybrown;
colore bianco;

.Div A: Hover: Not (.attivo)
Background-color: LightGray;

Ora usando la classe assegnata al primo div, stiamo allineando il testo al centro. Nel frattempo, stiamo impostando il display del secondo Div per bloccare in linea per centrare l'intera impaginazione.

Produzione

La paginazione è stata centrata.

Come aggiungere un effetto di transizione a una paginazione

Basta assegnare un po 'di durata di transizione ai tag di ancoraggio per aggiungere un effetto di transizione ogni volta che un utente si libra sui tag di ancoraggio.

CSS

.div a
colore nero;
Float: a sinistra;
imbottitura: 10px 15px;
DECORAZIONE DEL TESTO: Nessuno;
bordo: 1px grigio solido;
Durata di transizione: 0.5s;

.div a.attivo
Background-color: Rosybrown;
colore bianco;

.Div A: Hover: Not (.attivo)
Background-color: LightGray;

La durata della transizione è stata impostata su 0.5 secondi.

Produzione

Un effetto di transizione è stato aggiunto alla paginazione.

Conclusione

Una paginazione reattiva è parte integrante di un sito Web che consiste in un numero numeroso di pagine. Semplifica la navigazione per gli utenti e lascia loro su quale pagina si trovano. Una paginazione di base può essere creata utilizzando elementi HTML come Div e tag di ancoraggio. Inoltre, puoi renderlo reattivo aggiungendo uno stato attivo e un effetto hover ad esso. Inoltre, puoi modellare una paginazione in molti modi come puoi modificare le sue dimensioni, creare bordi, aggiungere un effetto di transizione, ecc. Utilizzo di varie proprietà CSS. In questo articolo, ti è stato mostrato come creare e modellare una paginazione reattiva.