« ali » ' lahko uporabite tudi oznake, vendar je dobra praksa uporaba ' ' oznaka. Nato dodelite » glava ” za uporabo slogov CSS v razdelku glave. Po tem dodajte »

« in mu dodelite razred » naslov « za prikaz vsebine »Dobrodošli v Linuxhint!«:

razred = 'glava' >

< h1 razred = 'naslov' > Dobrodošli v Linuxhintu! < / h1 >

< / glava>

Po tem izberite » ” označite razred in dodelite naslednje sloge:

---

---

.glava {

slika ozadja: url ( '../bg.jpg' ) ;

ozadje- velikost : pokrov;

ponavljanje v ozadju: brez ponavljanja;

barva : bel dim;

položaj ozadja: zgoraj;

oblazinjenje: 0px 20px 20px 20px;

}

Razlaga zgornje kode je navedena spodaj:

• Najprej nastavite sliko ' bg.jpg « kot ozadje za razdelek glave z uporabo » slika ozadja ” lastnina.
• Nato je ' velikost ozadja « in » ozadje-ponovitev Lastnosti se uporabljajo za nastavitev velikosti slike oziroma zaustavitev ponavljanja slike.
• Nato nastavite barvo besedila in položaj slike na vrh s pomočjo “ barva « in » položaj ozadja ” lastnosti.
• Na koncu je ' oblazinjenje Lastnost se uporablja za nastavitev presledka med vsebino glave in obrobo.

Po izvedbi zgornje kode je spletna stran videti takole:

Zgornji izhod prikazuje, da je razdelek glave ustvarjen in da so zanj uporabljeni slogi CSS.

2. korak: Ustvarite navigacijsko vrstico

V večini primerov lahko glava vsebuje tudi navigacijsko vrstico. Za ustvarjanje vrstice za krmarjenje HTML “ ” je lahko zelo uporabna. Zato dodajte elemente navbara z uporabo ' ” in dodelite razred „ dejanje ”:

razred = 'glava' >



< a razred = 'dejanje' href = '#' >Domov< / a >

< a razred = 'dejanje' href = '#' >Storitve< / a >

< a razred = 'dejanje' href = '#' >O nas< / a >

< a razred = 'dejanje' href = '#' >Pišite nam< / a >

< a razred = 'dejanje' href = '#' >Novi prispeli< / a >

< / ne>

< št >< št >

< h1 razred = 'naslov' > Dobrodošli v Linuxhintu! < / h1 >

< / glava>

Po izvedbi zgornje kode je spletna stran videti takole:

Zgornji izhod ponazarja, da elementi v vrstici za krmarjenje ' domov ”, “ Storitve ”, “ O nas ”, “ Kontaktiraj nas « in » Novi prišleki « so bili ustvarjeni.

3. korak: Uporabite sloge za elemente navbara

Za oblikovanje elementov vrstice za krmarjenje izberite » dejanje ” in dodelite naslednje lastnosti slogov CSS:

.delovati {

tekst-dekoracija: brez;

barva : bela;

zaslon: blok;

oblazinjenje:15px;

pisava- velikost : velik;

lebdi: levo;

rob: 0px 20px;

}

Razlaga zgornje kode je:

• Prvič, ' besedilo-okras ' je lastnost nastavljena na 'brez', da se odstrani vnaprej določen slog ' ' oznaka.
• Za izboljšanje vidnosti besedila za uporabnika je » bela « in » velik « so podane vrednosti » barva ' in ' velikost pisave ” lastnina.
• Po tem je ' zaslon « in » lebdi ' lastnosti pomagajo ' ” v isti vrstici.
• Na koncu je ' oblazinjenje « in » marža ” vrednosti lastnosti se uporabljajo za ustvarjanje prostora med vsako oznako “ ”.

Po izvedbi zgornje kode je spletna stran videti takole:

Zgornji izhod ponazarja, da so elementi navbara zdaj oblikovani.

4. korak: Dodajte učinek lebdenja elementom vrstice Navbar

Tako kot v zgornjem izhodu učinek lebdenja ni na voljo v elementu vrstice za krmarjenje. Če želite dodati oboje, izberite » naslov «, ki je dodeljen »

' oznaka. Po tem dodajte » :lebdi ' izbirnik z ' dejanje ” za uporabo učinka lebdenja na elementih navbara:

.dejanje: lebdenje {

meja : 2 slikovnih pik neprekinjeno belo;

barva : modro vijolična;

}

.naslov {

besedilo- poravnati : center;

rob: 18 % 0px;

}

Razlaga zgornje kode je navedena spodaj:

• Najprej nastavite » meja ' polnega tipa 2px in dodelite bel ' barva ”. Skupaj z njim nastavite » modro vijolična ” barva samo, ko uporabnik miško premakne na elemente v vrstici za krmarjenje.
• Nato izberite » naslov ' in nastavite njegovo poravnavo na ' center « in zagotovite nekaj roba, da bo odsek videti večji.

Po izvedbi zgornje kode je končni videz glave videti takole:

Zgornji izhod prikazuje, da je glava ustvarjena z uporabo HTML in CSS.

Zaključek

V datoteki HTML se oznaka »

« uporablja za ustvarjanje razdelka za glavo. Po tem lahko uporabniki uporabijo lastnosti CSS, kot so oblazinjenje in slike ozadja, da izboljšajo razdelek glave. Velja za vse elemente glave, kot je navigacijska vrstica. Za ustvarjanje navigacijske vrstice lahko uporabniki uporabijo oznako “