15.13. Ejercicio 13

Determinar las reglas CSS necesarias para mostrar la página HTML que se proporciona con el estilo que se muestra en la siguiente imagen:

Aspecto final que debe mostrar la página HTML proporcionada

Figura 15.26. Aspecto final que debe mostrar la página HTML proporcionada

A continuación se indica una propuesta de los pasos que se pueden seguir para obtener el aspecto final deseado:

  • Añadir los estilos básicos de la página (tipo de letra Verdana, color de letra #192666, imagen de fondo llamada fondo.gif, color de fondo #F2F5FE).
  • Definir la estructura básica de la página: anchura fija de 770 píxel, centrada en la ventana del navegador, cabecera y pie, columna central de contenidos de anchura 530 píxel y columna secundaria de contenidos de 200 píxel de anchura.
  • La cabecera tiene una altura de 100 píxel y una imagen de fondo llamada cabecera.jpg.
  • Los elementos del menú de navegación tienen un color de fondo #253575, un color de letra #B5C4E3. Cuando el ratón pasa por encima de cada elemento, su color de fondo cambia a #31479B. Los elementos seleccionados se muestran con un color de fondo blanco y un color de letra #FF9000:
Imagen detallada del aspecto que muestran los elementos del menú de navegación

Figura 15.27. Imagen detallada del aspecto que muestran los elementos del menú de navegación

  • Con la ayuda de las imágenes que se proporcionan, mostrar cada uno de los artículos de contenido con el estilo que se muestra en la siguiente imagen:
Aspecto de un artículo de la sección principal de contenidos

Figura 15.28. Aspecto de un artículo de la sección principal de contenidos

  • Añadir los estilos adecuados para mostrar los elementos de la columna secundaria de contenidos con el siguiente aspecto.
Aspecto de las secciones de la columna secundaria de contenidos

Figura 15.29. Aspecto de las secciones de la columna secundaria de contenidos

Descargar archivo comprimido con la página HTML y las imágenes

Ver solución 

Puedes sugerir, comentar, criticar e informar de errores en contacto (arroba) librosweb.es
« Anterior
15.12. Ejercicio 12
Siguiente »
Capítulo 16. Ejercicios resueltos
Los contenidos originales de este sitio están bajo una licencia de Creative Commons. Las traducciones disponen cada una de su propia licencia.