' oder ' “-Tags können ebenfalls verwendet werden, aber es ist eine gute Praxis, die “ ' Schild. Weisen Sie als Nächstes ein „ Header ”-Klasse zum Anwenden von CSS-Stilen auf den Kopfzeilenabschnitt. Fügen Sie danach das „

“ Tag darin und weisen Sie ihm eine Klasse von „ Überschrift “, um den Inhalt „Willkommen bei Linuxhint!“ anzuzeigen:

Klasse = 'Header' >

< h1 Klasse = 'Überschrift' > Willkommen bei Linuxhint! < / h1 >

< / Kopfzeile>

Wählen Sie danach „ ”-Tag-Klasse und weisen Sie die folgenden Stile zu:

---

---

.Header {

Hintergrundbild: URL ( '../bg.jpg' ) ;

Hintergrund- Größe : Abdeckung;

Hintergrundwiederholung: keine Wiederholung;

Farbe : weißer Rauch;

Hintergrundposition: oben;

Polsterung: 0px 20px 20px 20px;

}

Die Erklärung des obigen Codes ist unten aufgeführt:

• Stellen Sie zuerst das Bild „ bg.jpg “ als Hintergrund für den Header-Bereich mit dem „ Hintergrundbild ' Eigentum.
• Als nächstes das „ Hintergrundgröße ' Und ' Hintergrund Wiederholung ”-Eigenschaften werden verwendet, um die Bildgröße festzulegen bzw. die Bildwiederholung zu stoppen.
• Stellen Sie danach die Farbe des Textes und die Bildposition mit Hilfe von „ Farbe ' Und ' Hintergrund-Position ' Eigenschaften.
• Am Ende ist das „ Polsterung ”-Eigenschaft wird verwendet, um einen Abstand zwischen dem Header-Inhalt und dem Rahmen festzulegen.

Nach Ausführung des obigen Codes sieht die Webseite so aus:

Die obige Ausgabe zeigt, dass der Kopfzeilenabschnitt erstellt und CSS-Stile darauf angewendet werden.

Schritt 2: Erstellen Sie eine Navigationsleiste

Die Kopfzeile kann in den meisten Fällen auch eine Navigationsleiste enthalten. Für die Erstellung der Navigationsleiste wird das HTML „ ”-Tag kann sehr nützlich sein. Fügen Sie daher Navigationsleistenelemente mit „ ” Tags und weisen Sie eine Klasse von “ Gesetz “:

Klasse = 'Header' >



< A Klasse = 'Gesetz' href = '#' >Startseite< / A >

< A Klasse = 'Gesetz' href = '#' >Dienstleistungen< / A >

< A Klasse = 'Gesetz' href = '#' >Über uns< / A >

< A Klasse = 'Gesetz' href = '#' >Kontaktieren Sie uns< / A >

< A Klasse = 'Gesetz' href = '#' >Neuzugänge< / A >

< / nein>

< Br >< Br >

< h1 Klasse = 'Überschrift' > Willkommen bei Linuxhint! < / h1 >

< / Kopfzeile>

Nach Ausführung des obigen Codes sieht die Webseite so aus:

Die obige Ausgabe zeigt, dass die Navigationsleistenelemente „ Heim “, „ Dienstleistungen “, „ Über uns “, „ Kontaktiere uns ' Und ' Neue Ankünfte ' wurde erstellt.

Schritt 3: Wenden Sie Stile auf Navbar-Elemente an

Um die Elemente der Navigationsleiste zu gestalten, wählen Sie „ Gesetz ”-Klasse und weisen Sie die folgenden CSS-Stileigenschaften zu:

.Gesetz {

Textdekoration: keine;

Farbe : Weiss;

Bildschirmsperre;

Polsterung: 15px;

Schriftart- Größe : groß;

Schwimmer: links;

Rand: 0px 20px;

}

Die Erklärung des obigen Codes lautet:

• Zuerst die ' Textdekoration “-Eigenschaft ist auf „none“ gesetzt, um das vordefinierte Styling der „ ' Schild.
• Um die Sichtbarkeit des Textes für den Benutzer zu verbessern, wird das „ Weiss ' Und ' groß ” Werte werden an die “ Farbe ' und das ' Schriftgröße ' Eigentum.
• Danach ist die „ Anzeige ' Und ' schweben ” Eigenschaften helfen dem “ ”-Tags in derselben Zeile erscheinen.
• Am Ende ist das „ Polsterung ' Und ' Rand ”-Eigenschaftswerte werden verwendet, um Platz zwischen jedem “ ”-Tag zu schaffen.

Nach Ausführung des obigen Codes sieht die Webseite so aus:

Die obige Ausgabe zeigt, dass die Elemente der Navigationsleiste jetzt formatiert sind.

Schritt 4: Hover-Effekt zu Navbar-Elementen hinzufügen

Wie in der obigen Ausgabe ist der Hover-Effekt für das Navigationsleistenelement nicht verfügbar. Um beide hinzuzufügen, wählen Sie „ Überschrift ” Klasse, die der “

' Schild. Fügen Sie danach das „ :schweben ” Selektor mit dem “ Gesetz ”-Klasse, um den Hover-Effekt auf die Elemente der Navigationsleiste anzuwenden:

.act:schweben {

Grenze : 2px durchgehend weiß;

Farbe : Blau Violett;

}

.Überschrift {

Text- ausrichten : Center;

Rand: 18 % 0px;

}

Die Erklärung des obigen Codes ist unten angegeben:

• Stellen Sie zunächst „ Grenze ” eines 2px-Typs fest und weisen Sie ein weißes “ Farbe “. Stellen Sie dazu das „ Blau Violett ” Farbe nur, wenn der Benutzer die Maus über die Elemente der Navigationsleiste bewegt.
• Als nächstes wählen Sie „ Überschrift ” Klasse und setze ihre Ausrichtung auf “ Center “ und stellen Sie etwas Rand bereit, damit der Abschnitt größer aussieht.

Nach dem Ausführen des obigen Codes sieht das endgültige Aussehen des Headers folgendermaßen aus:

Die obige Ausgabe zeigt, dass der Header mit HTML und CSS erstellt wird.

Abschluss

In der HTML-Datei wird das „

“-Tag verwendet, um einen Abschnitt für die Kopfzeile zu erstellen. Danach können Benutzer CSS-Eigenschaften wie Padding und Hintergrundbilder anwenden, um den Header-Bereich zu verbessern. Es gilt für alle Header-Elemente wie eine Navigationsleiste. Um eine Navigationsleiste zu erstellen, können Benutzer das Tag „