Come mantenere una intestazione statico che si muove anche durante lo scorrimento in HTML

November 9

Quando si aggiunge un'intestazione a una pagina Web HyperText Markup Language (HTML), questo elemento scompare come si scorre verso il basso in una finestra del browser di default. Questo è spesso problematico se si dispone di collegamenti o di altre informazioni essenziali che devono essere fissati in posizione in modo che siano sempre visibili. Utilizzando Cascading Style Sheets (CSS) in congiunzione con il codice HTML, è possibile mantenere l'intestazione statica in modo che non si sposta più.

istruzione

1 Avviare l'applicazione editor di testo e far apparire il documento Web che ha l'intestazione che si desidera modificare.

2 Posizionare il cursore prima del tag di chiusura </ head> e digitare il seguente codice CSS:

<Style type = "text / css">

intestazione {} {} contenitore

</ Style>

La regola intestazione gestisce il contenuto del tuo intestazione, mentre lo stile contenitore controlla il corpo principale della pagina Web.

3 Inserire "position: fixed;" tra parentesi graffe della regola di intestazione e di tipo "background-color:;" e "altezza:;" dopo ciò. Inserire un valore esadecimale del colore dopo l'attributo background-color, e digitare un valore numerico in pixel dopo l'altezza per definire questa misura. Illustrare:

intestazione {position: fixed; background-color: # ffff00; altezza: 100px; }

La posizione fissa specifica si desidera che l'intestazione di rimanere sul posto della pagina, mentre il colore di sfondo mostra una sfumatura diversa in modo che il colpo di testa è visibile come si muove oltre il contenuto principale.

4 Tipo "margin-top:;" all'interno del contenitore stile e immettere un valore numerico in pixel che corrisponde l'altezza del vostro colpo di testa. La vostra completa CSS ora appare come il seguente esempio:

<Style type = "text / css">

intestazione {position: fixed; background-color: # ffff00; altezza: 100px; } Contenitore {margin-top: 100px; }

</ Style>

L'aggiunta di un margine per la regola del contenitore si muove il contenuto principale sotto l'intestazione.

5 Inserire "<div id =" header ">" prima del codice di intestazione HTML e digitare "</ div>" alla fine. Inoltre, digitare "<div id =" container "> </ div>" dopo l'intestazione e immettere il contenuto del sito web tra questi tag div. Illustrare:

<Div id = "header">
<H1> Questa è l'intestazione. </ H1>
</ Div>
<Div id = "container">
<P> Questo è il tuo contenuto della pagina. </ P>
</ Div>

6 Salvare il file. L'intestazione è ormai statico.