Desarrolladores Web utilizan Cascading Style Sheets para arreglar partes de las páginas Web en diseños complicados con encabezados, columnas y pies de página. Diseños de estilo con CSS tienen etiquetas "div" que el contenido del grupo y les dan anchos y flotadores para crear las columnas se ven en las páginas web en todo el Internet. Primero debe crear la barra lateral en HTML y estilo que el uso de "float: left" para crear a la izquierda la columna usando CSS.
columna
Abra la página Web en el Bloc de notas para que puedas editar el código. Busque el cuerpo principal de los contenidos en el código y se envuelve en las etiquetas "div". Dele a su div un nombre de ID para que pueda hacer referencia a él en CSS más tarde:
div id = "contenido"
h2Content Title/h2
párrafo pA de texto ... / p
/ Div
Debajo del "div" que creó para el contenido principal de la página, agregar un nuevo conjunto de etiquetas "div" para contener el contenido de la barra lateral:
div id = "sidebar"
/ Div
Añadir el contenido que desea que aparezca en la barra lateral entre las nuevas etiquetas "div". Este conjunto de etiquetas necesita un nombre de identificación para que pueda estilo en CSS. Contenido típico barra lateral incluye una lista de enlaces, "Sobre mí" secciones y formas de contacto pequeños, pero se puede añadir lo que quieras con esta sección.
Volver a la parte superior del código y agregar etiquetas "estilo" entre las etiquetas "cabeza" si ves a ninguno allí:
Tipo style = "text / css"
/ Estilo
Agregue el código CSS entre las etiquetas "estilo". También puede colocar el código CSS dentro de una hoja de estilos externa si su sitio web ya se usa.
Seleccione el contenido y divs barra lateral en el código CSS:
# Content {
}
# Sidebar {
}
Cambiar los nombres de "contenido" y "barra lateral" para los nombres de ID que diste tus divs, pero mantener los símbolos de hash como CSS necesita estos para saber buscar nombres de ID en lugar de etiquetas o clases.
Ajuste el ancho de cada div:
# Content {
anchura: 80%;
}
# Sidebar {
anchura: 20%;
}
También puede configurar el ancho en valores de píxeles como "200px" para dar a los anchos fijos divs. El ancho de cada div no puede ir más de 100 por ciento o el número máximo de píxeles para el diseño, pero puede ponerlos por debajo de 100 por ciento para crear espacio para los márgenes o relleno.
Agregue la propiedad "float" de la div barra lateral para que sea aparece junto al div de contenido en lugar de abajo. Ajuste "flotar" a la izquierda cuando se desea colocar la barra lateral en el lado izquierdo del contenido:
# Sidebar {
anchura: 20%;
float: left;
}
Recursos
456 Berea Calle: Simple 2 Columna Diseño CSS
Bueno!
ResponderEliminar