Listas
En este artículo aprenderemos a utilizar las etiquetas de viñetas en HTML, así como tambien utilizar imágenes como viñetas utilizando estilos CSS de una manera fácil y muy rápida. Al final te dejo un video del artículo, bien empecemos:
Tabla de contenido:
Listas desordenar
Las listas desordenadas se declaran con la etiqueta <ul></ul>, teniendo en cuenta además que cada elemento deberá estar entre las etiquetas <li></li>
Podemos utilizar el siguiente estilo
Listas Ordenadas
Listas con imágenes
Aquí utilizaremos imágenes pequeñas (íconos) para representar las viñetas.
Para esto primero debemos de tener íconos descargados en nuestro sitio Web, una web que utilizo para descargar es iconfinder.
Pues bien primero en nuestro documento HTML ingresamos:
si notas, vemos que he declarado una clase de nombre .icono en la etiqueta UL, pues bien ahora vamos a nuestro estilo CSS y declaramos:
.icono{list-style-image: url("imagenes/lista1.png");
Notamos que se ha añadido un imagen como tipo de estilo.
Video de listas en HTML
Les dejo un video de lo explicado
Espero te haya servido de mucho este post, nos vemos en el próximo artículo.
Introducción a Estilos CSS
Trabajando con etiquetas imágenes y vinculos
Practica de vínculos en HTML (etiqueta a)
Practica Maquetación Web
Practica Maquetación Web: Pisco Peruano
Menú Desplegable con HTML y CSS
Transiciones en CSS3
