Esempio di paginazione CSS

Impara come creare una paginazione responsive utilizzando CSS.

Paginazione semplice

Se ci sono molte pagine sul sito web, potresti voler aggiungere una funzione di paginazione su ogni pagina:

Esempio

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

Prova tu stesso

Pagina di navigazione hoverabile attiva

Usare .active Classe evidenziare la pagina corrente e utilizzare quando il mouse si posiziona sopra: :hover Selettore cambiare il colore di ogni link di pagina:

Esempio

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

Prova tu stesso

Pagina di navigazione active hoverabile con angoli arrotondati

Se è necessario aggiungere angoli arrotondati agli elementi "active" e "hover", aggiungere border-radius Proprietà:

Esempio

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

Prova tu stesso

Effetto di transizione hoverabile

Spostare transition Proprietà aggiungere transizione al link di pagina, creando un effetto di transizione quando il mouse si posiziona sopra:

Esempio

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

Prova tu stesso

Pagina di navigazione con bordi

Utilizzare border Proprietà aggiungere bordi alla pagina di navigazione:

Esempio

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

Prova tu stesso

Bordi arrotondati

Suggerimento:Aggiungere bordi arrotondati alle prime e ultime pagine di navigazione:

Esempio

.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;
}

Prova tu stesso

Spazio tra i link

Suggerimento:Se non si desidera combinare i link di pagina, aggiungere margin Proprietà:

Esempio

.pagination a {
  margin: 0 4px; /* Margine superiore e inferiore 0, modificabile liberamente */
}

Prova tu stesso

Dimensione della pagina di navigazione

Utilizzare font-size Cambiare la dimensione della pagina delle proprietà:

Esempio

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

Prova tu stesso

Centratazione delle pagine

Per centrare le pagine, utilizzare il valore impostato text-align: center L'elemento contenitore (ad esempio <div>) lo avvolge:

Esempio

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

Prova tu stesso

Più esempi

Esempio

Prova tu stesso

Panini

Un'altra forma di paginazione è detta "Breadcrumb" (panini):

Esempio

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";
}

Prova tu stesso