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:

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

¿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

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

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)

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

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

Aqui el link del proyecto final: Click Aquí Para descargar archivos Click Aquí ...
Leer Más

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 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 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