Lección 13: 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
image
Usa una imagen como marcador en una lista desordenada.
ul {
list-style-image: url('oro.png');
}
- Fernando Alonso
- Michael Schumacher
- Ayrton Senna
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.
Actividad 1
Implementa en HTML la siguiente lista con los marcadores cuadrados.
Actividad 2
Implementa en HTML la siguiente lista con los nombres de tus mascotas o hijos. Si no tienes, puedes inventártelos.
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.
Actividad 4
Implementa en HTML la siguiente lista.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.
- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios