Scribd
Cargar
251 vistas2 páginas

Ejercicios CSS Flexbox

El documento describe cómo usar Flexbox para maquetar una página web con un menú de navegación en la parte superior, un contenido principal y un sidebar. El cuerpo actúa como un contenedor flexible con columnas, el menú como un contenedor con elementos del mismo tamaño y rojo al pasar el ratón, y el contenido principal con el artículo ocupando un 75% y el sidebar un 25%. Con una pantalla menor a 600px de ancho, la página se muestra en columna.

Cargado por

Daniel Riesgo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
251 vistas2 páginas

Ejercicios CSS Flexbox

El documento describe cómo usar Flexbox para maquetar una página web con un menú de navegación en la parte superior, un contenido principal y un sidebar. El cuerpo actúa como un contenedor flexible con columnas, el menú como un contenedor con elementos del mismo tamaño y rojo al pasar el ratón, y el contenido principal con el artículo ocupando un 75% y el sidebar un 25%. Con una pantalla menor a 600px de ancho, la página se muestra en columna.

Cargado por

Daniel Riesgo
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 2

Actividades CSS.

Maquetación con Flexbox

1. A partir del fichero HTML que se entrega se pide realizar estilos que usando técnicas
de flexbox permitan realizar una maquetación como la que se muestra en la siguiente
captura:

Se debe tener en cuenta que:

a) El elemento body actúa como contenedor flexible y sus ítems se ordenan en forma
de columna
b) El elemento nav actúa como contenedor flexible, y los ítems flexibles que contiene
deben tener el mismo tamaño.
Además, este elemento nav debe mostrarse en la parte superior de la página,
como se puede ver en la captura de pantalla
c) Al pasar el ratón sobre un enlace del elemento nav, debe mostrase el texto en
color rojo, con subrayado y además mostrar una línea exterior solida de color rojo
d) El elemento main actúa también como contenedor flexible y sus ítems article
ocupan un 75% y el aside ocupa un 25%
e) Mediante el uso del “media query” siguiente:

Se piden realizar las modificaciones necesarias para que en una resolución de


pantalla de menos de 600px de ancho la pagina se muestre como en la siguiente
captura de pantalla

También podría gustarte