September 3
Utilizzo dei blocchi "div", è possibile rendere le pagine Web vengono ridimensionati senza intoppi quando i visitatori del sito ridimensionare il proprio browser. Gli sviluppatori Web si riferiscono ai layout di pagina Web flessibili come layout liquidi. Molte pagine su Internet sono costituiti da colonne disposte in formato tabulare. Per esempio, una barra di navigazione può essere visualizzato sul contenuto principale al centro e sinistra. Una terza colonna opzionale a destra può detenere la pubblicità o altre informazioni. Imparare ad usare "div" blocchi vi aiuteranno a progettare e creare pagine liquidi che si adattano per soddisfare le esigenze dei visitatori del sito.
1 Aprire uno dei documenti pagina web utilizzando Blocco note o un editor HTML.
2 Aggiungere il seguente codice dopo il primo tag "<head>" nel documento:
<Style type = "text / css">
.pageColumn
{
border: punteggiato;
padding-left: 1%;
float: left;
width: 30%;
}
intestazione
{
border-top: 2px solido verde;
clear: both;
}
footer
{
border-top: 1px solid verde;
clear: both;
}
</ Style>
Questo codice crea tre classi CSS. La prima classe, "pageColumns," imposta il layout per tutte le colonne nella pagina. La proprietà "larghezza", fissato al 35 per cento, definisce la larghezza di ciascuna colonna. La proprietà "float" rende ogni colonna sedersi al lato destro della relativa colonna vicina.
3 Aggiungere questo codice dopo che il documento "<body>" tag:
<P id = "header"> Intestazione pagina Goes Here </ p>
<Div class = "pageColumn">
<h3> Colonna 1 </ h3>
<P> Colonna 1 del testo - 1111111111111111111111111111111111111111111111
</ P>
</ Div>
<Div class = "pageColumn">
<h3> Colonna 2 </ h3>
<P> Colonna 1 del testo - 222222222222222222222222222222222222222222222
</ P>
</ Div>
<Div class = "pageColumn">
<h3> colonna 3 </ h3>
<P> Colonna 3 del testo - 333333333333333333333333333333333333333333333
</ P>
</ Div>
<P id = "footer"> Piè di pagina Goes Here </ p>
La prima riga crea l'intestazione della pagina. Il prossimo tre "<div>" blocchi di definire le colonne della pagina. Si noti che ogni "<div>" riferimenti "pageColumn" classe definita nel passaggio precedente. L'ultima riga crea footer della pagina.
4 Salvare il documento HTML e aprirlo nel browser. Si vedrà un colpo di testa nella parte superiore della pagina e un piè di pagina in fondo. Le tre colonne di testo compaiono tra l'intestazione e piè di pagina. Ogni colonna occupa il 30 per cento della larghezza orizzontale del browser.
5 Ridimensionare il browser. Verificare che le colonne ridimensionate in proporzione.