CSS sidegennemsyns eksempel

Lær hvordan du bruger CSS til at oprette responsiv sidegennemsyn.

Enkel sidegennemsyn

Hvis der er mange sider på websiden, kan du måske ønske at tilføje en form for sidegennemsynsfunktion på hver side:

Eksempel

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

Prøv det selv

Aktive hover-sider

Brug .active Klassen fremhæver den aktuelle side og bruges, når musen hovers over dem: :hover Vælgeren ændrer farven på hver sidekobling:

Eksempel

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

Prøv det selv

Aktive og hover-runde sider

Hvis du har brug for runde "active" og "hover" knapper, tilføj border-radius Egenskab:

Eksempel

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

Prøv det selv

hover-effekt

Placer transition Egenskab tilføjer overgangseffekt til sidekoblinger, når musen hover over dem:

Eksempel

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

Prøv det selv

Kantede sider

Brug border Egenskab tilføjer kant til sidestyringen:

Eksempel

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

Prøv det selv

Rundkantbokse

Ved visning:Tilføj rundkantbokse på de første og sidste links i sidestyringen:

Eksempel

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

Prøv det selv

Mellemrum mellem links

Ved visning:Hvis du ikke vil kombinere sidekoblinger, tilføj margin Egenskab:

Eksempel

.pagination a {
  margin: 0 4px; /* Øverste og nederste margin er 0, kan justeres frit */
}

Prøv det selv

sidestørrelse

Brug font-size Egenskab ændrer størrelsen på siderne:

Eksempel

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

Prøv det selv

Centrerede sider

For at centere sider, brug venligst text-align:center Omslægtselementer (som <div>) omgiver det:

Eksempel

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

Prøv det selv

Flere eksempler

Eksempel

Prøv det selv

Brødrister

En anden form for sideomdeling er det såkaldte "brødrister breadcrumbs":

Eksempel

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

Prøv det selv