Maggior parte dei siti Web contengono piè di pagina con informazioni quali le date di copyright, "chi siamo" informazioni e opportunità di carriera. Anche se sembra come se dovrebbe essere abbastanza semplice posizionare gli elementi nella parte inferiore della pagina, spesso le informazioni si sposta a seconda delle dimensioni del browser e la quantità di testo. Utilizzando fogli di stile CSS (CSS) e div, è possibile creare un piè di pagina semplici che rimarrà nella parte inferiore della pagina indipendentemente dalla dimensione della finestra e la quantità di contenuto.
Istruzioni
1
Impostare il corpo le proprietà height e contenitore di classe. Nello stile CSS di fogli le classi "html" e "corpo" all'altezza del 100 per cento. Aggiungere una classe di "contenitore" e impostare l'altezza minima al 100%, altezza automatica! importante, altezza al 100 per cento e margine su 0 auto negativa (altezza del piè di pagina).
Ad esempio "html, body {altezza: 100%;}" e "container {min-altezza: 100%; Altezza: auto! important; Altezza: 100%; margine 0 auto - 35px. "
2
Aggiungere due classi per il piè di pagina. Una classe conterrà il piè di pagina effettivi, mentre l'altra classe estende i margini oltre la pagina per fare spazio a piè di pagina. Entrambe queste classi impostata la stessa altezza. Ad esempio, ".footer {altezza: 35px;}" e ".extender {altezza: 35px;}"
3
Fare riferimento al seguente esempio di foglio di stile CSS. Copiare e incollare il seguente codice nel foglio di stile. Modificare i nomi e l'altezza del piè di pagina come desiderato.
{margin: 0;}
HTML, body {altezza: 100%;}
.Wrapper {min-altezza: 100%; height: auto! important; altezza: 100%; margin: 0 auto - 35px;}
.footer {altezza: 35px;}
.Extender {altezza: 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. Immettere il contenuto della pagina web dopo il tag di apertura di contenitore. Aggiungere un elemento div per la classe extender dopo il tag di chiusura dei contenuti. Quindi, chiudere il tag contenitore dopo il tag di chiusura dell'extender. Aggiungere un elemento div del piè di pagina dopo il tag di chiusura del contenitore. Immettere il contenuto del piè di pagina. Quindi, chiudere il tag di piè di pagina.
5
Consultare il seguente codice HTML. Copiare e incollare il seguente codice nel tuo sito web. Modificare i nomi per riflettere le lezioni reali e aggiungere contenuto come desiderato.
< html >
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="container">
<p>Web Content</p>
<div class="extender"></div>
</div>
<div class="footer">
<p>Footer Content </p>
</div>
</body>
< / html >