September 9
Gli sviluppatori Web utilizzano fogli di stile CSS per organizzare le parti di pagine Web in layout complessi con intestazioni e piè di pagina, colonne. Layout arredate con take CSS "<div>" tag che i contenuti del gruppo insieme e dare loro larghezze e galleggia per creare le colonne visti sulle pagine Web tutti su Internet. È necessario innanzitutto creare la tua barra laterale in HTML e stile utilizzando "float: left" per creare una colonna di sinistra usando i CSS.
1 Aprire la pagina Web in Blocco note in modo da poter modificare il suo codice. Individuare il corpo principale dei contenuti nel codice e avvolgerlo in "<div>" tag. Lascia la tua div un nome ID in modo da poter fare riferimento a esso in CSS seguito:
<Div id = "content">
<H2> Contenuti Titolo </ h2>
<P> Un paragrafo di testo ... </ p>
</ Div>
2 Qui di seguito il "<div>" creato per il contenuto principale della pagina, aggiungere una nuova serie di "<div>" tag per contenere il contenuto della barra laterale:
<Div id = "sidebar">
</ Div>
Aggiungere qualsiasi contenuto che si desidera visualizzare nella barra laterale tra le nuove "<div>" tag. Questo insieme di tag ha bisogno di un nome di ID in modo da poter stile in CSS. il contenuto della barra laterale tipico include liste di link, "Chi sono" sezioni e moduli di contatto piccola, ma è possibile aggiungere qualsiasi cosa che ti piace di questa sezione.
3 Torna alla parte superiore del codice e aggiungere "<style>" tag tra i "<head>" tag se si vede nessuno lì:
<Style type = "text / css">
</ Style>
Aggiungere il codice CSS tra i "<style>" tag. È anche possibile inserire il codice CSS all'interno di un foglio di stile esterno se il vostro sito web utilizza già uno.
4 Selezionare sia il contenuto e div sidebar nel codice CSS:
contenuto {
}
sidebar {
}
Modificare il "contenuto" nomi e "barra laterale" per i nomi di ID hai dato il tuo div, ma mantenere i simboli hash come CSS ha bisogno di questi per sapere per cercare i nomi di identità, piuttosto che i tag o classi.
5 Impostare la larghezza di ogni div:
contenuto {
width: 80%;
}
sidebar {
width: 20%;
}
È inoltre possibile impostare la larghezza di valori dei pixel come "200px" per dare il div larghezza fissa. La larghezza di ogni div non può andare oltre il 100 per cento o il numero massimo di pixel per il vostro disegno, ma è possibile impostare di sotto del 100 per cento per creare spazio per i margini o imbottitura.
6 Aggiungere la proprietà "float" al div barra laterale per renderlo visualizzare accanto al div contenuto piuttosto che di seguito. Impostare "float" a sinistra quando si desidera posizionare la barra laterale sul lato sinistro del contenuto:
sidebar {
width: 20%;
float: left;
}