Exemples de pagination CSS
Apprenez à créer une pagination réactive à l’aide de CSS.
Mise en page simple
Si vous avez un site Web avec beaucoup de pages, vous souhaiterez peut-être ajouter une sorte de pagination à chaque page :
Exemple
.pagination {
affichage : bloc en ligne ;
}
.pagination un {
la couleur noire;
flotteur : gauche ;
rembourrage : 8px 16px ;
décoration de texte : aucune ;
}
Essayez-le vous-même »
Pagination active et survolable
Mettez en surbrillance la page actuelle avec un .active
classe et utilisez la :hover
sélecteur pour changer la couleur de chaque lien de page lorsque vous passez la souris dessus :
Exemple
.pagination a.active {
couleur de fond : #4CAF50 ;
Couleur blanche;
}
.pagination a:hover:not(.active) {background-color : #ddd;}
Essayez-le vous-même »
Boutons actifs et flottants arrondis
Ajouter le border-radius propriété si vous voulez un bouton « actif » et « survol » arrondi :
Exemple
.pagination un {
rayon de bordure : 5 px ;
}
.pagination a.active {
rayon de bordure : 5 px ;
}
Essayez-le vous-même »
Effet de transition planable
Ajouter le transition propriété aux liens de page pour créer un effet de transition au survol :
Pagination bordée
Utilisez le border propriété pour ajouter des bordures à la pagination :
Bordures arrondies
Conseil: Ajoutez des bordures arrondies à votre premier et dernier lien dans la pagination :
Exemple
.pagination a:first-child {
border-top-left-radius : 5 px ;
bordure-bas-gauche-rayon : 5 px ;
}
.pagination a:dernier-enfant {
border-top-right-radius : 5 px ;
border-bottom-right-radius : 5 px ;
}
Essayez-le vous-même »
Espace entre les liens
Conseil: Ajouter le margin propriété si vous ne souhaitez pas regrouper les liens de pages :
Exemple
.pagination un {
marge : 0 4px ; /* 0 est pour le haut et le bas. N’hésitez pas à le changer */
}
Essayez-le vous-même »
Taille de mise en page
Changez la taille de la pagination avec le font-size propriété:
Pagination centrée
Pour centrer la pagination, enroulez un élément conteneur (comme
text-align:center
Plus d’exemples
Chapelure
Une autre variante de pagination est ce qu’on appelle le « fil d’Ariane »:
Exemple
ul.breadcrumb {
rembourrage : 8px 16px ;
style de liste : aucun ;
couleur de fond : #eee ;
}
ul.breadcrumb li {affichage : en ligne ;}
ul.breadcrumb li+li:avant {
rembourrage : 8px ;
la couleur noire;
contenu : « / 0a0 » ;
}
Essayez-le vous-même »
#Exemples #pagination #CSS