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

Recomendado para ti

Bestseller No. 1
MUGFFINS Taza Informático (Mejor del Mundo) - Regalos Originales y Divertidos de Informática
  • TAZAS DE ALTA CALIDAD. Color blanco, 11 oz / 350 ml. Cada taza tiene una tinta increíble que las hace resistentes al lavavajillas y microondas. Después de regalarla, la taza perdurará como un recuerdo de tus compañeros de colegio, de trabajo, hijos, pareja, amigos… El mejor regalo para informáticos o estudiantes de informática.
  • LA TAZA, EL REGALO IDEAL MULTIUSOS. Una bonita, colorida y divertida taza, que también vale para muchas cosas. No es necesario comprar regalos caros para hacer sonreír a alguien. La taza pale para todo, aunque se llame “taza de café” o “taza desayuno”, pueden contener otros líquidos como té o incluso cerveza… Desayuna con tu informático y dile: Eres el mejor informático del mundo.
  • IDEA PERFECTA COMO REGALO GRACIOSO. ¿Buscando un regalo complejo? ¡No vale la pena! Aquí tienes un regalo simple, pero a la vez original, útil para aquella persona que también reirá a carcajadas con sus mensajes graciosos. Nuestras tazas son sinónimo de buen precio, mensajes alegres y calidad en el diseño. Ideal como regalo para cumpleaños o aniversarios: el regalo de informática perfecto para hombres.
  • PARA GENTE ESPECIAL de todo tipo, ya sea compañeros de trabajo (jefe, proveedores, clientes, empleado del mes…), familia (padres, madres, abuelos, tíos, hijos, primos, sobrinos…) para novios, pareja, marido / mujer, amigos etc. Esta taza de informático es perfecta para todo el mundo.
  • CAJA SUPER PROTEGIDA para que no re rompa, incluso si el mensajero juega a fútbol con ella. Con un diseño minimalista, hecha en cartón, es sencilla pero bonita para regalar. En pocas palabras, nuestras tazas para desayunar café o té son los mejores regalos divertidos en relación a la calidad, la originalidad y el precio. El mejor regalo que se le puede hacer a informáticos.
Bestseller No. 2
C50-E-11N3 CI3-7020U SYST
  • Muy conveniente
  • Peso del paquete: 2.64 kilograms
  • Producto de calidad
  • Fácil de usar