es:web_development:lists:checklists
This is an old revision of the document!
Table of Contents
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.
Casilla de Verificación
- 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-typedefine 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.
es/web_development/lists/checklists.1646275726.txt.gz · Last modified: 2023/08/16 09:33 (external edit)
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
