'tag sa loob nito at italaga ito ng isang klase ng ' heading ” para ipakita ang nilalamang “Welcome to Linuxhint!”:

klase = 'header' >

< h1 klase = 'heading' > Maligayang pagdating sa Linuxhint! < / h1 >

< / header>

Pagkatapos nito, piliin ang '

” tag class at italaga ang mga sumusunod na istilo:

---

---

.header {

background-image: url ( '../bg.jpg' ) ;

background- laki : takip;

background-repeat: no-repeat;

kulay : puting usok;

background-posisyon: tuktok;

padding: 0px 20px 20px 20px;

}

Ang paliwanag ng code sa itaas ay binanggit sa ibaba:

• Una, itakda ang imahe ' bg.jpg ' bilang background para sa seksyon ng header gamit ang ' background-image ” ari-arian.
• Susunod, ang ' laki ng background 'at' background-repeat Ang mga katangian ng ” ay ginagamit upang itakda ang laki ng imahe at itigil ang pag-uulit ng imahe, ayon sa pagkakabanggit.
• Pagkatapos nito, itakda ang kulay ng teksto at posisyon ng imahe sa itaas sa tulong ng ' kulay 'at' background-posisyon ' ari-arian.
• Sa huli, ang ' padding Ang ” property ay ginagamit para sa pagtatakda ng espasyo sa pagitan ng nilalaman ng header at ng hangganan.

Pagkatapos isagawa ang code sa itaas, ganito ang hitsura ng webpage:

Ang output sa itaas ay nagpapakita na ang seksyon ng header ay nilikha, at ang mga estilo ng CSS ay inilalapat dito.

Hakbang 2: Gumawa ng Navigation Bar

Ang header ay maaari ding maglaman ng navigation bar sa karamihan ng mga kaso. Para sa paglikha ng navbar ang HTML ' ” Ang tag ay maaaring maging lubhang kapaki-pakinabang. Kaya naman, magdagdag ng navbar item gamit ang ' 'tag at magtalaga ng klase ng ' kumilos ”:

klase = 'header' >



< a klase = 'kumilos' href = '#' >Bahay< / a >

< a klase = 'kumilos' href = '#' >Mga Serbisyo< / a >

< a klase = 'kumilos' href = '#' >Tungkol sa Amin< / a >

< a klase = 'kumilos' href = '#' >Makipag-ugnayan sa Amin< / a >

< a klase = 'kumilos' href = '#' >Mga Bagong Arrival< / a >

< / hindi>

< br >< br >

< h1 klase = 'heading' > Maligayang pagdating sa Linuxhint! < / h1 >

< / header>

Pagkatapos isagawa ang code sa itaas, ganito ang hitsura ng webpage:

Ang output sa itaas ay naglalarawan na ang navbar aytem ' Bahay ”, “ Mga serbisyo ”, “ Tungkol sa atin ”, “ Makipag-ugnayan sa amin 'at' Mga bagong dating ” ay nilikha.

Hakbang 3: Ilapat ang Mga Estilo sa Mga Item ng Navbar

Upang i-istilo ang mga item sa navbar, piliin ang “ kumilos ” class at italaga ang sumusunod na CSS styles properties:

.act {

text-dekorasyon: wala;

kulay : puti;

display: block;

padding:15px;

font- laki : malaki;

lumutang pakaliwa;

margin: 0px 20px;

}

Ang paliwanag ng code sa itaas ay:

• Una, ang ' text-dekorasyon Ang pag-aari ay nakatakda sa 'wala' upang alisin ang paunang natukoy na estilo ng ' ” tag.
• Upang mapahusay ang visibility ng text para sa user, ang ' puti 'at' malaki 'Ang mga halaga ay ibinibigay sa ' kulay ' at ang ' laki ng font ” ari-arian.
• Pagkatapos nito, ang ' display 'at' lumutang Ang mga katangian ay nakakatulong sa ” mga tag na lilitaw sa parehong linya.
• Sa huli, ang ' padding 'at' margin Ginagamit ang mga value ng property para gumawa ng espasyo sa pagitan ng bawat tag na ' '.

Pagkatapos isagawa ang code sa itaas, ganito ang hitsura ng webpage:

Ang output sa itaas ay naglalarawan na ang navbar item ay naka-istilo na ngayon.

Hakbang 4: Magdagdag ng Hover Effect sa Navbar Items

Tulad ng sa itaas na output, ang hover effect ay hindi magagamit sa navbar item. Upang idagdag ang dalawa, piliin ang “ heading 'klase na itinalaga sa '

” tag. Pagkatapos nito, idagdag ang ' :hover ' selector na may ' kumilos ” class para ilapat ang hover effect sa navbar item:

.act:hover {

hangganan : 2px solid na puti;

kulay : Blue violet;

}

.heading {

text- ihanay : gitna;

margin: 18 % 0px;

}

Ang paliwanag ng code sa itaas ay ibinigay sa ibaba:

• Una, itakda ang ' hangganan ” ng isang 2px na uri ng solid at magtalaga ng isang puting “ kulay ”. Kasama nito, itakda ang ' Blue violet ” kulay lamang kapag ang mouse ay na-hover ng user sa navbar item.
• Susunod, piliin ang ' heading ” class at itakda ang pagkakahanay nito sa “ gitna ” at magbigay ng ilang margin upang gawing mas malaki ang seksyon.

Pagkatapos isagawa ang code sa itaas, ang huling hitsura ng header ay ganito:

Ang output sa itaas ay nagpapakita na ang header ay nilikha gamit ang HTML at CSS.

Konklusyon

Sa HTML file, ang tag na '

' ay ginagamit upang lumikha ng isang seksyon para sa header. Pagkatapos nito, maaaring ilapat ng mga user ang mga katangian ng CSS tulad ng padding at mga larawan sa background upang mapahusay ang seksyon ng header. Nalalapat ito sa lahat ng elemento ng header gaya ng navigation bar. Upang gumawa ng navigation bar, magagamit ng mga user ang tag na “