Exemple de pagination CSS

Apprendre à utiliser CSS pour créer une pagination responsive.

Pagination simple

Si le site web comporte de nombreuses pages, vous pourriez vouloir ajouter une fonction de pagination sur chaque page :

Exemple

.pagination {
  display: inline-block;
}
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}

Essayer par vous-même

Pagination active et survolable

En utilisant .active La classe active met en évidence la page actuelle et est utilisée lorsque la souris est au-dessus d'elles : :hover Le sélecteur change la couleur de chaque lien de page :

Exemple

.pagination a.active {
  background-color: #4CAF50;
  color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}

Essayer par vous-même

Pagination active et survolable avec coins arrondis

Si vous avez besoin de boutons "active" et "hover" avec des coins arrondis, ajoutez border-radius La propriété :

Exemple

.pagination a {
  border-radius: 5px;
}
.pagination a.active {
  border-radius: 5px;
}

Essayer par vous-même

un effet de transition survolable

Veuillez utiliser transition Ajoutez la propriété pour créer un effet de transition lors du survol de la souris sur les liens de page :

Exemple

.pagination a {
  transition: background-color .3s;
}

Essayer par vous-même

Pagination avec bordure

Utilisez border Ajoutez un bord à la pagination en utilisant la propriété :

Exemple

.pagination a {
  border: 1px solid #ddd; /* Gris */
}

Essayer par vous-même

Bords arrondis

Avis :Ajoutez des bords arrondis aux premiers et derniers liens de pagination :

Exemple

.pagination a:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.pagination a:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

Essayer par vous-même

L'espace entre les liens

Avis :Si vous ne souhaitez pas regrouper les liens de page, ajoutez margin La propriété :

Exemple

.pagination a {
  margin: 0 4px; /* Les marges supérieure et inférieure sont de 0, modifiables */
}

Essayer par vous-même

la taille de la pagination

Utilisez font-size Modifier la taille de la pagination en utilisant les propriétés :

Exemple

.pagination a {
  font-size: 22px;
}

Essayer par vous-même

Pagination centrée

Pour centrer la pagination, utilisez celle qui a été text-align:center L'élément conteneur (comme <div>) l'entoure :

Exemple

.center {}}
  text-align: center;
}

Essayer par vous-même

Plus d'exemples

Exemple

Essayer par vous-même

Miettes

Une autre forme de pagination est ce que l'on appelle les "crumbs" (miettes) :

Exemple

ul.breadcrumb {
  padding: 8px 16px;
  list-style: none;
  background-color: #eee;
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li+li:before {
  padding: 8px;
  color: black;
  content: "\00a0";
}

Essayer par vous-même