Lecci贸n 14: Listas | Curso CSS

Lecci贸n 14: Listas

list-style-type

Puedes usar los estilos predifinidos.

ul {
  list-style-type: disc;
  list-style-type: circle;
  list-style-type: square;
  list-style-type: decimal;
}
  • Lorem.
  • Fuga.
  • Placeat.

Usar un texto o emoji.

ul {
  list-style-type: '馃憤';
}
  • Comer fruta
  • Hacer ejercicio
  • Pagar impuestos

O quitarlos.

ul {
  list-style-type: none;
}
  • Inicio
  • FAQ
  • Nosotros

M谩s informaci贸n

image

Usa una imagen como marcador en una lista desordenada.

ul {
  list-style-image: url('oro.png');
}
  • Fernando Alonso
  • Michael Schumacher
  • Ayrton Senna

M谩s informaci贸n

position

Indicas donde quieres que se sit煤e el marcador.

Dentro del <ul>.

ul {
  list-style-position: inside;
}
  • Lorem.
  • Fuga.
  • Placeat.

Fuera del <ul>.

ul {
  list-style-position: outside;
}
  • Lorem.
  • Fuga.
  • Placeat.

M谩s informaci贸n

Actividad 1

Implementa en HTML la siguiente lista con los marcadores cuadrados.

Previa actividad 12-1

Actividad 2

Implementa en HTML la siguiente lista con los nombres de tus mascotas o hijos. Si no tienes, puedes invent谩rtelos.

Previa actividad 12-2

Actividad 3

Implementa en HTML la siguiente lista equivalente a un navegador real para una web. No olvides a帽adir un cambio de estado cuando el cursor est茅 por encima.

Previa actividad 12-3

Actividad 4

Implementa en HTML la siguiente lista.

Previa actividad 12-4

Esta obra est谩 bajo una Licencia Creative Commons Atribuci贸n-NoComercial-SinDerivadas 4.0 Internacional.

Atribuci贸n/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

驴Me ayudas?

Comprame un caf茅
Pulsa sobre la imagen

No te sientas obligado a realizar una donaci贸n, pero cada aportaci贸n mantiene el sitio en activo logrando que contin煤e existiendo y sea accesible para otras personas. Adem谩s me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la pol铆tica de Protecci贸n de Datos.

Escribe el primer comentario