In HTML, è possibile utilizzare il tag "div" per creare una varietà di contenitori è possibile in uso volta per visualizzare le barre di navigazione, suggerimenti, strumenti di ricerca, contenuti o qualsiasi cosa si possa immaginare. Il contenitore div è compatibile con molti stili CSS per dare funzionalità dinamica e permettono di fondere nel design circostante o sembrano essere 3D. Ottenere un div di adeguamento alla fine di una pagina Web in qualsiasi momento può essere difficile con l'uso di HTML convenzionale. Per ottenere questo trucco, utilizzare l'attributo CSS "posizione".

istruzione

1 Aprire il documento HTML, e posizionare il cursore alla fine del suo sito web, appena sopra il </ body> tag di chiusura. Inserisci il tuo primo tag div e dargli un ID univoco:

<Div id = "footer">

Questo div ancorerà il suo contenuto al fondo della pagina - anche se si ridimensiona la finestra.

2 Inserisci il tuo secondo div al di sotto della prima, e dare il proprio ID univoco:

<Div id = "footer">
<Div id = "footerbar">

Questa seconda div conterrà il vostro elemento di design come ad esempio una barra di navigazione, banner, finestra di messaggio o link social media.

3 Creare un nuovo stile CSS per il primo div, e dargli una posizione di "fisso" e una distanza inferiore di 0 pixel. È inoltre necessario impostare la larghezza a "100%" per tenere conto per il ridimensionamento della finestra. Per esempio:

footer {

width: 100%;
position: fixed;
bottom: 0px;
}

4 Aggiungere un secondo di stile CSS per il secondo div, e lo stile è come si desidera. Se si desidera che il div al centro, è necessario dare un margine di auto. Un esempio di uno stile di collegamento-bar sarebbe:

footerbar {

Altezza: 38px;
width: 980px;
margin: 0 auto; // Centra la barra di
background-color: # 000000; // Rende il nero di sfondo
border: 1px solid # 333; dà un bordo grigio scuro
box-shadow: -1px -1px 5px # 1F1F1F; // Crea un ombra sottile
border-radius: 5px 5px; // Crea angoli arrotondati

Il "background-color" attributo sopra, in combinazione con l'altezza e la larghezza, creerà una barra nera 38 pixel di altezza e 980 pixel di larghezza. L'attributo "confine" dà la barra di un bordo di colore grigio scuro, mentre l'attributo "box-shadow" darà un ombra sottile, lungo la parte superiore e laterale per aiutare a risaltare. La variabile "border-radius" crea gli angoli arrotondati ed è un esempio di uno dei tanti stili CSS è possibile applicare opzionalmente al vostro div fondo.

Consigli e avvertenze

• Durante la scrittura di stili CSS, ricordarsi di aggiungere le variabili per tutti i browser. Ad esempio, la variabile piralide raggio è una variabile CSS3 che è compatibile solo con le versioni più recenti del browser. Per renderlo compatibile con i vecchi browser, è necessario duplicare la variabile usando "-moz-border-radius" e "-webkit-border-radius" versioni in modo da precedenti di Firefox, Safari e Opera sono in grado di rendere in modo corretto.