November 15
layout web fluidi si riferiscono alla capacità di un sito web per compilare il 100 per cento di schermo di un browser web a prescindere dalla risoluzione dello schermo, o il dispositivo su cui i visitatori vedono (come PDA o smart phone). Questo articolo vi darà i passi base per creare un layout fluido a tre colonne standard.
Creare l'HTML di base per la tua pagina web. Nel tag <head>, aggiungere un tag <link> che fa riferimento il file CSS esterno. Utilizzare <div> tag per definire intestazione del sito (che conterrà il titolo del sito e la navigazione in alto), piè di pagina, e la sinistra, il centro e le colonne giusto contenuto. Assicurarsi che <div> tag vostra colonna sono elencati nell'ordine che compaiono nell'immagine, oppure le colonne galleggianti verranno visualizzati nella posizione sbagliata quando si visualizza la pagina in un browser.
2
Creare un file CSS esterno con lo stesso titolo definito al punto 1. Impostare i margini html e imbottitura a "0" Questo assicura che i <div> elementi appropriati si espanderà su tutta la schermata del browser.
3
Creare l'intestazione CSS. Si desidera che il colpo di testa di occupare l'intera larghezza dello schermo, in modo da non si specifica una larghezza. I browser renderanno la larghezza del 100 per cento per impostazione predefinita. Utilizzare "em" per "imbottitura" piuttosto che pixel fissi in modo che l'imbottitura si adatta in modo fluido a schermo dell'utente.
4
Creare elementi CSS per i vostri tre colonne. Nella colonna di sinistra, aggiungere un "float: left;" elemento e rendere la larghezza "200px". Nella colonna di destra, impostare "float" a "destra" e rendere la larghezza "200px". I galleggianti assicurano che le colonne di sinistra e destra rimangono a sinistra e destra rispettivamente. Nella colonna centrale, impostare i margini destro e sinistro a "215px" in modo da mantenere tutti e tre colonne <div> tag allineate orizzontalmente.
5
Creare il CSS piè di pagina. CSS per il piè di pagina è la stessa intestazione, tranne che è necessario aggiungere un "clear: both;" elemento ad esso. Questo costringe il piè <div> di rendere sempre nella parte inferiore di una schermata del browser, e assicura che nessuna colonna <div> tag rendering a sinistra oa destra.
6 Aprire il file HTML in un browser Web. Anche se questo layout fluido funziona in Firefox e Internet Explorer 8, testare il tuo sito web in quanto molti browser come si può garantire che il maggior numero possibile di essi possono visualizzare.