Esempi di impaginazione CSS
Scopri come creare un'impaginazione reattiva utilizzando CSS.
Impaginazione semplice
Se hai un sito Web con molte pagine, potresti voler aggiungere una sorta di impaginazione a ciascuna pagina:
Esempio
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Impaginazione attiva e hoverable
Evidenzia la pagina corrente con una .active
classe e usa il :hover
selettore per cambiare il colore di ciascun collegamento di pagina quando ci muovi sopra il mouse:
Esempio
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Pulsanti attivi e hoverable arrotondati
Aggiungi la border-radiusproprietà se desideri un pulsante "attivo" e "al passaggio del mouse" arrotondato:
Esempio
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Effetto di transizione fluttuante
Aggiungi la transitionproprietà ai link della pagina per creare un effetto di transizione al passaggio del mouse:
Esempio
.pagination a {
transition: background-color .3s;
}
Impaginazione bordata
Utilizzare la borderproprietà per aggiungere bordi all'impaginazione:
Esempio
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Bordi arrotondati
Suggerimento: aggiungi bordi arrotondati al primo e all'ultimo collegamento nell'impaginazione:
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;
}
Spazio tra i collegamenti
Suggerimento: aggiungi la marginproprietà se non vuoi raggruppare i link della pagina:
Esempio
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Dimensione dell'impaginazione
Modifica la dimensione dell'impaginazione con la font-sizeproprietà:
Esempio
.pagination a {
font-size: 22px;
}
Impaginazione centrata
Per centrare l'impaginazione, avvolgi un elemento contenitore (come <div>) attorno ad esso con text-align:center
Esempio
.center {
text-align: center;
}
Altri esempi
Esempio
Briciole di pane
Un'altra variante dell'impaginazione è la cosiddetta "breadcrumbs":
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";
}