En el script anterior le aplicamos estilos a las etiquetas div que encierra toda la página al ser el contenedor, header con el contenido de la cabecera, main donde se muestra el el tema principal y footeer que contiene el mensaje al pié de la página.
Lo que se muestra en el Ejercicio 8.1.1 y 8.12 anterior, es la práctica
común de estilos que encontramos en la estructura del diseño de páginas web.
Un contenedor que encierra el cuerpo con el título del artículo,
el contenido principal y las notas fianles o mensajes en el pié
de la página. En este contendor definimos los márgenes y los tamaños
de letras se dejan para declararlos individualmente y según convenga,
en cada Sección dentro del contenedor.
Este tipo de contenedor se adapta automáticamente a diferentes tamaños de pantalla, haciendo que el diseño sea más responsivo.
Estos estilos n la creación de layouts complejos con filas y columnas. Precisión: Permite una alineación precisa de los elementos. Responsividad: Facilita la creación de diseños responsivos que se adaptan a diferentes tamaños de pantalla.
Menú de navegación
Flexbox Container: La clase .navbar utiliza display: flex; para crear una barra
de navegación horizontal.
Distribución del Espacio: justify-content: space-around; distribuye los elementos
de manera uniforme.
Alineación: align-items: center; centra los elementos verticalmente.
Responsividad: Con una media query, se cambia la dirección a
flex-direction: column; en pantallas pequeñas, haciendo que los
elementos se apilen verticalmente.
Crearemos una galería de imágenes con una cuadrícula que se ajuste automáticamente según el tamaño de la pantalla.
Se utiliza display: grid; para crear una cuadrícula.
Definición de Columnas: grid-template-columns: repeat(3, 1fr); crea tres columnas de igual ancho.
Espaciado: grid-gap: 10px; añade espacio entre los elementos.
Responsividad: Con media queries, se ajusta el número de columnas a dos en pantallas medianas
y a una en pantallas pequeñas.