Hvordan å holde en statisk Header som beveger seg selv når du blar i HTML

December 22

Når du legger til en header til Hypertext Markup Language (HTML) Web-side, forsvinner dette elementet som du blar nedover i et nettleservindu som standard. Dette er ofte problematisk hvis du har linker eller annen viktig informasjon som må fikses på plass, slik at de alltid er synlige. Ved hjelp av Cascading Style Sheets (CSS) i forbindelse med HTML, kan du holde header statisk så det ikke lenger beveger seg.

Bruksanvisning

1 Start teksteditor programmet og få opp Web-dokument som har overskriften du ønsker å endre.

2 Plasser markøren før slutt </ head> -taggen og skriver følgende CSS-kode:

header {} container {}

</ Style>

Overskriften regelen styrer innholdet i overskriften, mens beholderen stil styrer hoveddelen av websiden.

3 Skriv "stilling: fast;" inne i header regelens klammeparenteser og type "background-color:;" og "height:;" etter det. Skriv en heksadesimal fargeverdi etter background-color attributt, og skriv inn en tallverdi i piksler etter høyden for å definere denne målingen. Å illustrere:

header {stilling: fast; background-color: # FFFF00; height: 100px; }

Den faste stillingen spesifiserer du vil overskriften å holde seg på plass på siden, mens bakgrunnsfargen viser en annen nyanse slik at hodet er synlig som den beveger seg forbi hovedinnhold.

4 Skriv "margin-top:;" inne i beholderen stil og angi en tallverdi i piksler som tilsvarer høyden på spissen. Din komplette CSS nå ser ut som følgende eksempel:

header {stilling: fast; background-color: # FFFF00; height: 100px; } Container {margin-top: 100px; }

</ Style>

Legge til en margin til beholderen regel flytter hovedinnholdet under overskriften.

5 Skriv "<div id =" header ">" før HTML header kode og skriv "</ div>" på slutten. I tillegg skriver du "<div id =" container "> </ div>" etter overskriften og skriv ditt nettsted innhold mellom disse div koder. Å illustrere:

<Div id = "header">
<H1> Dette er overskriften din. </ H1>
</ Div>
<Div id = "container">
<P> Dette er innholdet på siden din. </ P>
</ Div>

6 Lagre filen. Din header er nå statisk.