Als je een website hebt met veel pagina's, wil je misschien een soort pagination (inhoud verspreiden over meerdere pagina's) aan elke pagina toevoegen.
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
Je kunt de huidige pagina markeren met een .active
class en door gebruik te maken van de :hover
selector kun je de kleur van elke paginalink wijzigen wanneer je de muis erover beweegt.
.pagination a.active {
background-color: #408bb5;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
Voeg de eigenschap border-radius
toe als je een afgeronde "active
" en "hover
" knop wilt weergeven.
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Door de eigenschap transition
te gebruiken kun je een overgangseffect creëren, deze is dan zichtbaar wanneer je de muis erover beweegt.
Indien je randen wilt weergeven om de pagina nummers (pagination) dan kun je de eigenschap border
gebruiken.
Om de paginering wat mooier eruit te laten zien kun je aan het begin en aan het eind de hoeken van de randen afronden. Probeer het voorbeeld hieronder maar eens uit:
.pagination a:first-child {
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.pagination a:last-child {
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
Je kunt ruimte tussen de links creëren door gebruik te maken van de margin
eigenschap.
Om de grootte van de paginering aan te passen kun je de font-size
eigenschap gebruiken.
Om de paginering te centreren, gebruik je de text-align
eigenschap met de waarde center.
![]() |
Ad blocker gedetecteerd! |
Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt. |