Los sitios web a menudo muestran contenido en varias columnas (como una revista o un periódico).
Ejemplo
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Elementos de diseño HTML
HTML tiene varios elementos semánticos que definen las diferentes partes de una página web:
<header> - Defines a header for a document or a section <nav> - Defines a set of navigation links <section> - Defines a section in a document <article> - Defines an independent,
self-contained content <aside> - Defines content aside from the content (like a sidebar) <footer> - Defines a footer for a document or a section <details> - Defines additional details
that the user can open and close on demand <summary> - Defines a heading for the <details> element
<header>- Define un encabezado para un documento o una sección
<nav>- Define un conjunto de enlaces de navegación
<section>- Define una sección en un documento
<article> - Define un contenido independiente y autónomo
<aside> - Define el contenido aparte del contenido (como una barra lateral)
<footer> - Define un pie de página para un documento o una sección
<details> - Define detalles adicionales que el usuario puede abrir y cerrar a pedido
<summary>- Define un encabezado para el <details>elemento
Puede leer más sobre los elementos semánticos en nuestro
capítulo Semántica HTML .
Técnicas de diseño HTML
Hay cuatro técnicas diferentes para crear diseños de varias columnas. Cada técnica tiene sus pros y sus contras:
Marco CSS
Propiedad flotante de CSS
Caja flexible de CSS
cuadrícula CSS
Marcos CSS
Si desea crear su diseño rápidamente, puede usar un marco CSS, como
W3.CSS o Bootstrap .
¿Alguna vez has oído hablar de W3Schools Spaces ? Aquí puede crear su sitio web desde cero o utilizar una plantilla y alojarlo de forma gratuita.
Es común hacer diseños web completos usando la
floatpropiedad CSS. Float es fácil de aprender: solo necesita recordar cómo funcionan las propiedades floaty
clear.
Desventajas: los elementos flotantes están vinculados al flujo de documentos, lo que puede dañar la flexibilidad. Obtenga más información sobre float en nuestro capítulo CSS Float and Clear .
Ejemplo
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Diseño de caja flexible CSS
El uso de flexbox garantiza que los elementos se comporten de manera predecible cuando el diseño de la página debe adaptarse a diferentes tamaños de pantalla y diferentes dispositivos de visualización.
Obtenga más información sobre flexbox en nuestro
capítulo CSS Flexbox .
Ejemplo
Cities
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Diseño de cuadrícula CSS
El módulo de diseño de cuadrícula de CSS ofrece un sistema de diseño basado en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin tener que usar flotadores y posiciones.