====== Desarrollo Web Lección 2 - Listas ====== ===== Listas de verificación ===== ==== Configuración ==== * Continúe usando los archivos 'lists.html' y 'style.css' en los que ha estado trabajando en Visual Studio Code. * [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/es.php|lists.html]] * [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/style.php|style.css]] ==== Casilla de Verificación ==== * Cree una lista desordenada básica al final de su código html existente (justo antes de la etiqueta ). * Llénelo con elementos de una lista de compras o una lista de tareas pendientes.

Lista de verificación

 * Hasta ahora, esta es como cualquier otra lista que hayamos creado. * Ahora agregaremos algunas casillas de verificación dentro de la etiqueta
  • , pero delante del texto.
  • 100 g de harina
  • 2 huevos
  • 300 ml de leche
    •  * 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. ==== Codigo Final ==== 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. * [[https://techschool.murraygunn.id.au/webdev/classes/lists/3/es.php|lists.html]] * [[https://techschool.murraygunn.id.au/webdev/classes/lists/3/style.php|style.css]] * [[https://techschool.murraygunn.id.au/webdev/classes/lists/3/lists.html|final result]] [[es:web_development:lists:menus|Siguiente: Menús]]