Continuación de la sección anterior

Para el diseño de dos columnas, hay una página HTML y un script CSS ya creado para ti. La página HTML está en la carpeta extra_files/layouts que vino con este curso, y el script CSS está en la carpeta extra_files/css ( (etiqueta_13) dos_col_estilo.css ).

(Si aún no tienes los archivos extra, la ubicación de la descarga está aquí, bajo el título Diseño Web - Nuevo Curso : Descargar los archivos extra necesarios para este curso (No necesitas las descargas para el viejo curso.)

Abre primero la página HTML y echa un vistazo al código. La página se llama layout_two_col.html , y el código se ve así:

Un diseño de dos columnas usando HTML5 y CSS

¡El código es idéntico a la disposición de una columna! (Bueno, acepte por un segundo artículo añadido.)

Cuando la página se ve en un navegador, se ve así:

Un diseño de dos columnas usando HTML5 y CSS

La primera columna contiene la barra de navegación. Pero no tiene por qué. Puede todavía tienen una barra de navegación en la parte superior. La primera columna puede entonces contener cualquier cosa que te guste: ofertas especiales, noticias, entradas anteriores en el blog, etc.

La segunda columna es para el contenido principal de la página. Aquí tenemos dos artículos. De nuevo, los colores de fondo son sólo para que puedas ver cada sección.

Abre el archivo CSS de estilo dos_col y echa un vistazo al código. Compara a la disposición de una columna. De nuevo, no hay tanta diferencia.

La parte que mueve la barra de navegación a la primera columna es el flotador : izquierda en la clase NAV, y el display: bloque en la clase de lista NAV. Luego se juega con los anchos y las alturas para obtener el aspecto que se desea.

Ejercicio
Juega con los diferentes valores de CSS y mira lo que pasa cuando recargas la página. Para este ejercicio, es mejor copiar nuestro archivo en su propio HTML carpetas, de esa manera dejarás el original intacto.

Es un poco viejo, ahora, pero aún así te da una buena idea de lo que son los diseños de CSS todo.

En la siguiente sección, aprenderás a crear una tabla usando HTML y CSS.

Estilización de etiquetas HTML 5 | tablas HTML 4