Nwlapcug.com


Come creare un Layout fluido Web

Come creare un Layout fluido Web


Layout fluido web si riferiscono alla capacità di un sito web per riempire il 100% di schermo del browser indipendentemente dalla risoluzione dello schermo, o il dispositivo su cui visitatori si Mostra (ad esempio, smart phone o PDA). Questo articolo vi darà i passaggi di base per creare un layout fluido a tre colonne standard.

Istruzioni

1Come creare un Layout fluido Web


Creare il codice HTML di base per la tua pagina web. Nel tag < head >, aggiungere un tag < link > che fa riferimento a file CSS esterni. Utilizzare i tag < div > per definire l'intestazione del tuo sito (che conterrà la navigazione del sito titolo e top), piè di pagina e la sinistra, centro e colonne contenute a destra. Assicurarsi che le etichette di colonna < div > sono elencate nell'ordine in cui compaiono nell'immagine, altrimenti le colonne galleggiante visualizzerà nella posizione errata quando si visualizza la pagina in un browser.

2Come creare un Layout fluido Web


Creare un file CSS esterno con lo stesso titolo che è definito nel passaggio 1. Impostare i margini di html e imbottitura su "0". Questo assicura che gli elementi appropriati < div > espanderà attraverso lo schermo intero browser.

3Come creare un Layout fluido Web


Creare l'intestazione di CSS. Si desidera che l'intestazione per occupare l'intera larghezza dello schermo, quindi non si specifica una larghezza. I browser eseguirà il rendering della larghezza come 100 per cento per impostazione predefinita. Utilizzare "em" per "imbottitura" anziché pixel fisso in modo che l'imbottitura fluidamente si adatta allo schermo dell'utente.

4Come creare un Layout fluido Web


Creare elementi di CSS per le tre colonne. Nella colonna di sinistra, aggiungere un "galleggiante: sinistra;" elemento e rendono la larghezza "200px." Nella colonna di destra, impostare "galleggiare" a "destra" e rendere la larghezza "200px." I galleggianti in modo che le colonne di destra e sinistra soggiorno a sinistra e a destra, rispettivamente. Nella colonna centrale, impostare i margini sinistro e destro per "215px" in modo da mantenere tutti i tag di tre colonna < div > allineati orizzontalmente.

5Come creare un Layout fluido Web


Creare il piè di pagina CSS. CSS per il piè di pagina è la stessa come l'intestazione, ad eccezione del fatto è necessario aggiungere un "chiaro: entrambi;" elemento ad esso. Questo impone il piè di pagina < div > per eseguire il rendering sempre nella parte inferiore della schermata del browser e assicura che nessuno dei tag colonna < div > rendering a sinistra o a destra di esso.

6

Aprire il file HTML in un browser web. Anche se questo layout fluido funziona in Firefox e Internet Explorer 8, è possibile testare il tuo sito Web in quanto molti browser come è possibile per garantire che il pubblico più vasto possibile possibile visualizzarli.