Desarrollo Web Lección 2 - Listas

• Continúe usando los archivos 'lists.html' y 'style.css' en los que ha estado trabajando en Visual Studio Code.
• lists.html
• style.css

• Cree una lista desordenada básica al final de su código html existente (justo antes de la etiqueta </body>).
• Llénelo con elementos de una lista de compras o una lista de tareas pendientes.

      <h2>Lista de verificación</h2>
      <ul>
        <li>100 g de harina</li>
        <li>2 huevos</li>
        <li>300 ml de leche</li>
      </ul>

• Hasta ahora, esta es como cualquier otra lista que hayamos creado.
• Ahora agregaremos algunas casillas de verificación dentro de la etiqueta <li>, pero delante del texto.

        <li><input type="checkbox" name="harina">100 g de harina</li>
        <li><input type="checkbox" name="huevos">2 huevos</li>
        <li><input type="checkbox" name="leche">300 ml de leche</li>

• Hay muchos tipos de entradas (texto, selectores de radio, botones, etc.), por lo que debemos definir qué tipo queremos con type="checkbox".
• También queremos diferenciar los elementos, por lo que nombramos cada uno usando name="harina".
• Abra su código en Live Server para ver el cuadrado delante de su texto. Intente hacer clic en él para ver que en realidad es una casilla de verificación interactiva.
• Las viñetas ahora son innecesarias, así que eliminémoslas con CSS .

ul {
  list-style-type: none;
}

• list-style-type define el tipo de viñeta o número delante de los elementos de su lista. 'none' elimina las viñetas y los números por completo.

Si llegas a este punto y algo no está del todo bien, o te gustaría verificar tu código, aquí está el código en el que hemos estado trabajando.

• lists.html
• style.css
• final result

Siguiente: Menús