Come mettere un piè di pagina in una pagina Web

May 14

Come mettere un piè di pagina in una pagina Web


La maggior parte dei siti web contengono piè di pagina con informazioni quali date di copyright, "Chi siamo" le opportunità di informazione e di carriera. Mentre sembra come se dovrebbe essere abbastanza semplice da posizionare oggetti sul fondo della pagina, spesso le informazioni si muoverà a seconda delle dimensioni del browser e la quantità di testo. Utilizzando i fogli di stile a cascata (CSS) e div, è possibile creare un semplice piè di pagina che rimarrà nella parte inferiore della pagina, indipendentemente dalla dimensione della finestra e la quantità dei contenuti.

istruzione

1 Impostare le proprietà altezza del corpo e classe contenitore. Nel foglio di stile CSS impostare il "html" e classi "corpo" a 100 di altezza per cento. Aggiungere una classe di "contenitore" e impostare il min-height al 100 per cento, altezza per l'auto! Importante, altezza al 100 per cento e il margine di 0 negativo auto (altezza piè di pagina).

Ad esempio, "html, body {height: 100%;}" e ".container {min-height: 100%; ! Height: auto importante; height: 100%; margine 0 auto -35px. "

2 Aggiungere due classi per il piè di pagina. Una classe conterrà il piè di pagina attuale, mentre l'altra classe estende i margini oltre la pagina per fare spazio per il piè di pagina. Impostare entrambe queste classi alla stessa altezza. Ad esempio, ".footer {height: 35px;}" e ".extender {height: 35px;}"

3 Fare riferimento al seguente esempio foglio di stile CSS. Copia e incolla il seguente codice nel vostro foglio di stile. Modificare i nomi e l'altezza piè di pagina, se lo desideri.

{Margin: 0;}
html, body {height: 100%;}
.wrapper {min-height: 100%; ! Height: auto importante; height: 100%; margin: 0 auto -35px;}
.footer {height: 35px;}
.extender {height: 35px;}

4 Aggiungere queste classi nella pagina web. Inserire un div per il tag contenitore tra l'apertura e il tag di chiusura per il corpo. Inserire il contenuto della pagina web dopo il tag di apertura del contenitore. Aggiungere un div per la classe Extender dopo tag di chiusura il contenuto. Quindi, chiudere il tag contenitore dopo tag di chiusura del extender. Aggiungere un div per il piè di pagina dopo tag di chiusura del contenitore. Inserire il contenuto del piè di pagina. Quindi, chiudere il tag piè di pagina.

5 Fare riferimento al seguente codice HTML. Copia e incolla il seguente codice nel tuo sito web. Modificare i nomi per riflettere le classi attuali e aggiungere contenuti, se lo desideri.

<Html>

&lt;head>
&lt;link rel=&quot;stylesheet&quot; href=&quot;layout.css&quot; ... />
&lt;/head>
&lt;body>
&lt;div class=&quot;container&quot;>
&lt;p>Web Content&lt;/p>
&lt;div class=&quot;extender&quot;>&lt;/div>
&lt;/div>
&lt;div class=&quot;footer&quot;>
&lt;p>Footer Content &lt;/p>
&lt;/div>
&lt;/body>

</ Html>