Botonera sencilla utlizando imágenes

Es posible ver como queda el ejercicio resuelto en esta url:
esta url

¿Por qué es bueno resolver este ejercicio de HTML y CSS?

Este es un ejercicio un tanto especial, ya que los menús de navegación a menudo son listas de enlaces que no tienen una imagen de fondo. Si tienen sombreados, esquinas redondeadas, gradientes, etc. actualmente lo podemos hacer con CSS3, en lugar de exportarnos una imagen con GIMP o Photoshop.

Así que guardemos el hacha de guerra. Es un buen ejercicio para practicar botoneras con imágenes de fondo, no pasa nada si habitualmente resolvemos las botoneras utlizando código en lugar de fotos no pongamos imagenes de fondo y en su lugar lo hagamos todo con código. Peace.

¿Qué vamos a aprender con este ejercicio de HTML y CSS?

Tendremos que manejar algunas funciones básicas de maquetación con CSS, aprenderemos a anidar etiquetas(estamos haciendo una lista de enlaces, es decir un ul, que tiene li que dentro tienen a).
También vamos a enlazar nuestros enlaces con imágenes externas. Aprender a cargar recursos externos poniendo correctamente las rutas para enlazarlos es algo que muchas veces trae de cabeza a los alumnos. No basta con hacerlo, hay que entenderlo, y aunque cuando sabes hacerlo parece una chorrez, me paso una parte importante de la clase solventando problemas de rutas 🙁
Tal como yo he resuelto el ejercicio, cargo la hoja de estilos como un recurso externo, así que tendremos que trabajar las rutas para cargar las imágenes y para cargar la hoja de estilos.

En cuanto a la hoja de estilos, deberemos usar selectores de etiqueta y de clase. Aunque prácticamente son los selectores más básicos que hay, en muchos casos se confunden o veo que mis alumnos no los saben aplicar correctamente.

Y eso es todo. Te recomiendo tratar de hacer el ejercicio sin ver el video. O si lo necesitas ver, míralo sin remordimientos. Pero el ejercicio no cuenta como un ejercicio que sepas hacer hasta que no seas capaz de terminarlo sin mirar la solución.