El diseño de CSS requiere que piense en el diseño de su sitio web como un todo, y luego tome las piezas y júntelas. Aprende cómo construir un diseño simple de 3 columnas con CSS.
01 de 09Dibuja tu diseño
Puede dibujar su diseño en papel o en un programa de gráficos. Si ya tiene en mente un armazón de alambre o un diseño aún más extenso, simplifíquelo a los cuadros básicos que conforman el sitio. Este diseño que acompaña a este artículo tiene tres columnas en el área de contenido principal, así como un encabezado y pie de página. Si observa detenidamente, puede ver que las tres columnas no tienen el mismo ancho.
Una vez que haya trazado su diseño, puede comenzar a pensar en las dimensiones. Este diseño de ejemplo tendrá las siguientes dimensiones básicas:
- No más de 900 píxeles de ancho.
- 20 px canal a la izquierda
- 10 px entre columnas y filas
- Columnas de 250px, 300px y 300px de ancho
- La fila superior es de 150px de altura
- La fila inferior es de 100px de altura
Escribir HTML básico / CSS y crear un elemento contenedor
Dado que esta página será un documento HTML válido, comience con un contenedor HTML vacío
Agregue los estilos CSS básicos para poner a cero los márgenes, bordes y rellenos de la página. Si bien hay otros estilos CSS estándar para los nuevos documentos, estos son los mínimos que necesita para obtener un diseño limpio. Agrégalos al encabezado de tu documento:
Para comenzar a construir el diseño, coloque en un elemento contenedor. A veces sucede que puede deshacerse del contenedor más tarde, pero para la mayoría de los diseños de ancho fijo, tener el elemento contenedor facilita la administración en diferentes navegadores web. Así que en el cuerpo pon esto: Y en la hoja de estilo CSS, poner: El contenedor define qué tan ancho será el contenido de la página web, así como los márgenes alrededor del exterior y el relleno en el interior. Para este documento, el contenedor tiene 870 píxeles de ancho con un canal de 20 píxeles a la izquierda. El canal se configura con un estilo de margen, pero el relleno del contenedor se pone a cero para evitar que los elementos sean tan anchos como el contenedor. #envase { ancho: 870px; margen: 0 0 0 20px; / * arriba a la derecha abajo a la izquierda * / relleno: 0; } Si guarda su documento ahora, será difícil ver el contenedor porque no tiene nada en él. Si agrega texto de marcador de posición, podrá ver el elemento contenedor más claramente. La forma en que decida aplicar estilo a la fila del encabezado depende mucho de lo que contenga. Si la fila del encabezado va a tener un gráfico y un encabezado del logotipo, entonces use una etiqueta de título ( El HTML para la fila del encabezado va en la parte superior del contenedor y se ve así: Luego, para establecer los estilos, se agregó un borde rojo en la parte inferior para que pueda ver dónde termina, los márgenes y el relleno se redujeron a cero, el ancho se estableció en 100% y la altura a 150 px: #contenedor h1 { margen: 0; relleno: 0; ancho: 100%; altura: 150px; flotador izquierdo; borde inferior: # c00 sólido 3px; } No olvides flotar este elemento con el flotador: izquierda; propiedad. La clave para escribir diseños CSS es flotar todo, incluso cosas que tienen el mismo ancho que el contenedor. De esa manera, siempre sabes dónde estarán los elementos en la página. Un selector descendiente de CSS aplicó los estilos solo a los elementos H1 que están dentro del elemento #container. Cuando crea un diseño de tres columnas con CSS, debe dividir su diseño en grupos de dos. Así que para este diseño de tres columnas, la columna central y derecha se agrupan y se colocan junto a la columna izquierda en un diseño de dos columnas donde la columna izquierda tiene un ancho de 250 px y la columna derecha tiene un ancho de 610 px (300 cada una para las dos columnas , más 10px para el canalón entre ellos). El HTML se ve así: Ut aliquip ex ea commodo consecuat. Velit esse cillum dolore ut enim ad minim veniam, lorem ipsum dolor sit amet. Reprendidos en voluptuosos ejercicios de ejercicio de la familia. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consecuat. Se utiliza hasta el mínimo tiempo, por lo que se refiere al empleo temporal de ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. El texto del marcador de posición en las columnas hace que sean más visibles al realizar la prueba. El CSS se ve así: #contenedor # col1 { ancho: 250px; flotador izquierdo; } #contenedor # col2outer { ancho: 610px; flotar derecho; margen: 0; relleno: 0; } La columna de la izquierda se desplaza hacia la izquierda, mientras que la otra se desplaza hacia la derecha. Debido a que el ancho total de ambas columnas es de 860 px, hay un margen de 10 px entre ellas. Para crear las tres columnas, agregue dos divs dentro de la segunda columna más ancha, al igual que agregó 2 divs dentro de la columna de contenedor en el último paso. El HTML se ve así: Se utiliza hasta el mínimo tiempo, por lo que se refiere al empleo temporal de ullamco laboris nisi. Ut labore et dolore magna aliqua. Velit esse cillum dolore eu fugiat nulla pariatur. Nam libero tempore, quia voluptas sit aspernatur dicta sunt explicabo.Ullam corporis suscipit laboriosam, magnam aliquam quaerat voluptatem. Itaque earum rerum hic tenurur a sapiente delectus, sed ut perspiciatis unde omnis tempora incidunt ut labore et dolore. Y el CSS se ve así: # col2outer # col2mid { ancho: 300px; flotador izquierdo; } # col2outer # col2side { ancho: 300px; flotar derecho; } Ya que estas dos cajas de 300px de ancho están dentro de una caja de 610px de ancho, habrá nuevamente un canal de 10px entre ellas. Ahora que el resto de la página tiene un estilo, puede agregar en el pie de página. Use un último div con una identificación de "pie de página" y agregue contenido para que pueda verlo. También puede agregar un borde en la parte superior, para que sepa dónde empieza. El HTML: El CSS: #container #footer {
flotador izquierdo;
ancho: 870px;
borde superior: # c00 sólido 3px;
} 08 de 09 Ahora que ha terminado el diseño, puede comenzar a agregar sus propios estilos y contenido personales. Recuerde que los bordes del encabezado y el pie de página se agregaron para mostrar las secciones de diseño, no específicamente para el diseño. Aquí está el documento completo, HTML y CSS: Ut aliquip ex ea commodo consecuat. Ut enim ad minim veniam. Nam libero tempore. Estilo del contenedor
Use una etiqueta de título para el encabezado
) tiene más sentido que usar un
Mi fila de encabezado
Para obtener tres columnas, comience por construir dos columnas
Agrega dos columnas dentro de la segunda columna ancha
Añadir en el pie de página
Agregue en sus estilos personales y contenido
El HTML / CSS final
Mi fila de encabezado
