Come costruire una base di layout CSS
Progettare senza tabelle utilizzando layout CSS sta rapidamente diventando il nuovo standard sul Web, perché i benefici di cui al mio precedente articolo. Browser Web utilizzato in questi giorni sono ora in grado di rendere le pagine web proficiently. In questo articolo vorrei tentare di creare una base di layout CSS 2 colonna che è possibile utilizzare per la futura progettazione projects.Web Pagina: http://www.isitebuild.com/css/css-layout.html foglio di stile: http://www.isitebuild.com/css/stylesheet.htm1. Dividi la tua pagina in sezioni - il tag div id ti permette di creare divisioni distinte sulla tua pagina web. Essi sono identificati con un ID univoco. È quindi possibile aggiungere uno stile (selettore CSS), che si applica in particolare al div di tale id. Ricordati di includere il DOCTYPE (per rendere la tua pagina in modo accurato i browser) e meta-tag (consente spider dei motori di ricerca per le pagine). Involucro: è il div che avvolge tutte le altre divs come un contenitore per gli elementi della pagina. intestazione: definisce il banner in alto della pagina principale: definisce il contenuto principale della pagina nav: definisce la navigazione del footer della pagina: definisce il piè di pagina e di navigazione secondaria del pagina2. Crea il codice CSS - il codice CSS stili pagina come un centro di layout CSS 2 colonna con una barra di navigazione e un piè di pagina. Il div # wrapper stile crea il centro casella che agisce come un contenitore per il resto del contenuto della pagina. La larghezza: 80% regola imposta la larghezza del div. Il background-color: # FFFFFF regola crea uno sfondo bianco per il div. Il margin-top: 50px e margin-bottom: 50px regole di creare uno spazio di 50 pixel per la margini superiore e inferiore per il div itself.The centro modo corretto di un blocco a livello di elemento con i CSS è quello di impostare margin-left: auto e margin-right: auto. Questo incarica il browser in modo da calcolare automaticamente i margini pari per entrambe le parti, quindi la centratura div. Il confine: thin solid # 000000 regola aggiunge un bordo attorno esterno div. Il resto del codice CSS stili il divs per l'intestazione, piè di pagina, nav, e le principali content.The div # header e footer div # stili impostare i margini e padding per coloro divs. Inoltre, div # intestazione include il text-align: center regola per centrare il testo, e div # footer include il border-top: thin solid # 000000 regola per creare un confine lungo il bordo superiore del div per sostituire la regola orizzontale sopra il piè di pagina nella tabella basata sulla layout.The div # nav div # principale e gli stili creare le due colonne in mezzo al centro casella. Nel div # nav stile, il float: left regola spinge il div al lato sinistro del suo elemento genitore (il wrapper div), e la larghezza: il 25% definisce la regola della larghezza div al 25 per cento delle madri elemento. Con il nav div lanciata a sinistra e una serie limitata di larghezza, che lascia spazio per le principali div per spostarsi in alto a destra del nav div, creando in tal modo le due colonne effetto. Il div # principale stile include il margin-left: 30% per mantenere il testo principale allineati in una colonna pulita invece di diffusione al di sotto della colonna nav. Le principali div del margine sinistro è impostato su un valore leggermente superiore alla larghezza del foglio nav div.Style http://www.isitebuild.com/css/stylesheet.htmIf collegamenti sono collocate sulla pagina perché erediteranno le stesse proprietà di cui sopra .. blu link che aleggia al rosso. Che cosa succede se si desidera creare un altro insieme di link che sono di un colore diverso e per aver superato il mouse su di loro sono underlined.4. Crea il fondo di navigazione - per includere in questa sezione della pagina, io uso div # footer e il codice ogni link di conseguenza. Per fare l'elenco andare orizzontalmente usare: display: inline; ora che ho finito di creare il mio foglio di stile Voglio accorciare il codice sulla pagina di collegamento al mio foglio di stile esterno. Ecco come: 4. Crea un foglio di stile esterno - copiare e incollare tutto il codice CSS (senza questi tag:) in blocco note e l'etichetta è qualcosa come "foglio di stile". Luogo questo foglio di stile tra i tag head del vostro Web page.This sarà ridurre il codice sulla tua pagina in modo da caricare più velocemente i motori di ricerca più facilmente il vostro Web PAGINA REGOLAMENTARE.4 ragno. Aggiungi contenuti alla tua pagina - dopo aver avuto la tua pagina cercando correttamente, è possibile aggiungere più contenuto per esso. Adeguamenti può essere fatto facilmente a qualsiasi stile sulla pagina (o l'intero sito) con la semplice modifica di uno stile sheet.5. Carica il tuo file - essere sicuro di caricare le tue pagine web e dei fogli di stile per la directory principale del tuo server.6. Valida il codice - assicurarsi di convalidare il codice XHTML: http://validator.w3.org/ e css codice: http://jigsaw.w3.org/css-validator/ e fare le correzioni dove necessary.7. Verificare la compatibilità del browser e la risoluzione dello schermo - verificare che la pagina rende bene nel popolare browser (IE6, NN7, Firefox) Se si stanno cominciando layout con i CSS, applicare poi lentamente facendo piccole modifiche alle tue pagine vale a dire la creazione di uno stile foglio per la vostra principale solo le intestazioni e caratteri. Come si diventa più familiarità con i CSS si possono eventualmente costruire il vostro futuro tutti i siti con i CSS layouts.Resources: Base layout CSS http://www.isitebuild.com/css/css-layout.htmlCSS http://www.isitebuild.com/css/stylesheet.htmBenefits di stile CSS http://www.isitebuild.com/css/index. htmHerman Drost è la Certified Internet Webmaster (CIW) Proprietario ed autore di http://www.iSiteBuild.com accessibile Sito Web Design e Web Hosting. Iscriviti al suo "Marketing Suggerimenti" newsletter per più articoli originali. mailto: subscribe@isitebuild.com. È possibile leggere
Fonte dell'articolo: Messaggiamo.Com
Related:
» Seo Elite: New Seo Software!» AntiSpywareBOT
» Reverse Mobile
» Error Nuker
Webmaster prendi il Codice Html
Aggiungi questo articolo al tuo sito ora!
Webmaster invia i tuoi Articoli
Nessuna registrazione richiesta. Compila il form e i tuoi articoli sono nella Directory di Messaggiamo.Com
