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:
- 1 Listas desordenar
- 2 Listas Ordenadas
- 3 Listas con imágenes
- 4 Video de listas en HTML
- 4.0.1 Introducción a Estilos CSS
- 4.0.2 Listas
- 4.0.3 Trabajando con etiquetas imágenes y vinculos
- 4.0.4 Practica de vínculos en HTML (etiqueta a)
- 4.0.5 Practica Maquetación Web
- 4.0.6 Practica Maquetación Web: Pisco Peruano
- 4.0.7 Menú Desplegable con HTML y CSS
- 4.0.8 Transiciones en CSS3
- 4.0.9 Animaciones en CSS3
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
Leer Más
Trabajando con etiquetas imágenes y vinculos
Leer Más
Practica de vínculos en HTML (etiqueta a)
Leer Más
Practica Maquetación Web
Leer Más
Practica Maquetación Web: Pisco Peruano
Leer Más
Menú Desplegable con HTML y CSS
Leer Más
Transiciones en CSS3
Leer Más
Animaciones en CSS3
Leer Más
