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:

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>

Listas desordenadas en HTML

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

Introducción a Estilos CSS

¿Que son las hojas de estilos CSS? La Hoja de estilos CCS viene de la abreviatura de Cascading Style Sheets (en español Hojas de Estilo en Cascada). Los estilos CSS ...
Leer Más
Listas sin ordenar, listas ordenadas, listas con imagenes con CSS

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 ...
Leer Más
Trabajando con etiquetas imágenes y vinculos

Trabajando con etiquetas imágenes y vinculos

En esta nueva lección aprenderemos a utilizar las etiquetas de enlace e insertar imágenes, etiquetas muy necesarios en nuestro camino de Diseñar Sitios Webs. Empezaremos primero con las etiquetas de ...
Leer Más
Practica de vínculos en HTML (etiqueta a)

Practica de vínculos en HTML (etiqueta a)

La práctica de esta semana es la siguiente: Click Aquí Materiales de trabajo Click Aqui ...
Leer Más
Practica Maquetación Web

Practica Maquetación Web

Esta semana tenemos el Laboratorio 2. Comparto los archivos de clase Click Aquí la cual sería: Click Aquí Además comparto las imágenes del laboratorio Click Aquí ...
Leer Más
Practica Maquetación Web: Pisco Peruano

Practica Maquetación Web: Pisco Peruano

Aqui el link del proyecto final: Click Aquí Para descargar archivos Click Aquí ...
Leer Más
Menú Desplegable con HTML y CSS

Menú Desplegable con HTML y CSS

Se desarrollará el menu desplegable, trabajaremos con el material del Aula Virtual Video de Clase  ...
Leer Más
transiciones en CSS3

Transiciones en CSS3

Transiciones en CSS3 Las transiciones en CSS3 proporcionan una forma de animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de manera instantánea. Por ...
Leer Más
animaciones css3

Animaciones en CSS3

Animaciones en CSS3 Las animaciones en CSS3 permiten aplicar movimientos a las transición entre un estilo CSS y otro. Las animaciones constan de dos componentes: un estilo que describe la animación ...
Leer Más