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
Kingsman: The Secret Service
  • Amazon Prime Video (Video on Demand)
  • Colin Firth, Samuel L. Jackson, Mark Strong (Actors)
  • Matthew Vaughn (Director)
Bestseller No. 3
VicTsing Ratón Inalámbrico Mini, Portátil 2.4G con Receptor Nano, 6 Botones, 2400DPI, 5 dpi Adjustables (Plata)
  • 【5 DPI Ajustables】800-1200-1600-2000-2400, fácil de cambia la sensibilidad del cursor depende del ambiente.
  • 【2.4G Inalámbrico】Ofrece conexión segura por rango de transmisión de 10m. Enchufar y usar, no necesita drivers.
  • 【Apretón Ergonómico】La forma contorneada adecua para su manos perfectamente. La rueda de desplazamiento con caucho le asegura que su mano no se resbale al usar el ratón. Los botones de lados puede ayudarte a avanzar y retroceder al navegar la web.
  • 【Ahorro-Energía】el ratón se apagrá automáticamente después de 8 minutos de inactivo. 15 meses de vida de batería, no se preocupe nada. NOTA: necesita 1*AA batería. (NO INCLUIDO)
  • 【Compatibilidad】Perfecto para Win7/8/10/XP, Vista7/8 y Linux. Para Mac OS, los botons de lado no funcionan. 45 días de reembolso y 12 meses de garantía.【Nota】Los botones del lado no es compatible con Mac OS.