” a priraďte mu triedu “ nadpis ” pre zobrazenie obsahu “Vitajte v Linuxhint!”:

trieda = 'hlavička' >

< h1 trieda = 'hlavička' > Vitajte v Linuxhint! < / h1 >

< / hlavička>

Potom vyberte „

” a priraďte nasledujúce štýly:

---

---

.hlavička {

obrázok na pozadí: url ( '../bg.jpg' ) ;

pozadie- veľkosť : kryt;

background-repeat: no-repeat;

farba : biely dym;

pozadie-pozícia: hore;

padding: 0px 20px 20px 20px;

}

Vysvetlenie vyššie uvedeného kódu je uvedené nižšie:

• Najprv nastavte obrázok „ bg.jpg “ ako pozadie pre sekciu hlavičky pomocou „ obrázok na pozadí ' nehnuteľnosť.
• Ďalej, „ veľkosť pozadia “ a „ pozadie-opakovať ” vlastnosti slúžia na nastavenie veľkosti obrázka a zastavenie opakovania obrázka, resp.
• Potom nastavte farbu textu a polohu obrázka na začiatok pomocou „ farba “ a „ pozícia na pozadí vlastnosti.
• Na záver, „ vypchávka Vlastnosť ” sa používa na nastavenie medzery medzi obsahom hlavičky a okrajom.

Po vykonaní vyššie uvedeného kódu bude webová stránka vyzerať takto:

Vyššie uvedený výstup zobrazuje, že sekcia hlavičky je vytvorená a sú na ňu aplikované štýly CSS.

Krok 2: Vytvorte navigačný panel

Hlavička môže vo väčšine prípadov obsahovať aj navigačnú lištu. Na vytvorenie navigačného panela HTML „ <žiadne> ” tag môže byť veľmi užitočný. Preto pridajte položky navigačného panela pomocou „ ” a priraďte triedu “ konať “:

trieda = 'hlavička' >

<žiadne>

< a trieda = 'akt' href = '#' >Domov< / a >

< a trieda = 'akt' href = '#' >Služby< / a >

< a trieda = 'akt' href = '#' >O nás< / a >

< a trieda = 'akt' href = '#' >Kontaktujte nás< / a >

< a trieda = 'akt' href = '#' >Nové príchody< / a >

< / nie>

< br < br >

< h1 trieda = 'hlavička' > Vitajte v Linuxhint! < / h1 >

< / hlavička>

Po vykonaní vyššie uvedeného kódu bude webová stránka vyzerať takto:

Vyššie uvedený výstup ilustruje, že položky navigačnej lišty „ Domov “, “ Služby “, “ O nás “, “ Kontaktuj nás “ a „ Novo prichádzajúci “ boli vytvorené.

Krok 3: Použite štýly na položky navigačného panela

Ak chcete upraviť štýl položiek navigačného panela, vyberte možnosť „ konať ” a priraďte nasledujúce vlastnosti štýlov CSS:

.činiť {

text-dekorácia: žiadna;

farba : biely;

displej: blok;

padding:15px;

font- veľkosť : veľký;

plavák: vľavo;

okraj: 0px 20px;

}

Vysvetlenie vyššie uvedeného kódu je:

• Po prvé, „ text-dekorácia ” je nastavená na “žiadny”, aby sa odstránil preddefinovaný štýl “ ” tag.
• Ak chcete zvýšiť viditeľnosť textu pre používateľa, „ biely “ a „ veľký ” hodnoty sú poskytnuté pre “ farba “ a „ veľkosť písma ' nehnuteľnosť.
• Potom sa „ displej “ a „ plavák vlastnosti pomáhajú “, aby sa zobrazili na rovnakom riadku.
• Na záver, „ vypchávka “ a „ marža Hodnoty vlastností ” sa používajú na vytvorenie priestoru medzi každou značkou „ “.

Po vykonaní vyššie uvedeného kódu bude webová stránka vyzerať takto:

Vyššie uvedený výstup ilustruje, že položky navigačnej lišty sú teraz upravené.

Krok 4: Pridajte efekt prechodu k položkám navigačného panela

Rovnako ako vo vyššie uvedenom výstupe, efekt vznášania nie je dostupný na položke navigačnej lišty. Ak chcete pridať oboje, vyberte možnosť „ nadpis ” trieda, ktorá je priradená k “

” tag. Potom pridajte „ :vznášať sa ” volič s “ konať ” na použitie efektu vznášania sa na položky navigačnej lišty:

.akt:vznášať sa {

hranica : 2px pevná biela;

farba : modrofialová;

}

.nadpis {

text- zarovnať : stred;

okraj: 18 % 0px;

}

Vysvetlenie vyššie uvedeného kódu je uvedené nižšie:

• Najprv nastavte „ hranica ” plného typu 2px a priraďte mu bielu “ farba “. Spolu s tým nastavte „ modrofialová ” len vtedy, keď používateľ podrží myš na položkách navigačnej lišty.
• Ďalej vyberte „ nadpis ” a nastavte jej zarovnanie na “ stred “ a poskytnite určitý okraj, aby sekcia vyzerala väčšia.

Po vykonaní vyššie uvedeného kódu vyzerá konečný vzhľad hlavičky takto:

Vyššie uvedený výstup zobrazuje, že hlavička je vytvorená pomocou HTML a CSS.

Záver

V súbore HTML sa značka „

“ používa na vytvorenie sekcie pre hlavičku. Potom môžu používatelia použiť vlastnosti CSS, ako sú výplň a obrázky na pozadí, na vylepšenie sekcie hlavičky. Vzťahuje sa na všetky prvky hlavičky, ako je navigačná lišta. Na vytvorenie navigačného panela môžu používatelia použiť značku „