' tag i den og tildel den en klasse af ' overskrift ' for at vise indholdet 'Velkommen til Linuxhint!':

klasse = 'header' >

< h1 klasse = 'overskrift' > Velkommen til Linuxhint! < / h1 >

< / overskrift>

Vælg derefter '

' tag klasse og tildel følgende stilarter:

---

---

.header {

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

baggrund- størrelse : dække over;

baggrund-gentag: ingen-gentagelse;

farve : hvid røg;

baggrundsposition: top;

polstring: 0px 20px 20px 20px;

}

Forklaringen af ​​ovenstående kode er nævnt nedenfor:

• Indstil først billedet ' bg.jpg ' som baggrund for overskriftssektionen ved hjælp af ' baggrundsbillede ” ejendom.
• Dernæst ' baggrundsstørrelse ' og ' baggrund-gentag ” egenskaber bruges til henholdsvis at indstille billedstørrelsen og stoppe billedgentagelsen.
• Indstil derefter farven på teksten og billedpositionen til toppen ved hjælp af ' farve ' og ' baggrundsposition ' ejendomme.
• I sidste ende vil ' polstring ” egenskaben bruges til at indstille et mellemrum mellem overskriftens indhold og grænsen.

Efter at have udført ovenstående kode, ser websiden sådan ud:

Ovenstående output viser, at overskriftssektionen er oprettet, og CSS-stile anvendes på den.

Trin 2: Opret en navigationslinje

Overskriften kan også indeholde en navigationslinje i de fleste tilfælde. Til oprettelse af navbaren er HTML ' ” tag kan være meget nyttigt. Det er derfor, du tilføjer navbar-elementer ved at bruge ' ' tags og tildel en klasse af ' handling ”:

klasse = 'header' >



< -en klasse = 'handling' href = '#' >Hjem< / -en >

< -en klasse = 'handling' href = '#' >Tjenester< / -en >

< -en klasse = 'handling' href = '#' >Om os< / -en >

< -en klasse = 'handling' href = '#' >Kontakt os< / -en >

< -en klasse = 'handling' href = '#' >Nye ankomster< / -en >

< / nej >

< br >< br >

< h1 klasse = 'overskrift' > Velkommen til Linuxhint! < / h1 >

< / overskrift>

Efter at have udført ovenstående kode, ser websiden sådan ud:

Ovenstående output illustrerer, at navbar-elementerne ' Hjem ', ' Tjenester ', ' Om os ', ' Kontakt os ' og ' Nyankomne ” er blevet oprettet.

Trin 3: Anvend stilarter på Navbar-elementer

For at style navbar-elementerne skal du vælge ' handling ” klasse og tildel følgende egenskaber for CSS-stile:

.handling {

tekst-dekoration: ingen;

farve : hvid;

display: blok;

polstring:15px;

skrift- størrelse : stor;

flyde: venstre;

margen: 0px 20px;

}

Forklaringen på ovenstående kode er:

• For det første ' tekst-dekoration ' egenskaben er indstillet til 'ingen' for at fjerne den foruddefinerede stil af ' ” tag.
• For at forbedre tekstsynlighed for brugeren, ' hvid ' og ' stor '-værdier er angivet til ' farve ' og ' skriftstørrelse ” ejendom.
• Derefter vil ' Skærm ' og ' flyde ' egenskaber hjælper ' ” tags til at blive vist på samme linje.
• I sidste ende vil ' polstring ' og ' margen ” egenskabsværdier bruges til at skabe mellemrum mellem hvert “ ” tag.

Efter at have udført ovenstående kode, ser websiden sådan ud:

Ovenstående output illustrerer, at navbar-elementerne nu er stylet.

Trin 4: Tilføj hover-effekt til Navbar-elementer

Som i ovenstående output er hover-effekten ikke tilgængelig på navbar-elementet. For at tilføje begge, vælg ' overskrift ' klasse, der er tildelt '

” tag. Derefter tilføjes ' :hover ' vælgeren med ' handling ” klasse for at anvende hover-effekten på navbar-elementerne:

.act:hover {

grænse : 2px ensfarvet hvid;

farve : blåviolet;

}

.overskrift {

tekst- justere : center;

margin: 18 % 0px;

}

Forklaringen af ​​ovenstående kode er givet nedenfor:

• Først skal du indstille ' grænse ' af en 2px type fast og tildel en hvid ' farve ”. Sammen med det skal du indstille ' blåviolet ” farve kun når musen holdes af brugeren på navbar-elementerne.
• Vælg derefter ' overskrift ' klasse og indstil dens justering til ' centrum ” og give en vis margin for at få sektionen til at se større ud.

Efter at have udført ovenstående kode, ser det endelige udseende af headeren sådan ud:

Ovenstående output viser, at headeren er oprettet ved hjælp af HTML og CSS.

Konklusion

I HTML-filen bruges '

'-tagget til at oprette en sektion til headeren. Derefter kan brugere anvende CSS-egenskaber som polstring og baggrundsbilleder for at forbedre overskriftssektionen. Det gælder for alle overskriftselementer såsom en navigationslinje. For at oprette en navigationslinje kan brugere bruge tagget '