' o ' Les etiquetes ' també es poden utilitzar, però és una bona pràctica utilitzar les etiquetes ' ' etiqueta. A continuació, assigneu un ' capçalera ” classe per aplicar estils CSS a la secció de capçalera. Després d'això, afegiu el '

” etiqueta-hi i assigna-li una classe de “ encapçalament ” per mostrar el contingut “Benvingut a Linuxhint!”:

classe = 'capçalera' >

< h1 classe = 'encapçalament' > Benvingut a Linuxhint! < / h1 >

< / capçalera>

Després d'això, seleccioneu ' ” etiqueta classe i assigneu els estils següents:

---

---

.capçalera {

imatge de fons: url ( '../bg.jpg' ) ;

fons- mida : coberta;

background-repeat: sense repetició;

color : fum blanc;

posició de fons: superior;

farciment: 0px 20px 20px 20px;

}

L'explicació del codi anterior s'esmenta a continuació:

• Primer, configureu la imatge ' bg.jpg ' com a fons per a la secció de capçalera utilitzant el ' imatge de fons ' propietat.
• A continuació, el ' mida de fons ' i ' fons-repetició ” s'utilitzen per establir la mida de la imatge i aturar la repetició de la imatge, respectivament.
• Després d'això, configureu el color del text i la posició de la imatge a la part superior amb l'ajuda de ' color ' i ' posició de fons ” propietats.
• Al final, el ' farciment La propietat s'utilitza per establir un espai entre el contingut de la capçalera i la vora.

Després d'executar el codi anterior, la pàgina web té aquest aspecte:

La sortida anterior mostra que s'ha creat la secció de capçalera i s'hi apliquen estils CSS.

Pas 2: creeu una barra de navegació

La capçalera també pot contenir una barra de navegació en la majoria dels casos. Per a la creació de la barra de navegació, l'HTML ' ” L'etiqueta pot ser molt útil. Per això, afegiu elements de la barra de navegació amb ' ” etiquetes i assigneu una classe de “ actuar ”:

classe = 'capçalera' >



< a classe = 'actuar' href = '#' >Casa< / a >

< a classe = 'actuar' href = '#' >Serveis< / a >

< a classe = 'actuar' href = '#' >Sobre nosaltres< / a >

< a classe = 'actuar' href = '#' >Contacteu amb nosaltres< / a >

< a classe = 'actuar' href = '#' >Nous arribats< / a >

< / no>

< br >< br >

< h1 classe = 'encapçalament' > Benvingut a Linuxhint! < / h1 >

< / capçalera>

Després d'executar el codi anterior, la pàgina web té aquest aspecte:

La sortida anterior il·lustra que els elements de la barra de navegació ' Casa ”, “ Serveis ”, “ Sobre nosaltres ”, “ Contacta amb nosaltres ' i ' Noves arrivades ” s'han creat.

Pas 3: apliqueu estils als elements de la barra de navegació

Per dissenyar els elements de la barra de navegació, seleccioneu ' actuar ” classe i assigneu les propietats d'estils CSS següents:

.actuar {

text-decoració: cap;

color : blanc;

visualització: bloc;

farciment: 15 píxels;

Font- mida : gran;

flotar: esquerra;

marge: 0px 20px;

}

L'explicació del codi anterior és:

• En primer lloc, el ' text-decoració ” s'estableix en “cap” per eliminar l'estil predefinit del “ ' etiqueta.
• Per millorar la visibilitat del text per a l'usuari, el ' blanc ' i ' gran ' es proporcionen els valors ' color ' i la ' mida de la font ' propietat.
• Després d'això, el ' visualització ' i ' flotar Les propietats ajuden a la ” per aparèixer a la mateixa línia.
• Al final, el ' farciment ' i ' marge Els valors de propietats s'utilitzen per crear espai entre cada etiqueta ' '.

Després d'executar el codi anterior, la pàgina web té aquest aspecte:

La sortida anterior il·lustra que ara els elements de la barra de navegació tenen estil.

Pas 4: afegiu l'efecte Hover als elements de la barra de navegació

Com a la sortida anterior, l'efecte de plaça no està disponible a l'element de la barra de navegació. Per afegir tots dos, seleccioneu ' encapçalament ” classe assignada a la “

' etiqueta. Després d'això, afegiu el ' : flotar ' selector amb el ' actuar ”classe per aplicar l'efecte de desplaçament sobre els elements de la barra de navegació:

.actuar: flotar {

frontera : 2px blanc sòlid;

color : blau violeta;

}

.encapçalament {

text- alinear : centre;

marge: 18 % 0px;

}

L'explicació del codi anterior es proporciona a continuació:

• Primer, configureu el ' frontera ' d'un tipus sòlid de 2 px i assigneu un ' blanc ' color ”. Juntament amb ell, configureu el ' blau violeta ” color només quan l'usuari posa el ratolí sobre els elements de la barra de navegació.
• A continuació, seleccioneu ' encapçalament ” classe i establiu la seva alineació a “ centre ” i proporcioneu algun marge per fer que la secció sembli més gran.

Després d'executar el codi anterior, l'aspecte final de la capçalera és el següent:

La sortida anterior mostra que la capçalera es crea amb HTML i CSS.

Conclusió

Al fitxer HTML, l'etiqueta '

' s'utilitza per crear una secció per a la capçalera. Després d'això, els usuaris poden aplicar propietats CSS com el farciment i les imatges de fons per millorar la secció de la capçalera. S'aplica a tots els elements de capçalera, com ara una barra de navegació. Per crear una barra de navegació, els usuaris poden utilitzar l'etiqueta '