” a přiřaďte mu třídu “ nadpis ” pro zobrazení obsahu „Vítejte v Linuxhintu!“:

třída = 'záhlaví' >

< h1 třída = 'nadpis' > Vítejte v Linuxhintu! < / h1 >

< / záhlaví>

Poté vyberte „

” a přiřaďte následující styly:

---

---

.záhlaví {

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

Pozadí- velikost : Pokrýt;

background-repeat: no-repeat;

barva : bílý kouř;

pozadí-pozice: nahoře;

padding: 0px 20px 20px 20px;

}

Vysvětlení výše uvedeného kódu je uvedeno níže:

• Nejprve nastavte obrázek ' bg.jpg “ jako pozadí pro sekci záhlaví pomocí „ obrázek na pozadí ' vlastnictví.
• Dále, „ velikost pozadí ' a ' pozadí-opakování Vlastnosti se používají k nastavení velikosti obrázku a zastavení opakování obrázku.
• Poté nastavte barvu textu a polohu obrázku nahoru pomocí „ barva ' a ' pozadí-pozice vlastnosti.
• Nakonec „ vycpávka Vlastnost ” se používá k nastavení mezery mezi obsahem záhlaví a okrajem.

Po provedení výše uvedeného kódu vypadá webová stránka takto:

Výše uvedený výstup zobrazuje, že je vytvořena sekce záhlaví a jsou na ni aplikovány styly CSS.

Krok 2: Vytvořte navigační panel

Záhlaví může ve většině případů obsahovat také navigační lištu. Pro vytvoření navigační lišty HTML „ <žádné> Značka ” může být velmi užitečná. Proto přidávejte položky navigační lišty pomocí „ ” a přiřaďte třídu “ akt “:

třída = 'záhlaví' >

<žádné>

< A třída = 'akt' href = '#' >Domů< / A >

< A třída = 'akt' href = '#' >Služby< / A >

< A třída = 'akt' href = '#' >O nás< / A >

< A třída = 'akt' href = '#' >Kontaktujte nás< / A >

< A třída = 'akt' href = '#' >Nové přírůstky< / A >

< / ne>

< br < br >

< h1 třída = 'nadpis' > Vítejte v Linuxhintu! < / h1 >

< / záhlaví>

Po provedení výše uvedeného kódu vypadá webová stránka takto:

Výše uvedený výstup ilustruje, že položky navigační lišty „ Domov “, “ Služby “, “ O nás “, “ Kontaktujte nás ' a ' Nově příchozí “ byly vytvořeny.

Krok 3: Použijte styly na položky Navbar

Chcete-li upravit styl položek navigační lišty, vyberte „ akt ” a přiřaďte následující vlastnosti stylů CSS:

.akt {

text-dekorace: žádná;

barva : bílá;

displej: blok;

padding:15px;

písmo- velikost : velký;

plavat vlevo;

okraj: 0px 20px;

}

Vysvětlení výše uvedeného kódu je:

• Za prvé, „ text-dekorace vlastnost ” je nastavena na hodnotu “none”, aby se odstranil předdefinovaný styl “ ” tag.
• Chcete-li zlepšit viditelnost textu pro uživatele, „ bílý ' a ' velký ” hodnoty jsou poskytovány do “ barva “ a „ velikost písma ' vlastnictví.
• Poté se „ Zobrazit ' a ' plovák vlastnosti pomáhají “, aby se objevily na stejném řádku.
• Nakonec „ vycpávka ' a ' okraj Hodnoty vlastností ” se používají k vytvoření mezery mezi každou značkou „ “.

Po provedení výše uvedeného kódu vypadá webová stránka takto:

Výše uvedený výstup ukazuje, že položky navigační lišty jsou nyní stylizovány.

Krok 4: Přidejte efekt přechodu do položek Navbar

Stejně jako ve výše uvedeném výstupu není na položce navigační lišty k dispozici efekt přechodu. Chcete-li přidat oba, vyberte možnost „ nadpis ” třída, která je přiřazena k “

” tag. Poté přidejte „ :vznášet se ” volič s “ akt ” pro použití efektu najetí na položky navigační lišty:

.akt:vznášet se {

okraj : 2px plná bílá;

barva : modrofialová;

}

.nadpis {

text- zarovnat : střed;

okraj: 18 % 0px;

}

Vysvětlení výše uvedeného kódu je uvedeno níže:

• Nejprve nastavte „ okraj “ plného typu 2px a přiřadit bílou “ barva “. Spolu s tím nastavte „ modrofialová ” pouze tehdy, když uživatel najede myší na položky navigační lišty.
• Dále vyberte „ nadpis třída “ a nastavte její zarovnání na “ centrum “ a poskytněte určitý okraj, aby sekce vypadala větší.

Po provedení výše uvedeného kódu vypadá konečný vzhled záhlaví takto:

Výše uvedený výstup ukazuje, že záhlaví je vytvořeno pomocí HTML a CSS.

Závěr

V souboru HTML se značka „

“ používá k vytvoření sekce pro záhlaví. Poté mohou uživatelé použít vlastnosti CSS, jako je výplň a obrázky na pozadí, pro vylepšení sekce záhlaví. Platí pro všechny prvky záhlaví, jako je navigační panel. K vytvoření navigační lišty mohou uživatelé použít značku „