Das beste Beispiele für CSS Tab-Tutorial im Jahr 2024. In diesem Tutorial können Sie
Einfache Tabs,Klicken Sie auf die Registerkarte und Hover-Stil,Mit Grenze Registerkarte,Paging-Schriftgröße,Center-Registerkarte,Weitere Beispiele,Paniermehl, lernen
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
ul.pagination {
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
ul.pagination li a.active {
background-color: # 4CAF50;
color: white;
}
ul.pagination li a: hover: nicht ( .active) {background-color: #DDD;}
Versuchen » CSS Beispiele
ul.pagination li a.active {
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
ul.pagination li a {
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:
CSS Beispiele
ul.pagination li a {
Übergang: background-color .3s;
}
Versuchen »
Mit Grenze Registerkarte
Wir können das verwenden border
Attribut eine Seite mit einer Grenze zu addieren:
CSS Beispiele
ul.pagination li a {
border: 1px solid #DDD; / * Grau * /
}
Versuchen » Abgerundete Ecken
Tipp: In der ersten und letzten Seite mit Links Paginierung Link hinzufügen Filets:
CSS Beispiele
.pagination li: first-child a {
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
ul.pagination li a {
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:
CSS Beispiele
ul.pagination li a {
font-size: 22px;
}
Versuchen »
Center-Registerkarte
Wenn Sie mit der Tabulatortaste zu zentrieren möchten, können Sie (wie <div>) , umText hinzuzufügen ausrichtenauf dasContainerelement: centerstyle:
CSS Beispiele
div.center {
text-align: center;
}
Versuchen »
Weitere Beispiele
Paniermehl
Eine andere Navigations wie Semmelbrösel, Beispiele sind wie folgt:
CSS Beispiele
ul.breadcrumb {
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 »