Bei Verwendung einer Website oder Anwendung müssen Sie möglicherweise verschiedene Seiten, Dokumente und Optionen wechseln. Genauer gesagt, um zu bestimmten Inhalten zu navigieren, “Registerkarten”Kann genutzt werden. In HTML sind Registerkarten der anklickbare Bereich in jeder Anwendung, die beim Navigieren auf der Seite helfen. Wenn eine Registerkarte klickt, wird der zugehörige Inhalt angezeigt und andere Registerkarten werden versteckt.

Diese Studie beschreibt das Verfahren zum Erstellen und Styling -Registerkarten in HTML.

So erstellen Sie Registerkarten in HTML?

Um Registerkarten in HTML zu erstellen.

Schritt 1: Erstellen Sie die einfache HTML -Datei

Erstens fügen wir eine Div -Klasse mit dem Namen "myhtmltabs”:

Wir werden drei Registerkarten erstellen, um das praktische Beispiel zu demonstrieren:

• Im Inneren des oben genannten DIV machen drei Radiokontrollen für “heim","um", Und "Kontakt", bzw. Diese Eingangsradios sind mit Etikettenelementen verbunden. Das Eingabeelement “Ausweis"Attribut sollte das gleiche sein wie das"für”Attribut des Etikettelements.
• Das Optionsfeld der Registerkarte Start ist als "markiert als"überprüft”, Was standardmäßig das Home -Optionsfeld überprüft werden sollte.

HEIM

UM

KONTAKT

Wir haben erfolgreich drei Optionsfelder erstellt, bei denen die Standardtaste für die Standard -Überprüfung die Home -Taste ist:

Schritt 2: Inhalt hinzufügen

Fügen Sie als nächstes Inhalt zu jeder Schaltfläche hinzu. Fügen Sie zu diesem Zweck drei Divs unter jedem Optionsfeld hinzu. In der Div haben wir das hinzugefügt

Tag für die Überschrift und die

Tag für den Absatz, wie im folgenden Codeblock zu sehen ist:

HEIM

Heim

Zuhause ist der Startplatz der Träume und Hoffnungen!

UM

Um

wir sind ein Team! Arbeiten Sie zusammen für eine gemeinsame Vision…

KONTAKT

Kontaktinformationen

Wir kommunizieren mit ihnen, mit Liebe, mit Mut, mit Lächeln!

Die Optionsfelder mit dem zugehörigen Inhalt sind in der folgenden Ausgabe zu sehen:

Schritt 3: Stil Main/Parent Div

Erstellen Sie eine neue CSS -Datei in Ihrem Projekt und fügen Sie ihren Link in die unten angegebene HTML -Datei ein:

Lassen Sie uns der oben genannten HTML -Struktur einen Stil geben. Sie können das CSS -Styling entsprechend Ihrer Präferenz anwenden.

Hier wird das Körperelement so gestaltet, dass die Hintergrundfarbe als „festgelegt wird“RGBA (173, 202, 171, 0.849)”. Darüber hinaus ist die Schriftfamilie als “festgelegt“serifenlos”:

Körper
Hintergrundfarbe: RGBA (173, 202, 171, 0.849);
Schriftfamilie: Sans-Serif;

Als nächstes das ".myhtmltabs”Wird verwendet, um auf die in der HTML -Datei hinzugefügte übergeordnete DIV zuzugreifen:

.myhtmltabs

Anzeige: Flex;
Flex-Wrap: Wrap;
Max-Breite: 600px;
Rand: 50px Auto;
Polsterung: 25px;

Die Beschreibung des oben genannten Code wird hier beschrieben:

• “Anzeige: FlexDie Eigenschaft wird im übergeordneten Element hinzugefügt, so dass die untergeordneten Elemente automatisch in Spalten und Zeilen sowie der Breite und des Höhenmarsches als Auto ausgerichtet sind.
• “Flex-Wrap: WrapDie Eigenschaft definiert, ob die Flexelemente auf eine Zeile oder mehrere Zeilen eingefügt werden.
• “Max-Breite: 600px”Zeigt an, dass die maximale Breite des DIV 600px betragen sollte.
• “Rand: 50px Auto”Gibt den Rand von Top-Bottom als 50px und links rechts als Auto.
• “Polsterung: 25px”Gibt den Raum im Div als 25px.

Wir möchten die Optionsschaltflächen auf der Webseite nicht sichtbar machen. Setzen Sie dazu die Anzeige als "keiner”:

.MyHTMLTABS Eingabe [Typ = "Radio"]

Anzeige: Keine;

Schritt 4: Stiletikett

Weisen Sie den Bildunterschriften oder Registerkarten einige CSS -Eigenschaften zu, wie:

• Einstellen der “Polsterung" als "25px”
• “Schriftgewicht" als "deutlich”
• “Hintergrundfarbe" als "RGB (220, 207, 233)”
• “Mauszeiger" als "ZeigerUm ein Symbol mit einer zeigenden Hand darzustellen, um die Interaktion besser zu machen:

.myhtmltabs label
Polsterung: 25px;
Schriftdicke: fett ;
Hintergrundfarbe: RGB (220, 207, 233);
Cursor: Zeiger;

Schritt 5: Stil H1

Der unten erwähnte Abschnitt zeigt die Schriftgröße des

Tag wird als "festgelegt"2em”:

.myhtmltabs .Tab H1
Schriftgröße: 2EM;

Schritt 6: Stil Kinderdivs

Wenden Sie dann das Styling auf dem “.Tab"Div, das das Kind div der" ist "myhtmltabs”Div. Diese DIV ist für den Inhaltsbereich. Wir werden die Eigenschaften der Breite, Höhe, Polsterung und Hintergrundfarbe festlegen. Setzen Sie danach seine Bestellung als 1 ein, wodurch die Registerkarten oben festgelegt werden. Dann wird die Anzeigeeigenschaft als keine festgelegt:

.myhtmltabs .Tab
Breite: 100%;
Höhe: 200px;
Polsterung: 20px;
Hintergrundfarbe: RGB (228, 216, 171);
Ordnung: 1;
Anzeige: Keine;

Es kann beobachtet werden, dass das Styling erfolgreich angewendet wird; Der Inhalt wird jedoch immer noch nicht angezeigt:

Schritt 7: Registerkarteninhalt anzeigen Inhalt

Das Element neben dem Plus -Zeichen (+) zeigt, dass diese Elemente in derselben Reihenfolge angezeigt werden, wenn das Optionsfeld überprüft wird. Wenn die Eingabe mit dem Typ Radio der Art des Typs .myhtmltabs div wird überprüft und dann die Geschwisterelemente anzeigen “Etikett" Und ".Tab”DIV -Klasse in Block (gesamte) Linie:

.MyHTMLTABS -Eingabe [Typ = 'Radio']: Checked + Etikett + .Tab
Bildschirmsperre;

Schritt 8: Registerkarte "Stil" geöffnet

Um zwischen der geöffneten Registerkarte und anderen zu unterscheiden, wird die Hintergrundfarbe des Etiketts als “festgelegtRGB (67, 144, 216)Und die Textfarbe ist als weiß eingestellt:

.myHtmltabs input [type = 'radio']: checked + label
Hintergrund: RGB (67, 144, 216);
Farbe weiß;

Nachdem wir den oben beschriebenen Code interpretiert haben, sehen wir das Ergebnis an!

So können Sie Registerkarten in HTML erstellen.

Abschluss

HTML -Registerkarten sind die anklickbaren Bereiche in jeder Anwendung, die den Benutzer zu einem bestimmten Abschnitt navigieren. Durch die Verwendung der Registerkarten können Benutzer problemlos mit mehreren Abschnitten der Anwendung fortfahren. In HTML können Sie einfacher Registerkarten erstellen, indem Sie den Eingangstyp als Radio einstellen und verschiedene CSS -Eigenschaften anwenden. In diesem Beitrag haben wir das Verfahren gelernt, um Registerkarten in HTML mit Hilfe einer praktischen Demonstration zu erstellen.