Come fare DIV scorrimento con una CSS pagina Utilizzo

March 23

Come fare DIV scorrimento con una CSS pagina Utilizzo


Nel progettare il vostro sito web, si può avere un contenitore DIV specifico che si desidera rimanere visibile per i visitatori in ogni momento, anche quando sono scorrere su e giù per la pagina. Mentre ci sono molte tecnologie e linguaggi di programmazione che possono essere utilizzati per rendere DIV scorrimento con una pagina, uno dei metodi più semplici e affidabili è nell'uso stile CSS.

istruzione

1 Identificare dove sulla pagina che si desidera che il div contenitore da posizionare. Scegliere dall'alto o dal basso e di sinistra o di destra.

2 Lascia la tua contenitore DIV un ID univoco a fini di styling. Sul HTML della pagina, il tag DIV apertura sarebbe simile a questa:

<Div id = "div_name">

3 Aprire il foglio di stile a cascata e creare una voce per il nuovo contenitore DIV:

div_name {

}

4 Aggiungere lo stile posizione fissa alla voce stile per il nuovo contenitore DIV.

div_name {

position: fixed;
}

5 Aggiungere elementi di stile sinistra / destra per l'immissione stile. Aggiungere un lato all'altro elemento di posizionamento scegliendo un lato per misurare dalla grande distanza sinistra o destra e per posizionare l'elemento da quel lato. Un valore di 0 collocare il contenitore DIV tutta la strada fino a quel lato della pagina. Gli altri valori che possono essere date sono larghezze di pixel (cioè 125 px) o percentuali (pari al 33 per cento). Di seguito è riportato un esempio:

div_name {

position: fixed;
left: 0;
}

6 Aggiungere top / bottom elementi di stile per la voce stile. Aggiungere un su e giù elemento di posizionamento scegliendo un lato per misurare da (superiore o inferiore e la distanza per posizionare l'elemento da quel lato. Un valore di 0 posizionerà il contenitore DIV tutta la strada fino a quel lato della pagina. Altro . I valori che possono essere date sono larghezze di pixel (cioè 125 px) o percentuali (pari al 33 per cento) di seguito è riportato un esempio:

div_name {

position: fixed;
left: 0;
bottom: 25px;
}


Articoli Correlati