HTML -Registerkarten
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.
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
Zuhause ist der Startplatz der Träume und Hoffnungen!
Um
wir sind ein Team! Arbeiten Sie zusammen für eine gemeinsame Vision…
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örperHintergrundfarbe: 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:
.myhtmltabsAnzeige: 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:
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 .TabBreite: 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 + .TabBildschirmsperre;
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 + labelHintergrund: 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.