Latest web development tutorials

il layout HTML

Impaginazione per migliorare l'aspetto del sito è molto importante.

Si prega di progettare accuratamente il layout della pagina.

Esempi

Esempi online

Layout di pagina utilizzando l'elemento <div>
Come utilizzare l'elemento <div> di layout.

layout di utilizzare la pagina <table> elemento
Come utilizzare il <table> elemento di layout.

il layout del sito

La maggior parte dei siti saranno contenuti in una pluralità di colonne (come una rivista o giornale che).

La maggior parte dei siti possono utilizzare i <div> o <table> elementi per creare più colonne. CSS viene utilizzato per posizionare gli elementi, o creare uno sfondo e l'aspetto colorato della pagina.

lampada Anche se siamo in grado di utilizzare il tag tabella HTML per progettare un layout bella, ma il tag table non è raccomandato per l'uso come strumento di layout - non un tavolo strumenti di layout.

Layout HTML - Utilizzando <div> elemento

elemento div è un elemento a livello di blocco utilizzato per raggruppare elementi HTML.

L'esempio seguente utilizza cinque div elementi per creare il layout a più colonne:

Esempi

<! DOCTYPE html> <HTML> <Head> <Meta charset = "utf-8"> <Title> Questo tutorial (w3big.com) </ title> </ Head> <Body> <div id = "container" style = "width: 500px"> <div id = "header" style = "background-color: # FFA500;"> <H1 style = "margin-bottom: 0 ;"> Il titolo principale pagina </ h1> </ div> <div id = "menu" style = "background-color: # FFD700; height: 200px; width: 100px; float: left;"> <B> Menu </ b> <br> HTML <br> CSS <br> JavaScript </ div> <div id = "content" style = "background-color: #eeeeee ; height: 200px; width: 400px; float: left;"> Testo Qui </ div> <div id = "footer" style = "background-color: # FFA500; clear: both; text-align: center;"> Copyright © w3big.com </ div> </ Div> </ Corpo> </ Html>

Prova »

Il codice HTML sopra produce i seguenti risultati:

il layout HTML - utilizzando le tabelle

Utilizzare HTML <table> tag è quello di creare un layout in modo semplice.

La maggior parte dei siti possono utilizzare i <div> o <table> elementi per creare più colonne. CSS viene utilizzato per posizionare gli elementi, o creare uno sfondo e l'aspetto colorato della pagina.

lampada Anche se è possibile utilizzare le tabelle HTML per creare un layout piacevole, ma lo scopo è quello di presentare i dati tabulari tabella - non strumento di layout table!

L'esempio seguente utilizza tre file di due tabelle - la prima e l'ultima riga utilizza attributo colspan per attraversare due:

Esempi

<! DOCTYPE html> <HTML> <Head> <Meta charset = "utf-8"> <Title> Questo tutorial (w3big.com) </ title> </ Head> <Body> <Tabella width = "500" border = "0"> <Tr> <Td colspan = "2" style = "background-color: # FFA500;"> <H1> titolo della pagina principale </ h1> </ Td> </ Tr> <Tr> <Td style = "background-color: # FFD700; width: 100px;"> <B> Menu </ b> <br> HTML <br> CSS <br> JavaScript </ td> <Td style = "background-color: #eeeeee ; height: 200px; width: 400px;"> Testo Qui </ td> </ Tr> <Tr> <Td colspan = "2" style = "background-color: # FFA500; text-align: center;"> Copyright © w3big.com </ td> </ Tr> </ Table> </ Corpo> </ Html>

Prova »

Il codice HTML sopra produce i seguenti risultati:


Layout HTML - Consigli utili

Suggerimento: i più grandi vantaggi di utilizzare i CSS è che se il codice CSS è memorizzato in un foglio di stile esterno, allora il sito sarà più facile da mantenere.Con la modifica di un singolo file, è possibile modificare il layout per tutte le pagine. Per ulteriori informazioni su CSS, visitare la nostra lezione privata di CSS .

Consiglio: A causa creare il layout avanzato richiede molto tempo, utilizzando un modello un breve un'opzione.Attraverso un motore di ricerca è possibile trovare un sacco di modelli di siti web gratuiti (È possibile utilizzare questi layout del sito precompilati, e ottimizzarli).

tag di layout HTML

标签描述
<div> 定义文档区块，块级(block-level)
<span> 定义 span，用来组合文档中的行内元素。