Beispiele für CSS Tab
In diesem Kapitel werden wir vorstellen, wie eine Instanz von Blättern durch die Verwendung von CSS zu erstellen.
Einfache Tabs
Wenn Ihre Website viele Seiten hat, müssen Sie die Registerkarte verwenden, um die Navigation für jede Seite zu machen.
Das folgende Beispiel zeigt, wie HTML und CSS zu verwenden Seite:
CSS Beispiele
display: inline-block;
padding: 0;
margin: 0;
}
ul.pagination li {display: inline;}
ul.pagination li a {
Farbe: schwarz;
float: left;
padding: 8px 16px;
text-decoration: none;
}
Versuchen »
Klicken Sie auf die Registerkarte und Hover-Stil
Wenn Sie auf dieser Seite klicken, können Sie verwenden .active die aktuelle Seite Stil einzustellen, können Sie die Maus über verwenden :hover Selektoren den Stil zu ändern:
CSS Beispiele
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: nicht ( .active) {background-color: #DDD;}
Versuchen »
CSS Beispiele
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: nicht (.active) {background-color: #DDD;}
Versuchen »
Abgerundete Stil
Sie können die Verwendung border-radius Eigenschaft für die ausgewählte Seite zu abgerundeten Ecken und Stil hinzu:
CSS Beispiele
border-radius: 5px;
}
ul.pagination li a.active {
border-radius: 5px;
}
Versuchen »
Effekte Hover Übergang
Wir können die Add transition Eigenschaft der Maus auf die Seite zu bewegen , wenn Sie Übergangseffekte hinzufügen:
Mit Grenze Registerkarte
Wir können das verwenden border Attribut eine Seite mit einer Grenze zu addieren:
Abgerundete Ecken
Tipp: In der ersten und letzten Seite mit Links Paginierung Link hinzufügen Filets:
CSS Beispiele
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.pagination li: last-child a {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
Versuchen »
Paging-Intervall
Tipp: Sie können die Verwendung margin Eigenschaft einen Raum direkt zu jeder Seite hinzufügen:
CSS Beispiele
Marge :. 0 4px; / * 0 ist für oben und unten, es zu ändern Fühlen Sie sich frei * /
}
Versuchen »
Paging-Schriftgröße
Wir können die verwenden font-size - Eigenschaft auf Seite Schriftgröße:
Center-Registerkarte
Wenn Sie mit der Tabulatortaste zu zentrieren möchten, können Sie (wie <div>) , umText hinzuzufügen ausrichtenauf dasContainerelement: centerstyle:
Weitere Beispiele
Paniermehl
Eine andere Navigations wie Semmelbrösel, Beispiele sind wie folgt:
CSS Beispiele
padding: 8px 16px;
list-style: none;
background-color: #EEE
}
ul.breadcrumb li {display: inline;}
ul.breadcrumb li + li: before {
padding: 8px;
Farbe: schwarz;
Inhalt: "/ \ 00A0";
}
Versuchen »