' tagga i den och tilldela den en klass av ' rubrik ' för att visa innehållet 'Välkommen till Linuxhint!':

klass = 'rubrik' >

< h1 klass = 'rubrik' > Välkommen till Linuxhint! < / h1 >

< / header>

Efter det väljer du '

' tagga klass och tilldela följande stilar:

---

---

.rubrik {

bakgrundsbild: url ( '../bg.jpg' ) ;

bakgrund- storlek : omslag;

bakgrundsupprepning: ingen upprepning;

Färg : vit rök;

bakgrundsposition: topp;

stoppning: 0px 20px 20px 20px;

}

Förklaringen av ovanstående kod nämns nedan:

• Ställ först in bilden ' bg.jpg ' som bakgrund för rubriken med hjälp av ' bakgrundsbild ' fast egendom.
• Därefter ' bakgrundsstorlek ' och ' bakgrund-upprepa ”-egenskaper används för att ställa in bildstorleken respektive stoppa bildupprepningen.
• Efter det, ställ in färgen på texten och bildpositionen till toppen med hjälp av ' Färg ' och ' bakgrundsposition ' egenskaper.
• I slutändan, ' stoppning ”-egenskapen används för att ställa in ett mellanslag mellan rubrikens innehåll och gränsen.

Efter att ha kört ovanstående kod ser webbsidan ut så här:

Ovanstående utdata visar att rubriksektionen är skapad och CSS-stilar tillämpas på den.

Steg 2: Skapa ett navigeringsfält

Rubriken kan också innehålla ett navigeringsfält i de flesta fall. För att skapa navigeringsfältet HTML ' ”-taggen kan vara mycket användbar. Det är därför, lägg till navbar-objekt med ' ' taggar och tilldela en klass av ' spela teater ”:

klass = 'rubrik' >



< a klass = 'spela teater' href = '#' >Hem< / a >

< a klass = 'spela teater' href = '#' >Tjänster< / a >

< a klass = 'spela teater' href = '#' >Om oss< / a >

< a klass = 'spela teater' href = '#' >Kontakta oss< / a >

< a klass = 'spela teater' href = '#' >Nya ankomster< / a >

< / nej>

< br >< br >

< h1 klass = 'rubrik' > Välkommen till Linuxhint! < / h1 >

< / header>

Efter att ha kört ovanstående kod ser webbsidan ut så här:

Ovanstående utdata illustrerar att navbar-objekten ' Hem ”, “ Tjänster ”, “ Om oss ”, “ Kontakta oss ' och ' Nyankomna ' har blivit skapad.

Steg 3: Tillämpa stilar på Navbar-objekt

För att utforma navigeringsfältsobjekten, välj ' spela teater ' klass och tilldela följande egenskaper för CSS-stilar:

.spela teater {

text-dekoration: ingen;

Färg : vit;

display: block;

stoppning:15px;

font- storlek : stor;

flyta till vänster;

marginal: 0px 20px;

}

Förklaringen till ovanstående kod är:

• Först, ' text-dekoration '-egenskapen är inställd på 'ingen' för att ta bort den fördefinierade stilen för ' '-tagg.
• För att förbättra textens synlighet för användaren, ' vit ' och ' stor ”-värden tillhandahålls till ” Färg ' och den ' textstorlek ' fast egendom.
• Efter det kommer ' visa ' och ' flyta ' egenskaper hjälper ' '-taggar visas på samma rad.
• I slutändan, ' stoppning ' och ' marginal ' egenskapsvärden används för att skapa utrymme mellan varje ' '-tagg.

Efter att ha kört ovanstående kod ser webbsidan ut så här:

Ovanstående utdata illustrerar att navbar-objekten nu är utformade.

Steg 4: Lägg till hovringseffekt till Navbar-objekt

Som i ovanstående utdata är hovringseffekten inte tillgänglig på navbar-objektet. För att lägga till båda, välj ' rubrik ' klass som är tilldelad '

'-tagg. Efter det lägger du till ' :sväva ”väljaren med ” spela teater ”-klass för att tillämpa hovringseffekten på navigeringsfältsobjekten:

.act:hover {

gräns : 2px fast vit;

Färg : blåviolett;

}

.rubrik {

text- justera : Centrum;

marginal: 18 % 0px;

}

Förklaringen av ovanstående kod ges nedan:

• Ställ först in ' gräns ” av en 2px typ fast och tilldela en vit ” Färg ”. Tillsammans med det, ställ in ' blåviolett ” färg endast när musen hålls av användaren på navigeringsfältet.
• Välj sedan ' rubrik '-klass och ställ in dess justering till ' Centrum ” och ge lite marginal för att få avsnittet att se större ut.

Efter att ha kört ovanstående kod ser det slutliga utseendet av rubriken ut så här:

Ovanstående utdata visar att rubriken skapas med HTML och CSS.

Slutsats

I HTML-filen används taggen '

' för att skapa en sektion för rubriken. Efter det kan användare använda CSS-egenskaper som utfyllnad och bakgrundsbilder för att förbättra rubriksektionen. Det gäller för alla rubrikelement som ett navigeringsfält. För att skapa ett navigeringsfält kan användare använda taggen '