” vagy „ ' címkék is használhatók, de jó gyakorlat a ' ” címke. Ezután rendeljen hozzá egy „ fejléc ” osztályú CSS-stílusok alkalmazásához a fejlécszakaszban. Ezt követően adja hozzá a „

' címkét, és rendeljen hozzá egy '' osztályt cím ” az „Üdvözöljük a Linuxhintben!” tartalom megjelenítéséhez:

osztály = 'fejléc' >

< h1 osztály = 'cím' > Üdvözöljük a Linuxhintben! < / h1 >

< / fejléc>

Ezt követően válassza ki a „ ” címke osztályt, és rendelje hozzá a következő stílusokat:

---

---

.fejléc {

háttér-kép: url ( '../bg.jpg' ) ;

háttér- méret : borító;

háttér-ismétlés: nincs ismétlés;

szín : fehér füst;

háttér-pozíció: felső;

padding: 0px 20px 20px 20px;

}

A fenti kód magyarázata az alábbiakban található:

• Először állítsa be a képet ' bg.jpg ' a fejlécrész háttereként a ' háttérkép ' ingatlan.
• Ezután a „ háttér méretű ” és „ háttér-ismétlés ” tulajdonságok a képméret beállítására és a képismétlődés leállítására szolgálnak.
• Ezután állítsa be a szöveg színét és a kép pozícióját a tetejére a „ szín ” és „ háttér-pozíció ” tulajdonságait.
• Végül a „ párnázás ” tulajdonság a fejléctartalom és a szegély közötti szóköz beállítására szolgál.

A fenti kód végrehajtása után a weboldal így néz ki:

A fenti kimenet azt mutatja, hogy a fejléc szakasz létrejött, és a CSS-stílusok alkalmazásra kerülnek.

2. lépés: Hozzon létre egy navigációs sávot

A fejléc a legtöbb esetben tartalmazhat navigációs sávot is. A navigációs sáv létrehozásához a HTML ' ” címke nagyon hasznos lehet. Ezért adjon hozzá elemeket a navigációs sávhoz a ' ” címkéket, és rendeljen hozzá egy „” osztályt törvény ”:

osztály = 'fejléc' >



< a osztály = 'törvény' href = '#' >Otthon< / a >

< a osztály = 'törvény' href = '#' >Szolgáltatások< / a >

< a osztály = 'törvény' href = '#' >Rólunk< / a >

< a osztály = 'törvény' href = '#' >Vegye fel velünk a kapcsolatot< / a >

< a osztály = 'törvény' href = '#' >Újdonságok< / a >

< / nem>

< br >< br >

< h1 osztály = 'cím' > Üdvözöljük a Linuxhintben! < / h1 >

< / fejléc>

A fenti kód végrehajtása után a weboldal így néz ki:

A fenti kimenet azt mutatja, hogy a navigációs sáv elemei ' itthon ”, „ Szolgáltatások ”, „ Rólunk ”, „ Lépjen kapcsolatba velünk ” és „ Új érkezők ” jöttek létre.

3. lépés: Alkalmazza a stílusokat a Navbar elemekre

A navigációs sáv elemeinek stílusához válassza ki a „ törvény ” osztályt, és rendelje hozzá a következő CSS-stílustulajdonságokat:

.törvény {

szöveg-dekoráció: nincs;

szín : fehér;

kijelző: blokk;

padding:15px;

betűtípus- méret : nagy;

balra lebeg;

margó: 0 képpont 20 képpont;

}

A fenti kód magyarázata:

• Először is a „ szöveg-dekoráció ” tulajdonság „nincs” értékre van állítva, hogy eltávolítsa a „ ” címke.
• A szöveg láthatóságának javítása érdekében a „ fehér ” és „ nagy ' értékek a ' szín ' és a ' betűméret ' ingatlan.
• Ezt követően a „ kijelző ” és „ úszó ' tulajdonságok segítik a ' ” címkék jelennek meg ugyanabban a sorban.
• Végül a „ párnázás ” és „ árrés ” tulajdonságok értékei az egyes „ ” címkék közötti térköz létrehozására szolgálnak.

A fenti kód végrehajtása után a weboldal így néz ki:

A fenti kimenet azt szemlélteti, hogy a navigációs sáv elemei most stílusosak.

4. lépés: Adjon hozzá Hover Effectet a Navbar elemekhez

A fenti kimenethez hasonlóan a hover effektus nem érhető el a navigációs sáv elemen. Mindkettő hozzáadásához válassza a „ cím ' osztály, amely a '

” címke. Ezt követően adja hozzá a „ :lebeg ” választót a „ törvény ” osztály a lebegő effektus alkalmazásához a navigációs sáv elemeire:

.act:hover {

határ : 2px tömör fehér;

szín : kék ibolya;

}

.cím {

szöveg- igazítsa : középen;

árrés: 18 % 0px;

}

A fenti kód magyarázata az alábbiakban található:

• Először állítsa be a „ határ ' 2px típusú szilárdtestből, és rendeljen hozzá egy fehér ' szín ”. Ezzel együtt állítsa be a „ kék ibolya ” szín csak akkor, ha a felhasználó a navigációs sáv elemeire viszi az egeret.
• Ezután válassza ki a „ cím ” osztályt, és állítsa az igazítást a „ központ ” és biztosítson némi margót, hogy a szakasz nagyobbnak tűnjön.

A fenti kód végrehajtása után a fejléc végső megjelenése így néz ki:

A fenti kimenet azt mutatja, hogy a fejléc HTML és CSS használatával készült.

Következtetés

A HTML-fájlban a „

” címke a fejléc szakaszának létrehozására szolgál. Ezt követően a felhasználók CSS-tulajdonságokat, például kitöltést és háttérképeket alkalmazhatnak a fejlécrész javítása érdekében. Ez az összes fejlécelemre vonatkozik, például a navigációs sávra. A navigációs sáv létrehozásához a felhasználók használhatják a „