Saltar al contenido principal
Codigo Heroe
Tarea anterior
Distribución general de la página10/18
A la lista de tareas
  1. 1. El modelo de cajas
  2. 2. El flujo
  3. 3. La distribución y el diseño de referencia
  4. 4. La propiedad display: tipos de caja
  5. 5. grid-template-columns: la plantilla del contenedor grid
  6. 6. La propiedad padding: el relleno
  7. 7. La propiedad margin: los márgenes
  8. 8. fr: una fracción del espacio disponible
  9. 9. La propiedad gap: espacio entre elementos grid
  10. 10. Terminamos la primera página
  11. 11. Usamos flexbox
  12. 12. La propiedad width: el ancho del elemento
  13. 13. justify-content: distribución en el eje principal
  14. 14. Márgenes automáticos
  15. 15. Agregamos un contenedor
  16. 16. Creamos columnas en el pie de página
  17. 17. Distribuimos las columnas del pie
  18. 18. Alineamos un elemento en vertical
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Terminamos la primera página

La página está casi lista. Solo falta ajustar el pie de página.

El pie se marca con <footer>, que genera una caja de bloque. No necesitamos cambiar su tipo porque no tiene columnas. Para que coincida con el diseño, agregaremos relleno.

Diseño del pie de página

Usaremos la clase page-footer para darle estilos.

Al terminar, quitaremos el resaltado de las cajas, porque ya no lo necesitamos.

En esta página usamos Grid para el encabezado y la lista de ventajas, y cajas de bloque para el pie y la caja exterior, <body>. También podríamos cambiar el tipo de esta última si fuera necesario. Los contenedores grid nos permitieron modificar el flujo y distribuir los elementos en varias columnas. Donde no hacía falta cambiar el flujo, conservamos el tipo de caja predeterminado. También aprendimos a definir márgenes y rellenos fijos.

Grid es una tecnología potente y flexible, y apenas vimos algunas de sus posibilidades. Puedes descubrir más en el capítulo «Introducción a CSS Grid».

Pero Grid no es la única forma de modificar el flujo y distribuir las cajas. Lo comprobaremos en los próximos ejercicios.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="food-decorative.css"> <link rel="stylesheet" href="food-outline.css"> <link rel="stylesheet" href="style.css"> <title>Comida sana a domicilio</title> </head> <body> <header class="page-header"> <a class="logo"> <img src="img/food_logo.svg" alt="Logotipo de comida sana a domicilio" width="160" height="160"> </a> <h1 class="header-title">Comida sana a domicilio</h1> </header> <main class="page-main"> <ul class="features-list"> <li class="feature"> <h2>A diario</h2> <p>Entregamos menús todos los días de 6:00 a 22:00, incluidos fines de semana y días festivos.</p> </li> <li class="feature"> <h2>Variedad</h2> <p>Los platos no se repiten en seis meses. Nuestro creativo chef sabe sorprender.</p> </li> <li class="feature"> <h2>Saludable</h2> <p>Cada plato tiene el equilibrio ideal de vitaminas, minerales y micronutrientes.</p> </li> <li class="feature"> <h2>Seguridad</h2> <p>Tratamos los alimentos y los envases con todo cuidado.</p> </li> <li class="feature"> <h2>Suficiente</h2> <p>Elige entre menús de 1200, 2000 y 2800 kcal. Nadie se ha quedado con hambre.</p> </li> <li class="feature"> <h2>Económico</h2> <p>Cuesta la mitad que cocinar en casa.*</p> <p class="disclaimer">* Aunque no es seguro.</p> </li> </ul> </main> <footer class="page-footer"> <span class="copyright">© 2020 Todos los derechos reservados</span> </footer> </body> </html>
CSS
body { margin: 0; } .page-header { display: grid; grid-template-columns: 210px 200px; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 20px; } .features-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; margin-bottom: 0; padding: 20px; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Crea una regla para la clase page-footer.
    2. En esa regla, agrega 20px de relleno a todos los lados.
    3. En la línea 6 de index.html, elimina el enlace al archivo food-outline.css.
    Codigo Heroe

    © 2023-2026, codigoheroe.com