Come fare un Layout DIV / Nwlapcug.com

Il tag di divisione (DIV) fornisce agli sviluppatori di Hyper-Text Markup Language (HTML) con i contenitori che impostare il layout per un modello di sito Web. Utilizzando il tag DIV per creare un modello è chiamato \"table-less CSS. \" significa CSS Cascading Style Sheet. Nelle tabelle sono stati già utilizzate per progettare la modalità di visualizzazione di elementi HTML in una pagina. CSS e DIV tag forniscono uno stile di programmazione più facile, quindi il codice è più pulito. Utilizzando il tag DIV riduce la probabilità di mancano elementi di tabella, che fa sì che il tuo sito Web per produrre errori nel browser del lettore.

Istruzioni

1

Aprire il file HTML con qualsiasi editor di testo. Alla \"body\" tag, aggiungere il seguente codice DIV:

< div id = \ "div_main\" >< / div >
< div id = \ "left_list\" classe = \ "sinistra-inserire" >< / div >
< div id = \ "right_list\" classe = \ "destra-inserire" >< / div >

In questo esempio, \"div_main\" contiene il centro, il contenuto del sito Web principale. L'elenco DIV fornire una barra di navigazione a sinistra e a destra della pagina.

2

Definire la classe per il principale luogo di DIV. il codice di layout di classe all'interno il \"Head\" tag nella parte superiore del tuo HTML pagina di codifica. Il codice seguente imposta il DIV principale al centro della pagina:

< stile tipo = \ "testo/css\" >

div_main () {

margin-left:11.3em

VAI

margin-right:11.3em

VAI

padding-left:0em

VAI

padding-right:0em

VAI
}
< / stile >

3

Formattare la \"left_list\" DIV. siti Web comunemente hanno una barra di navigazione a sinistra. In questo esempio, viene creata una navigazione sinistra DIV. Scorre verticalmente lungo il lato sinistro del browser dell'utente. Utilizzare il seguente codice per formattare il tuo sinistro DIV:

div.Left-elenco {

width:11.3em

VAI

position:absolute

VAI

top:1

VAI

font-size:95%

VAI

padding-left:2%

VAI

padding-right:2%

VAI

margin-left:1

VAI

margin-right:1

VAI

left:0

VAI
}

Inserire questo codice all'interno del \"style\" tag creato nel passaggio due.

4

Impostare il layout per la barra di navigazione destra. Questo crea una barra di navigazione verticale sul lato destro che corrisponde l'altezza e la larghezza del sinistro DIV. Questo fornisce un layout uniforme. Il codice riportato di seguito viene completato il layout del modello DIV:

div.Right-elenco {