Voorbeelden van CSS -paginering
Leer hoe u een responsieve paginering maakt met behulp van CSS.
Eenvoudige paginering
Als je een website hebt met veel pagina's, wil je misschien een soort paginering aan elke pagina toevoegen:
Voorbeeld
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Actieve en zweefbare paginering
Markeer de huidige pagina met een .active
klasse en gebruik de :hover
selector om de kleur van elke paginalink te wijzigen wanneer u de muis erover beweegt:
Voorbeeld
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Afgeronde actieve en zwevende knoppen
Voeg de border-radiuseigenschap toe als u een afgeronde "actieve" en "zwevende" knop wilt:
Voorbeeld
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Zwevend overgangseffect
Voeg de transitioneigenschap toe aan de paginalinks om een overgangseffect te creëren bij zweven:
Voorbeeld
.pagination a {
transition: background-color .3s;
}
Begrensde paginering
Gebruik de bordereigenschap om randen aan de paginering toe te voegen:
Voorbeeld
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Afgeronde randen
Tip: Voeg afgeronde randen toe aan je eerste en laatste link in de paginering:
Voorbeeld
.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;
}
Ruimte tussen links
Tip: voeg de margineigenschap toe als u de paginalinks niet wilt groeperen:
Voorbeeld
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Paginering Grootte
Wijzig de grootte van de paginering met de font-sizeeigenschap:
Voorbeeld
.pagination a {
font-size: 22px;
}
Gecentreerde paginering
Om de paginering te centreren, wikkel je er een containerelement (zoals <div>) omheen mettext-align:center
Voorbeeld
.center {
text-align: center;
}
Meer voorbeelden
Voorbeeld
Paneermeel
Een andere variant van paginering is de zogenaamde "broodkruimels":
Voorbeeld
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";
}