Plantillas de diseño HTML

Aquí hay una colección de plantillas HTML que proporcionan diseños básicos de sitios web.

Cada diseño incluye las siguientes cinco secciones principales que se usan en cualquier sitio web:

• encabezado

• pie de página

• menú de navegación

• área de contenido principal

• elementos adicionales

• Dos columnas, menú a la izquierda (plantilla 01)

• Tres columnas porcentuales (plantilla 02)

• Tres columnas porcentuales (plantilla 03)

• Tres columnas porcentuales (plantilla 04)

• Tres columnas porcentuales (plantilla 05)

• Tres columnas porcentuales (plantilla 06)

• Tres columnas fijas (plantilla 07)

• Tres columnas fijas (plantilla 08)

• Tres columnas fijas (plantilla 09)

• Tres columnas fijas (plantilla 10)

• Tres columnas fijas (plantilla 11)

• Tres columnas fijas (plantilla 12)

• Fluido, columnas secundarias de ancho fijo (plantilla 13)

• Fluido, columnas secundarias de ancho fijo (plantilla 14)

• Fluido, columnas secundarias de ancho fijo (plantilla 15)

• Fluido, columnas secundarias de ancho fijo (plantilla 16)

• Fluido, columnas secundarias de ancho fijo (plantilla 17)

• Fluido, columnas secundarias de ancho fijo (plantilla 18)

• Fluido, tres columnas, anchos híbridos (plantilla 19)

• Fluido, tres columnas, anchos híbridos (plantilla 20)

• Fluido, tres columnas, anchos híbridos (plantilla 21)

• Fluido, tres columnas, anchos híbridos (plantilla 22)

• Dos columnas fluidas, lateral fijo (plantilla 23)

• Dos columnas fluidas, lateral fijo (plantilla 24)

• Dos columnas porcentuales (plantilla 25)

• Dos columnas porcentuales (plantilla 26)

• Una columna fluida y dos mitades (plantilla 27)

• Una columna fluida y dos mitades (plantilla 28)

• Dos columnas porcentuales y una más grande (plantilla 29)

• Dos columnas porcentuales y una más grande (plantilla 30)

• Dos columnas fluidas, lateral fijo y una grande (plantilla 31)

• Dos columnas fluidas, lateral fijo y una grande (plantilla 32)

• Dos columnas fijas (plantilla 33)

• Dos columnas fijas (plantilla 34)

• Dos columnas fijas (plantilla 35)

• Dos columnas fijas (plantilla 36)

• Dos columnas fijas (plantilla 37)

• Dos columnas fijas (plantilla 38)

• Una columna fija y dos mitades (plantilla 39)

• Una columna fija y dos mitades (plantilla 40)

Casi todos los diseños se crean con la propiedad CSS float y márgenes negativos. Al trabajar con márgenes negativos en elementos flotados, ten en cuenta lo siguiente: aplicar un margen negativo en el lado del float arrastra el elemento más en esa dirección, mientras que aplicarlo en el lado opuesto al float crea un espacio que puede hacer que el contenido adyacente se superponga. Por ejemplo, <div style="float: left; margin-right: -100%;"> coloca el siguiente elemento flotado justo al lado. Este efecto de superposición se usa a menudo para crear diseños fluidos.

En el desarrollo web moderno, los diseños basados en float han sido reemplazados en gran medida por CSS Flexbox y CSS Grid, que ofrecen un control de diseño más fiable y adaptable. Ahora los floats se usan principalmente para que el texto fluya alrededor de las imágenes.

Personalizar plantillas

Aquí puedes encontrar algunas formas de personalizar tu plantilla HTML:

• Añadir gráficos o imágenes a la estructura de la plantilla.
• Modificar la estructura HTML o reemplazar el contenido de marcador de posición.
• Aprende HTML con nuestro tutorial de HTML.
• Aprende a cambiar los estilos de la plantilla con nuestro tutorial de CSS.
• Aprende a hacer que las plantillas sean interactivas con nuestro tutorial de JavaScript.

Practice

What are the key elements in an HTML layout template?

HeaderNavigation BarContent SectionSidebarFooterBackground Image