Día 76: CSS Website Layout
La ruta del desarrollador web frontend autónomo🤹♂️
Diseño website
Un sitio web a menudo se divide en encabezados, menús, contenido y un pie de página:
Hay toneladas de diferentes diseños de diseño para elegir. Sin embargo, la estructura anterior es una de las más comunes y la veremos más de cerca en este tutorial.
Encabezado
Un encabezado generalmente se encuentra en la parte superior del sitio web (o justo debajo del menú de navegación superior). A menudo contiene un logotipo o el nombre del sitio web:
Ejemplo:
Barra de navegación
Una barra de navegación contiene una lista de enlaces para ayudar a los visitantes a navegar por el sitio web:
Ejemplo:
Contenido
El diseño en esta sección, a menudo depende de los usuarios objetivo. El diseño más común es uno (o combinarlos) de los siguientes:
1-columna (a menudo se usa para navegadores móviles)
2-columnas (a menudo se usa para tabletas y portátiles)
3-columnas (solo se usa para computadoras de escritorio)
Crearemos un diseño de 3 columnas y lo cambiaremos a un diseño de 1 columna en pantallas más pequeñas:
Ejemplo:
Tip: Para crear un diseño de 2 columnas, cambie el ancho al 50%. Para crear un diseño de 4 columnas, use 25%, etc.
Tip: ¿Te preguntas cómo funcionan los
@media queries? Más información en nuestro capítulo CSS Media Queries.Tip: Una forma más moderna de crear diseños de columnas es usar CSS Flexbox. Sin embargo, no es compatible con Internet Explorer 10 y versiones anteriores. Si necesita compatibilidad con IE6-10, use
float(como el ejemplo de arriba).
Columnas desiguales
El contenido principal es la parte más grande e importante de su sitio.
Es común con anchos de columna desiguales, por lo que la mayor parte del espacio se reserva para el contenido principal. El contenido lateral (si lo hay) se usa a menudo como una navegación alternativa o para especificar información relevante para el contenido principal. Cambia los anchos a tu gusto, solo recuerda que debe sumar 100% en total:
Ejemplo:
Pie de página
El pie de página se coloca en la parte inferior de su página. A menudo contiene información como derechos de autor e información de contacto:
Ejemplo:
Diseño website responsive
Al usar parte del código CSS anterior, hemos creado un diseño de sitio web responsive, que varía entre dos columnas y columnas de ancho completo según el ancho de la pantalla:
Ejemplo:
Resumen
Este tutorial de CSS Website Layout cubre los elementos comunes de un sitio web, como el encabezado, la barra de navegación, el contenido, las columnas desiguales y el pie de página. También incluye ejemplos de diseños de 1, 2 y 3 columnas, así como un diseño responsive que se adapta a diferentes tamaños de pantalla.
Traducido con 💚 desde W3Schools.com