Come fare una barra laterale con due colonne

April 11

Come fare una barra laterale con due colonne


Una barra laterale può apparire a sinistra oa destra della pagina Web. Inserimento sulla sinistra attira i lettori alla barra laterale quando in primo luogo aprire la pagina Web. Blogs spesso mostrano barre laterali sul lato destro della pagina. Una barra laterale con due colonne che si dà spazio aggiuntivo per visualizzare i collegamenti, pubblicità e delle immagini senza interferire con il contenuto principale. È possibile utilizzare i fogli di stile a cascata (CSS) a galleggiare sidebar sulla tua pagina.

istruzione

1 Avviare un editor di testo, come Blocco note, TextPad o EditPad. Selezionare "File" e "Apri" dal menu e fare doppio clic sul file HTML che si desidera modificare.

2 Inserire il codice seguente tra i tag HEAD. Si crea uno stile per il contenuto e lato bar principale con due colonne. Per regolare la larghezza della barra laterale e contenuti, cambiate pixel all'interno "width."

<Style type = "text / css">

<! -

corpo, html {

margin: 0;

padding: 0;

}

wrapper {

Larghezza: 950 px;

margin: 0 auto;

}

principale {

float: left;

width: 550px;

}

sidebar {

float: left;

width: 350px;

}

column1 {

float: left;

width: 160px;

padding: 2px;

margin: 2px;

border: 1px nero solido;

}

colonna2 {

float: left;

width: 160px;

padding: 2px;

margin: 2px;

border: 1px nero solido;

}

->

</ Style>

3 Inserire il codice seguente tra i tag BODY per visualizzare la barra laterale con colonne sul lato destro della pagina:

<Div id = "wrapper">

<Div id = "principale"> Il contenuto principale del tuo sito va qui ... </ div>

<Div id = "sidebar">

<Div id = "Colonna1"> <p> Contenuto della prima colonna vanno qui ... </ p> </ div>

<Div id = "Column2"> <p> Contenuto della seconda colonna vanno qui ... </ p> </ div>

</ Div>

</ Div>

4 Inserire il codice seguente tra i tag BODY per visualizzare la barra laterale con colonne sul lato sinistro della pagina:

<Div id = "wrapper">

<Div id = "sidebar">

<Div id = "Colonna1"> <p> Contenuto della prima colonna vanno qui ... </ p> </ div>

<Div id = "Column2"> <p> Contenuto della seconda colonna vanno qui ... </ p> </ div>

</ Div>

<Div id = "principale"> Il contenuto principale del tuo sito va qui ... </ div>

</ Div>

5 Sostituire il contenuto tra i tag <div>, come "contenuto della prima barra laterale andare qui .." e "Il contenuto principale del tuo sito va qui ..." con il contenuto che si desidera includere nella pagina Web.

6 Selezionare "File" e "Salva" dal menu per aggiornare il file HTML.


Articoli Correlati