CSS sidbrytningsexempel

Lär dig hur du använder CSS för att skapa responsiva sidbrytningar.

Enkel sidbrytning

Om det finns många sidor på webbplatsen, kanske du vill lägga till någon form av sidbrytning på varje sida:

Exempel

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

Prova själv

Aktiva och hover-sidbrytningar

Använd .active Klass för att markera den aktuella sidan och använda den när musen är över dem :hover Väljare ändrar färgen på varje sidlänk:

Exempel

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

Prova själv

Aktiva och hover-runda sidbrytningar

Om du behöver runda hörn för "active" och "hover"-knappar, lägg till border-radius Egenskap:

Exempel

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

Prova själv

hover-effekt

Ange transition Egenskapen lägger till övergångseffekt till sidlänkarna, skapar en övergångseffekt vid musöver:

Exempel

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

Prova själv

Kantade sidbrytningar

Använd border Egenskapen lägger till kant till sidbrytningen:

Exempel

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

Prova själv

Runda kantram

Tips:Lägg till rund kantram runt de första och sista länkarna i sidbrytningen:

Exempel

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

Prova själv

Mellan länkar

Tips:Om du inte vill kombinera sidlänkar, lägg till margin Egenskap:

Exempel

.pagination a {
  margin: 0 4px; /* Övre och nedre marginaler är 0, kan justeras fritt */
}

Prova själv

sidbrytningens storlek

Använd font-size Egenskaper ändrar sidbrytningens storlek:

Exempel

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

Prova själv

Centrerad sidbrytning

För att centrera sidbrytning, använd text-align:center Omger av kontainerelement (t.ex. <div>):

Exempel

.center {
  text-align: center;
}

Prova själv

Mer exempel

Exempel

Prova själv

Kakelbröd

En annan form av sidbrytning är så kallad "kakelbröd":

Exempel

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

Prova själv