domingo, 8 de febrero de 2015

Diseño de listas en html - diseño web

Hola, este es otro tutorial de diseño web para mis alumnos de los cursos de diseño web, eCommerce, redes, community manager de la Casa de la Cultura de Torrejón de Ardoz y Centro Cultural Sanchinarro.

En este tutorial de diseño web vamos a diseñar un menú horizontal con una lista html.

Este ejercicio de menú está basado en el que he realizado para la tienda electrónica de mi mujer, que podéis verlo en www.cestasderegalo.es

diseño web


El menú estará alojado en el header de la página, dentro de una etiqueta nav y será el menú principal de navegación de nuestra web.

Vamos a usar algunas pseudo clases :hover, que ya hemos visto en otros tutoriales,  y la pseudo clase :nth-child(numero) que selecciona el elemento indicado hijo enésimo de su padre. En nuestro caso, nos servirá para seleccionar el hijo (4) de nuestra lista, como veremos.

También vamos a probar las Google Web Fonts y los complementos de Mozilla Firefox Firefox Firebug y Colorzilla. 


Como ha salido un poco largo, lo he dividido en 3 videotutoriales.

Los dos primeros muestran cómo crear una lista de este tipo. Y en tercero veremos como trabajarla en un theme child de Wordpress

Este es el primero:



No hay comentarios:

Publicar un comentario