Comment créer une pagination réactive à l'aide de CSS?
1. Comment créer une pagination réactive
2. Comment coiffer une pagination
Comment créer une pagination réactive
Créons d'abord une simple pagination. Dans le but de le faire, nous devons créer un conteneur div et nid diverses balises d'ancrage qui représentent différentes pages d'un site Web à l'aide de chiffres numériques. Voici le code HTML pertinent.
Html
"
1
2
3
4
5
6
"
La première et la dernière étiquette d'ancrage utilisent les codes hexadécimaux pour ajouter un quottement à double angle de pointage à gauche et à droite.
Maintenant, stylisez les étiquettes d'ancrage en utilisant CSS de base.
CSS
.pagination ala couleur noire;
flottant: à gauche;
rembourrage: 10px 15px;
Décoration du texte: aucune;
Ici, nous avons attribué un peu de rembourrage aux étiquettes d'ancrage et de la couleur au texte à l'intérieur, en outre, nous avons lancé toute la pagination vers la gauche et pour supprimer le soulignement des balises d'ancrage, nous avons défini la décoration de texte sur aucun.
Sortir
Une pagination simple a été créée avec succès.
Maintenant que nous savons comment faire une pagination de base, découvrons comment nous pouvons rendre son réactif et interactif en utilisant diverses techniques.
Comment rendre une pagination active et planable
Les paginations doivent être dans un état actif et planable afin que l'utilisateur sache sur quelle page il est sur.
Html
"
1
2
3
4
5
6
"
Dans le code ci-dessus, nous attribuons la quatrième étiquette d'ancrage à l'état actif.
CSS
.pagination ala couleur noire;
flottant: à gauche;
rembourrage: 10px 15px;
Décoration du texte: aucune;
.pagination a.actif
Color en arrière-plan: Rosybrown;
Couleur blanche;
.Pagination A: Volant: pas (.actif)
Color en arrière-plan: LightGray;
Le code ci-dessus spécifie que lorsqu'une page est dans un état actif, la balise d'ancrage correspondante aura une couleur d'arrière-plan brun rose et que la couleur du texte sera blanche. En attendant, lorsqu'un utilisateur plane sur les balises d'ancrage qui ne sont pas actives, la couleur d'arrière-plan changera en gris clair.
Sortir
Une pagination active et survol a été générée.
Comment coiffer une pagination
Maintenant que nous avons appris à créer une pagination réactive, plongeons-nous dans diverses façons dont nous pouvons coiffer la pagination.
Comment ajouter des frontières à une pagination
Afin de créer des frontières autour de chacune des étiquettes d'ancrage dans une pagination, la propriété de la frontière CSS est utilisée.
CSS
.pagination ala couleur noire;
flottant: à gauche;
rembourrage: 10px 15px;
Décoration du texte: aucune;
Border: 1px gris massif;
.pagination a.actif
Color en arrière-plan: Rosybrown;
Couleur blanche;
.Pagination A: Volant: pas (.actif)
Color en arrière-plan: LightGray;
Dans le code ci-dessus, nous spécifions que chaque étiquette d'ancrage de la pagination aura une bordure de 1px avec une couleur gris massif.
Sortir
Les frontières ont été ajoutées avec succès à la pagination.
Comment modifier la taille d'une pagination
En modifiant simplement la taille de la police du texte à l'intérieur de chacune des balises d'ancrage, vous pouvez modifier la taille d'une pagination réactive.
CSS
.pagination ala couleur noire;
flottant: à gauche;
rembourrage: 10px 15px;
Décoration du texte: aucune;
taille de police: 30px;
Border: 1px gris massif;
.pagination a.actif
Color en arrière-plan: Rosybrown;
Couleur blanche;
.Pagination A: Volant: pas (.actif)
Color en arrière-plan: LightGray;
Ici, nous avons réglé la taille de la police à 30px.
Sortir
La taille de la pagination a été améliorée.
Comment centrer une pagination
Il arrive souvent que la structure de la page Web oblige les développeurs Web à placer la pagination au centre de la page. Suivez l'exemple ci-dessous.
Html
"
1
2
3
4
5
6
"
Afin de centrer toute la pagination, nous avons créé un autre conteneur Div et imbriqué l'autre div à l'intérieur.
CSS
.centreTexte-aligne: Centre;
.div
Affichage: bloc en ligne;
.div a
la couleur noire;
flottant: à gauche;
rembourrage: 10px 15px;
Décoration du texte: aucune;
Border: 1px gris massif;
.div a.actif
Color en arrière-plan: Rosybrown;
Couleur blanche;
.Div A: Hover: pas (.actif)
Color en arrière-plan: LightGray;
Maintenant, en utilisant la classe attribuée au premier div, nous alignons le texte au centre. Pendant ce temps, nous définissons l'affichage de la deuxième div au bloc de ligne pour centrer toute la pagination.
Sortir
La pagination a été centrée.
Comment ajouter un effet de transition à une pagination
Attribuez simplement une durée de transition aux balises d'ancrage pour ajouter un effet de transition chaque fois qu'un utilisateur plane sur les balises d'ancrage.
CSS
.div ala couleur noire;
flottant: à gauche;
rembourrage: 10px 15px;
Décoration du texte: aucune;
Border: 1px gris massif;
Durée de transition: 0.5s;
.div a.actif
Color en arrière-plan: Rosybrown;
Couleur blanche;
.Div A: Hover: pas (.actif)
Color en arrière-plan: LightGray;
La durée de transition a été définie à 0.5 secondes.
Sortir
Un effet de transition a été ajouté à la pagination.
Conclusion
Une pagination réactive fait partie intégrante d'un site Web qui se compose d'un nombre de pages. Cela facilite la navigation pour les utilisateurs et leur laisse la page sur laquelle ils sont. Une pagination de base peut être créée à l'aide d'éléments HTML tels que DIV et des balises d'ancrage. De plus, vous pouvez le rendre réactif en ajoutant un état actif et un effet de survol. De plus, vous pouvez styliser une pagination à bien des égards comme vous pouvez modifier sa taille, créer des bordures, ajouter un effet de transition, etc. en utilisant diverses propriétés CSS. Dans cet article, on vous a montré comment créer et styliser une pagination réactive.