' tag i den og tilordne den en klasse med ' overskrift ' for å vise innholdet 'Velkommen til Linuxhint!':

klasse = 'Overskrift' >

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

< / overskrift>

Etter det velger du '

' tag klassen og tilordne følgende stiler:

---

---

.Overskrift {

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

bakgrunn- størrelse : dekke;

bakgrunns-gjenta: ikke-gjenta;

farge : hvit røyk;

bakgrunnsposisjon: topp;

polstring: 0px 20px 20px 20px;

}

Forklaringen av koden ovenfor er nevnt nedenfor:

• Først setter du bildet ' bg.jpg ' som bakgrunn for overskriftsdelen ved å bruke ' bakgrunnsbilde ' eiendom.
• Deretter ' bakgrunnsstørrelse ' og ' bakgrunnsgjenta ” egenskaper brukes til å angi henholdsvis bildestørrelsen og stoppe bildegjentakelsen.
• Etter det, sett fargen på teksten og bildeposisjonen til toppen ved hjelp av ' farge ' og ' bakgrunnsposisjon ' egenskaper.
• Til slutt, ' polstring ”-egenskapen brukes til å sette et mellomrom mellom topptekstinnholdet og kantlinjen.

Etter å ha utført koden ovenfor, ser nettsiden slik ut:

Utdataene ovenfor viser at overskriftsdelen er opprettet, og CSS-stiler brukes på den.

Trinn 2: Lag en navigasjonslinje

Overskriften kan også inneholde en navigasjonslinje i de fleste tilfeller. For å lage navigasjonslinjen HTML-en ' '-taggen kan være veldig nyttig. Det er derfor, legg til navbar-elementer ved å bruke ' '-tagger og tilordne en klasse med ' handling ':

klasse = 'Overskrift' >



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

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

< en klasse = 'handling' href = '#' >Om oss< / en >

< en klasse = 'handling' href = '#' >Kontakt oss< / en >

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

< / nei>

< br >< br >

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

< / overskrift>

Etter å ha utført koden ovenfor, ser nettsiden slik ut:

Utgangen ovenfor illustrerer at navbar-elementene ' Hjem ', ' Tjenester ', ' Om oss ', ' Kontakt oss ' og ' Nyankomne ' er opprettet.

Trinn 3: Bruk stiler på Navbar-elementer

For å style navigasjonselementene, velg ' handling '-klassen og tilordne følgende egenskaper for CSS-stiler:

.handling {

tekst-dekorasjon: ingen;

farge : hvit;

display: blokk;

polstring:15px;

font- størrelse : stor;

flyte: venstre;

margin: 0px 20px;

}

Forklaringen på koden ovenfor er:

• Først, ' tekst-dekorasjon '-egenskapen er satt til 'ingen' for å fjerne den forhåndsdefinerte stilen til ' ' stikkord.
• For å forbedre tekstsynlighet for brukeren, ' hvit ' og ' stor '-verdier er gitt til ' farge ' og ' skriftstørrelse ' eiendom.
• Etter det, ' vise ' og ' flyte ' egenskaper hjelper ' '-tagger vises på samme linje.
• Til slutt, ' polstring ' og ' margin ' egenskapsverdier brukes til å skape plass mellom hver ' '-tag.

Etter å ha utført koden ovenfor, ser nettsiden slik ut:

Utdataene ovenfor illustrerer at navbar-elementene nå er stylet.

Trinn 4: Legg til hover-effekt til Navbar-elementer

Som i utgangen ovenfor, er hover-effekten ikke tilgjengelig på navbar-elementet. For å legge til begge, velg ' overskrift ' klasse som er tildelt '

' stikkord. Etter det legger du til ' :sveve '-velgeren med ' handling ”-klassen for å bruke hover-effekten på navbar-elementene:

.act:hover {

grense : 2px solid hvit;

farge : blå fiolett;

}

.overskrift {

tekst- tilpasse : senter;

margin: 18 % 0px;

}

Forklaringen av koden ovenfor er gitt nedenfor:

• Først setter du ' grense ' av en 2px type solid og tilordne en hvit ' farge '. Sammen med den, sett ' blå fiolett ” farge bare når musen holdes av brukeren på navbar-elementene.
• Deretter velger du ' overskrift '-klassen og sett dens justering til ' senter ” og gi litt margin for å få delen til å se større ut.

Etter å ha utført koden ovenfor, ser det endelige utseendet til overskriften slik ut:

Utdataene ovenfor viser at overskriften er opprettet ved hjelp av HTML og CSS.

Konklusjon

I HTML-filen brukes «

»-taggen til å lage en seksjon for overskriften. Etter det kan brukere bruke CSS-egenskaper som utfylling og bakgrunnsbilder for å forbedre overskriftsdelen. Det gjelder alle overskriftselementer, for eksempel en navigasjonslinje. For å lage en navigasjonslinje kan brukere bruke «