” etichetați-l și atribuiți-i o clasă de „ rubrica ” pentru a afișa conținutul „Bine ați venit la Linuxhint!”:

clasă = 'antet' >

< h1 clasă = 'rudire' > Bun venit la Linuxhint! < / h1 >

< / antet>

După aceea, selectați „

” etichetați clasa și atribuiți următoarele stiluri:

---

---

.antet {

imagine de fundal: url ( „../bg.jpg” ) ;

fundal- mărimea : acoperi;

background-repeat: fără repetare;

culoare : fum alb;

fundal-poziție: sus;

umplutură: 0px 20px 20px 20px;

}

Explicația codului de mai sus este menționată mai jos:

• Mai întâi, setați imaginea „ bg.jpg ” ca fundal pentru secțiunea antet folosind „ imagine de fundal ” proprietate.
• În continuare, „ dimensiunea fundalului ' și ' fundal-repetare ” proprietățile sunt folosite pentru a seta dimensiunea imaginii și, respectiv, pentru a opri repetarea imaginii.
• După aceea, setați culoarea textului și a poziției imaginii în partea de sus cu ajutorul lui „ culoare ' și ' fundal-poziție ” proprietăți.
• În cele din urmă, „ căptușeală ” proprietatea este utilizată pentru a seta un spațiu între conținutul antetului și chenar.

După executarea codului de mai sus, pagina web arată astfel:

Ieșirea de mai sus arată că secțiunea antet este creată și i se aplică stiluri CSS.

Pasul 2: Creați o bară de navigare

Antetul poate conține și o bară de navigare în majoritatea cazurilor. Pentru crearea barei de navigare, HTML „ ” eticheta poate fi foarte utilă. De aceea, adăugați elemente din bara de navigare folosind „ ” etichetează și atribuie o clasă de „ act ”:

clasă = 'antet' >



< A clasă = 'act' href = '#' >Acasă< / A >

< A clasă = 'act' href = '#' >Servicii< / A >

< A clasă = 'act' href = '#' >Despre noi< / A >

< A clasă = 'act' href = '#' >Contactați-ne< / A >

< A clasă = 'act' href = '#' >Noi Sosiri< / A >

< / nu>

< br >< br >

< h1 clasă = 'rudire' > Bun venit la Linuxhint! < / h1 >

< / antet>

După executarea codului de mai sus, pagina web arată astfel:

Ieșirea de mai sus ilustrează faptul că elementele din bara de navigare „ Acasă ”, “ Servicii ”, “ Despre noi ”, “ Contactaţi-ne ' și ' Sosiri noi ” au fost create.

Pasul 3: Aplicați stiluri elementelor din bara de navigare

Pentru a stila elementele din bara de navigare, selectați „ act ” și atribuiți următoarele proprietăți de stiluri CSS:

.act {

text-decor: niciuna;

culoare : alb;

afisare: bloc;

umplutură: 15px;

font- mărimea : mare;

plutește la stânga;

marjă: 0px 20px;

}

Explicația codului de mai sus este:

• În primul rând, „ text-decor ” este setată la „none” pentru a elimina stilul predefinit al „ ' etichetă.
• Pentru a îmbunătăți vizibilitatea textului pentru utilizator, „ alb ' și ' mare ” valorile sunt furnizate pentru „ culoare ' si ' marimea fontului ” proprietate.
• După aceea, „ afişa ' și ' pluti ” proprietățile ajută la ” ” să apară pe aceeași linie.
• În cele din urmă, „ căptușeală ' și ' marginea ” valorile proprietăților sunt folosite pentru a crea spațiu între fiecare etichetă „ ”.

După executarea codului de mai sus, pagina web arată astfel:

Ieșirea de mai sus ilustrează faptul că elementele din bara de navigare sunt acum stilate.

Pasul 4: Adăugați efectul Hover la elementele din bara de navigare

Ca și în rezultatul de mai sus, efectul de trecere cu mouse-ul nu este disponibil pentru elementul din bara de navigare. Pentru a le adăuga pe ambele, selectați „ rubrica ” care este atribuită clasei ”

' etichetă. După aceea, adăugați „ :planare ' selector cu ' act ” clasă pentru a aplica efectul de hover asupra elementelor din bara de navigare:

.act:hover {

frontieră : 2px alb solid;

culoare : Albastru violet;

}

.rubrica {

text- alinia : centru;

marja: 18 % 0px;

}

Explicația codului de mai sus este oferită mai jos:

• Mai întâi, setați „ frontieră ” de tip solid de 2 px și atribuiți un ” alb culoare ”. Împreună cu acesta, setați „ Albastru violet ” culoare numai atunci când mouse-ul este plasat de utilizator pe elementele din bara de navigare.
• Apoi, selectați „ rubrica ” și setați-i alinierea la ” centru ” și oferiți o marjă pentru a face secțiunea să pară mai mare.

După executarea codului de mai sus, aspectul final al antetului arată astfel:

Rezultatul de mai sus arată că antetul este creat folosind HTML și CSS.

Concluzie

În fișierul HTML, eticheta „

” este folosită pentru a crea o secțiune pentru antet. După aceea, utilizatorii pot aplica proprietăți CSS precum umplutură și imagini de fundal pentru a îmbunătăți secțiunea antet. Se aplică tuturor elementelor de antet, cum ar fi o bară de navigare. Pentru a crea o bară de navigare, utilizatorii pot utiliza eticheta „