Layout di pagina Web assume due forme: "ice" e "liquido". Un layout di ghiaccio mantiene le sue dimensioni come si ridimensiona la pagina Web. Il contenuto è stato risolto, quindi, come il browser diventa più piccolo, il contenuto diventa oscurato. Un layout liquido cambia forma per adattarsi alla finestra del browser. Come un browser diventa più piccolo, la pagina fuoriuscite contenuto verticalmente. Per ottenere un aspetto liquido, impiegano il tag "div" HTML per scolpire le sezioni della pagina Web e posizionamento tag HTML per organizzare queste sezioni.

Istruzioni

1

Aprite il vostro editor di testo.

2

Iniziare il file HTML.

< html >

< head >

<title>Two Column Liquid Layout with CSS</title>3

Aggiungere CSS per posizionare la colonna di sinistra.

< style type = "text/css" >

#leftcolumn {

position: absolute;

top: 140px;

left: 0;

width: 200px;

}4

Aggiungere CSS per posizionare la colonna di destra.

rightcolumn {

position: absolute;

top: 140px;

padding-left: 220px;

}

</style>

< / head >

5

Aggiungere tag contenuto HTML.

< corpo >

<h1>My Liquid Layout</h1>

<div id="leftcolumn">

<p>Content goes here.</p>

</div>

<div id="rightcolumn">

<p>Content goes here.</p>

</div>

< / body >

< / html >

Consigli & Avvertenze

• È possibile ottenere più sofisticati layout liquido pagina Web utilizzando il tag HTML "galleggiante".