CSS -paginering voorbeelde
Leer hoe om 'n responsiewe paginering met CSS te skep.
Eenvoudige paginering
As jy 'n webwerf met baie bladsye het, wil jy dalk 'n soort paginering by elke bladsy voeg:
Voorbeeld
.pagination {
display: inline-block;
}
.pagination a {
color:
black;
float: left;
padding: 8px
16px;
text-decoration: none;
}
Aktiewe en beweegbare paginering
Merk die huidige bladsy met 'n .active
klas, en gebruik die :hover
kieser om die kleur van elke bladsyskakel te verander wanneer die muis daaroor beweeg:
Voorbeeld
.pagination a.active {
background-color:
#4CAF50;
color: white;
}
.pagination a:hover:not(.active) {background-color: #ddd;}
Afgeronde aktiewe en beweegbare knoppies
Voeg die border-radiuseiendom by as jy 'n afgeronde "aktiewe" en "sweef"-knoppie wil hê:
Voorbeeld
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Beweegbare oorgangseffek
Voeg die transitioneiendom by die bladsyskakels om 'n oorgangseffek te skep wanneer jy beweeg:
Voorbeeld
.pagination a {
transition: background-color .3s;
}
Begrensde paginering
Gebruik die bordereiendom om grense by die paginering te voeg:
Voorbeeld
.pagination a {
border: 1px solid #ddd; /* Gray
*/
}
Afgeronde grense
Wenk: Voeg afgeronde grense by jou eerste en laaste skakel in die 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;
}
Spasie tussen skakels
Wenk: Voeg die margineiendom by as jy nie die bladsyskakels wil groepeer nie:
Voorbeeld
.pagination a {
margin: 0 4px; /* 0 is for top
and bottom. Feel free to change it */
}
Paginering Grootte
Verander die grootte van die paginering met die font-sizeeiendom:
Voorbeeld
.pagination a {
font-size: 22px;
}
Gesentreerde paginering
Om die paginering te sentreer, draai 'n houerelement (soos <div>) daarmee omtext-align:center
Voorbeeld
.center {
text-align: center;
}
Meer voorbeelde
Voorbeeld
Broodkrummels
Nog 'n variasie van paginering is sogenaamde "broodkrummels":
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";
}