Curse of Coding

Listas

Muchas veces vamos a necesitar enumerar elementos de una lista, ya sea para mostrar los pasos a seguir en un proceso o para mostrar una lista de elementos, para lograr esto tenemos las etiquetas <ul> y <ol>.

Listas Ordenadas

Las listas ordenadas son aquellas que tienen un orden específico, como los pasos a seguir en un proceso y son representadas por la etiqueta <ol>.

Este es un ejemplo de lista ordenada:

Como desbloquear a The Forgotten

  1. Derrota al jefe del piso 1 en menos de 1 minuto.
  2. Completa la Boss Rush.
  3. Derrota a Satan en la Dark Room.
  4. Usa la pala en la sala con tumbas.

Listas Desordenadas

Las listas desordenadas son aquellas que no tienen un orden específico y son representadas por la etiqueta <ul>.

Este es un ejemplo de lista desordenada:

Objetos que encontré:

NOTA

Cada elemento de una lista debe ser representado con la etiqueta <li>.

CSS

Aparte de compartir los mismos atributos que aprendimos en el tema de Textos, las listas también pueden ser modificadas con los siguientes atributos CSS:

¡Veamos un ejemplo en código para ver cómo se verían las listas anteriores!

html
1<!DOCTYPE html>
2<html>
3  <head>
4      <style>
5        ul {
6            list-style-type: square;
7            list-style-image: url("https://lirucisa.com/images/enemies/Eternal%20Fly.webp");
8        }
9
10        ol {
11            list-style-type: upper-roman;
12        }
13      </style>
14      <title>The Binding of Isaac</title>
15  </head>
16  <body>
17        <h1>Como desbloquear a The Forgotten</h1>
18        <ol>
19          <li>Derrota al jefe del piso 1 en menos de 1 minuto.</li>
20          <li>Completa la Boss Rush.</li>
21          <li>Derrota a Satan en la Dark Room.</li>
22          <li>Usa la pala en la sala con tumbas.</li>
23        </ol>
24
25        <h1>Objetos que encontré:</h1>
26        <ul>
27          <li>The Halo.</li>
28          <li>Sacred Heart.</li>
29          <li>Polyohemus.</li>
30          <li>The parasite.</li>
31        </ul>
32  </body>
33</html>

¡Intenta crear nuevas listas con todos sus posibles estilos!

TextoEnlaces