Una barra laterale possa essere visualizzati a sinistra o a destra della tua pagina Web. Posizionandola sulla sinistra attira lettori per la barra laterale quando essi innanzitutto aprire la pagina Web. Blog spesso visualizzare barre laterali sul lato destro della pagina. Una barra laterale con due colonne ti dà ulteriore camera per visualizzare link, pubblicità e immagini senza interferire con il vostro contenuto principale. È possibile utilizzare fogli di stile CSS (CSS) a galleggiare sidebar sulla tua pagina.
Istruzioni
1
Avviare un editor di testo, ad esempio Blocco note, TextPad o EditPad. Selezionare "File" e "Apri" dal menu e fare doppio clic il file HTML che si desidera modificare.
2
Inserire il seguente codice tra i tag HEAD. Crea uno stile per il contenuto principale e la barra laterale con due colonne. Per regolare la larghezza della barra laterale e del contenuto, modificare i pixel all'interno di "larghezza".
< style type = "text/css" >
<!...
corpo, html () {
margin: 0;
padding: 0;
}
Wrapper () {
Larghezza: 950px;
auto di margin: 0;
}
Main {
float: left;
Larghezza: 550px;
}
Sidebar () {
float: left;
Larghezza: 350px;
}
Colonna1 {
float: left;
Larghezza: 160px;
padding: 2px;
margin: 2px;
border: 1px solid black;
}
Colonna2 {
float: left;
Larghezza: 160px;
padding: 2px;
margin: 2px;
border: 1px solid black;
}
-->
< / stile >
3
Inserire il seguente codice tra i tag BODY per visualizzare la barra laterale con colonne sul lato destro della tua pagina:
< div id = "wrapper" >
< div id = "main" > il contenuto principale del tuo sito web qui va... < / div >
< div id = "barra laterale" >
< div id = "Colonna1" >< p > contenuto della prima colonna Vai qui... </p >< / div >
< div id = "Colonna2" >< p > contenuto della seconda colonna Vai qui... </p >< / div >
< / div >
< / div >
4
Inserire il seguente codice tra i tag BODY per visualizzare la barra laterale con colonne sul lato sinistro della tua pagina:
< div id = "wrapper" >
< div id = "barra laterale" >
< div id = "Colonna1" >< p > contenuto della prima colonna Vai qui... </p >< / div >
< div id = "Colonna2" >< p > contenuto della seconda colonna Vai qui... </p >< / div >
< / div >
< div id = "main" > il contenuto principale del tuo sito web qui va... < / div >
< / div >
5
Sostituire il contenuto tra i tag < DIV >, ad esempio "Contenuto della barra laterale prima andare qui.." e "il contenuto principale del tuo sito Web va qui..." con il contenuto che si desidera includere nella pagina Web.
6
Selezionare "File" e "Salva" dal menu per aggiornare il file HTML.