-
Cómo hacer una barra lateral con dos columnas
-
Una barra lateral puede aparecer a la izquierda oa la derecha de su página Web. Si lo coloca a la izquierda atrae a los lectores a la barra lateral cuando se abre por primera vez la página Web. Blogs a menudo muestran las barras laterales en el lado derecho de la página. Una barra lateral con dos columnas que da espacio adicional para mostrar enlaces, anuncios e imágenes sin interferir con su contenido principal. Puede utilizar hojas de estilo en cascada (CSS) para flotar la barra lateral en su página.Instrucciones
1 Iniciar un editor de texto, como el Bloc de notas, TextPad o EditPad. Seleccione "Archivo" y "Abrir" en el menú y haga doble clic en el archivo HTML que desea modificar.
2 Inserte el siguiente código entre la etiqueta HEAD. Se crea un estilo para su principal barra de contenido y lateral con dos columnas. Para ajustar la anchura de la barra lateral y el contenido, cambie los píxeles dentro de "ancho".
<Style type = "text / css">
<! -
cuerpo, html {
margin: 0;
padding: 0;
}
envoltorio {
Ancho: 950 píxeles;margin: 0 auto;
}
principal {
flotador izquierdo;Anchura: 550px;
}
{barra lateral
flotador izquierdo;Anchura: 350px;
}
column1 {
flotador izquierdo;Anchura: 160px;
padding: 2px;
margen: 2px;
frontera: 1px solid negro;
}
columna2 {
flotador izquierdo;Anchura: 160px;
padding: 2px;
margen: 2px;
frontera: 1px solid negro;
}
->
</ Style>
3 Inserte el siguiente código entre la etiqueta BODY para mostrar la barra lateral con las columnas en el lado derecho de la página:
<Div id = "contenedor">
<Div id = "principal"> El contenido principal de su sitio web va aquí ... </ div>
<Div id = "barra lateral">
<Div id = "column1"> <p> El contenido de la primera columna vaya aquí ... </ p> </ div>
<Div id = "columna2"> <p> El contenido de la segunda columna van aquí ... </ p> </ div>
</ Div>
</ Div>
4 Inserte el siguiente código entre la etiqueta BODY para mostrar la barra lateral con columnas en el lado izquierdo de la página:
<Div id = "contenedor">
<Div id = "barra lateral">
<Div id = "column1"> <p> El contenido de la primera columna vaya aquí ... </ p> </ div>
<Div id = "columna2"> <p> El contenido de la segunda columna van aquí ... </ p> </ div>
</ Div>
<Div id = "principal"> El contenido principal de su sitio web va aquí ... </ div>
</ Div>
5 Sustituir el contenido entre las etiquetas <div>, tales como "El contenido de la primera barra lateral van aquí .." y "El contenido principal de su sitio web va aquí ..." con el contenido que desea incluir en su página Web.
6 Seleccione "Archivo" y "Guardar" en el menú para actualizar el archivo HTML.