Web design ha fatto molta strada negli ultimi anni, e il buon vecchio standby di tavoli non è più il modo accettato per il layout di un sito web. Anche se l'aspetto sia ancora desiderata, i browser sono più spesso non leggendo le tabelle - o peggio - li stanno leggendo in modo non corretto. E 'meglio usare Cascading Style Sheets (CSS).

Quasi qualsiasi sito web può essere adattato al sito 3 colonna, che è quella che lay out in questo articolo. È quindi possibile aggiungere una barra di navigazione e altri oggetti semplicemente loro e la loro collocazione definizione nella pagina. Continuate a leggere per imparare a stendere una pagina 3 colonne in CSS.

istruzione

1 Aprire un documento di editor di testo e salvarlo come miostile.css.

2 Impostare il margine e padding dell'elemento corpo con il seguente codice. Dato che alcuni browser non di default a zero, essi devono essere impostati fisicamente. Colore deve essere impostato per la stessa ragione di base che non tutti i browser predefinito al bianco. Quello che segue è il codice CSS per l'inizio della pagina: html, body {margin: 0; padding: 0; sfondo: #FFF}.

3 Successivamente, impostare il formato per il corpo del testo. Il codice per questo esempio è: body {font: 76% Arial, sans-serif}.

4 Il comando successivo imposta il margine paragrafo: p {margin: 0 10px 10px}.

5 Il comando successivo darà pagina suo contenitore o sezione principale, all'interno del quale si mettono tutti gli altri pezzi del vostro page.This esempio utilizza il seguente codice: div contenitore # {width: 1024px; altezza: 1800px; margin: 0 auto }.

6 Sul lato sinistro della barra di navigazione, aggiungere una divisione. Il codice è il seguente: div # navigazione {float: left; width: 250px; height: 100%}.

7 Ora definiamo la sezione contenuti della pagina. Questa è la sezione centrale della pagina in cui si aggiunge il contenuto principale: div content # {float: left; width: 700px; height: 1500px}.

8 Per la colonna di destra, si aggiunge il codice simile a questo: div # aggiuntivo {float: right; width: 250px; height: 1500px}.

9 Aggiunta di intestazioni e piè di pagina vengono gestiti nello stesso modo. Il codice piè di pagina per questa pagina sarebbe div # footer {clear: tutti; Larghezza: 1020px; height: 300px}. Aggiungere un'intestazione alla pagina che permette per il vostro logo. Il codice per questa intestazione è: div # intestazione h1 {height: 80px; line-height: 80px; margin: 0;
padding-left: 10px; sfondo: #EEE; color: # 79B30B}.

10 All'interno del file CSS si dovrebbe anche definire i caratteri di intestazione. Essi sono indicati come h1 {color: # ff0000; height: 80px; line-height: 80px;}; h2 attraverso h6 può anche essere definito (questo codice definisce il colore e l'altezza del font).

11 Salvare questo documento e fare riferimento a esso nel documento HTML per tirare gli stili nel tuo sito web.

Consigli e avvertenze

• CSS farà cambiare le cose come i colori e font in tutte le pagine facile e veloce.
• Se si lavora con un modello acquistato, vi sono state arredate con un foglio di stile che è possibile modificare.
• Tutto il codice qui sopra è il codice di esempio. Modificare il codice in base alle proprie dimensioni uniche del sito web. Cioè, le cose quali i colori, altezze e larghezze saranno diverse in base alle proprie preferenze.
• Se si sta modificando un foglio di stile rispetto a costruire da zero, fare una copia di backup del originale prima modifica.