” või „ Võib kasutada ka silte, kuid hea tava on kasutada ” silti. Järgmisena määrake ' päis ” klassi, et päise jaotises CSS-i stiile rakendada. Pärast seda lisage '

märgend ja määrake sellele klass ' pealkiri ', et kuvada sisu 'Tere tulemast Linuxhinti!':

klass = 'päis' >

< h1 klass = 'pealkiri' > Tere tulemast Linuxhinti! < / h1 >

< / päis>

Pärast seda valige ' ” märgistage klass ja määrake järgmised stiilid:

---

---

.päis {

taustapilt: url ( '../bg.jpg' ) ;

taust- suurus : kate;

background-repeat: no-repeat;

värvi : valge suits;

tausta-positsioon: ülemine;

polsterdus: 0px 20px 20px 20px;

}

Ülaltoodud koodi selgitust mainitakse allpool:

• Esmalt määrake pilt ' bg.jpg ' päise jaotise taustaks, kasutades ' taustapilt ” vara.
• Järgmiseks ' tausta suurus ” ja „ taustakordus ” atribuute kasutatakse vastavalt pildi suuruse määramiseks ja pildi korduse peatamiseks.
• Pärast seda määrake teksti ja pildi positsiooni värv ülaosas, kasutades ' värvi ” ja „ tausta-positsioon ” omadused.
• Lõpuks ' polsterdus ” atribuuti kasutatakse tühiku määramiseks päise sisu ja piiri vahele.

Pärast ülaltoodud koodi käivitamist näeb veebileht välja selline:

Ülaltoodud väljund näitab, et päise jaotis on loodud ja sellele rakendatakse CSS-stiile.

2. samm: looge navigeerimisriba

Enamikul juhtudel võib päis sisaldada ka navigeerimisriba. Navigeerimisriba loomiseks HTML ' ” silt võib olla väga kasulik. Sellepärast lisage navigeerimisriba üksused, kasutades ' ' sildid ja määrake klass ' tegutsema ”:

klass = 'päis' >



< a klass = 'tegutsema' href = '#' >Kodu< / a >

< a klass = 'tegutsema' href = '#' >Teenused< / a >

< a klass = 'tegutsema' href = '#' >Meist< / a >

< a klass = 'tegutsema' href = '#' >Võtke meiega ühendust< / a >

< a klass = 'tegutsema' href = '#' >Uued saabujad< / a >

< / ei>

< br >< br >

< h1 klass = 'pealkiri' > Tere tulemast Linuxhinti! < / h1 >

< / päis>

Pärast ülaltoodud koodi käivitamist näeb veebileht välja selline:

Ülaltoodud väljund illustreerib, et navigeerimisriba üksused ' Kodu ”, „ Teenused ”, „ Meist ”, „ Võta meiega ühendust ” ja „ Uustulnukad ” on loodud.

3. samm: rakendage navigeerimisriba üksustele stiile

Navigeerimisriba üksuste stiilimiseks valige ' tegutsema ” klassi ja määrake järgmised CSS-stiilide atribuudid:

.tegutsema {

tekst-kaunistus: puudub;

värvi : valge;

kuva: plokk;

polster: 15px;

font- suurus : suur;

ujuk: vasak;

veeris: 0px 20px;

}

Ülaltoodud koodi selgitus on järgmine:

• Esiteks, ' tekst-kaunistus ' atribuut on seatud väärtusele 'pole', et eemaldada '' eelmääratletud stiil ” silti.
• Kasutaja jaoks teksti nähtavuse parandamiseks ' valge ” ja „ suur ' väärtused on esitatud ' värvi ' ja ' fondi suurus ” vara.
• Pärast seda ' kuva ” ja „ ujuk ' omadused aitavad ' ” sildid ilmuvad samal real.
• Lõpuks ' polsterdus ” ja „ marginaal ” atribuutide väärtusi kasutatakse iga „ ” sildi vahele tühiku loomiseks.

Pärast ülaltoodud koodi käivitamist näeb veebileht välja selline:

Ülaltoodud väljund illustreerib, et navigeerimisriba elemendid on nüüd kujundatud.

4. samm: lisage navigeerimisriba üksustele hõljutusefekt

Nagu ülaltoodud väljundis, pole hõljutusefekt navigeerimisriba üksusel saadaval. Mõlema lisamiseks valige ' pealkiri ' klass, mis on määratud '

” silti. Pärast seda lisage ' :hõljuma valija koos nupuga tegutsema ” klassis, et rakendada navigeerimisriba üksustele hõljutusefekti:

.act:hover {

piir : 2px täisvalge;

värvi : sinakasvioletne;

}

.pealkiri {

tekst- joondada : Keskus;

marginaal: 18 % 0px;

}

Ülaltoodud koodi selgitus on toodud allpool:

• Esmalt määrake ' piir ' 2px tüüpi tahkis ja määrake valge ' värvi ”. Koos sellega määrake ' sinililla ” värvi ainult siis, kui kasutaja liigutab hiirt navigeerimisriba üksustel.
• Järgmisena valige ' pealkiri ' klassi ja seadke selle joondus väärtusele ' Keskus ” ja lisage varu, et jaotis näeks suurem välja.

Pärast ülaltoodud koodi käivitamist näeb päise lõplik välimus välja järgmine:

Ülaltoodud väljund näitab, et päis on loodud HTML-i ja CSS-i abil.

Järeldus

HTML-failis kasutatakse päise jaoks jaotise loomiseks märgendit „

”. Pärast seda saavad kasutajad päise jaotise täiustamiseks rakendada CSS-i atribuute, nagu polsterdus ja taustpildid. See kehtib kõigi päiseelementide, näiteks navigeerimisriba kohta. Navigeerimisriba loomiseks saavad kasutajad kasutada märgendit „