User Tools

Site Tools


es:web_development:lists:checklists

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
es:web_development:lists:checklists [2022/03/02 12:55]
mag [Casilla de Verificación]
es:web_development:lists:checklists [2023/08/16 09:33] (current)
Line 6: Line 6:
   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/style.php|style.css]]   * [[https://techschool.murraygunn.id.au/webdev/classes/lists/2/style.php|style.css]]
 ==== Casilla de Verificación ==== ==== Casilla de Verificación ====
-  * Cree una lista desordenada básica al final de su código html existente (justo antes de la etiqueta <html><body></html>).+  * Cree una lista desordenada básica al final de su código html existente (justo antes de la etiqueta <html></body></html>).
   * Llénelo con elementos de una lista de compras o una lista de tareas pendientes.   * Llénelo con elementos de una lista de compras o una lista de tareas pendientes.
  
Line 21: Line 21:
         <li><input type="checkbox" name="leche">300 ml de leche</li></code>         <li><input type="checkbox" name="leche">300 ml de leche</li></code>
   * Hay muchos tipos de entradas (texto, selectores de radio, botones, etc.), por lo que debemos definir qué tipo queremos con <html>type="checkbox"</html>.   * Hay muchos tipos de entradas (texto, selectores de radio, botones, etc.), por lo que debemos definir qué tipo queremos con <html>type="checkbox"</html>.
-  * También queremos diferenciar los elementos, por lo que nombramos cada uno usando <html>name="flour"</html>.+  * También queremos diferenciar los elementos, por lo que nombramos cada uno usando <html>name="harina"</html>.
   * 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.   * 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 .   * Las viñetas ahora son innecesarias, así que eliminémoslas con CSS .
Line 28: Line 28:
   list-style-type: none;   list-style-type: none;
 }</code> }</code>
-  * <html>list-style-type</html> define el tipo de viñeta o número delante de los elementos de su lista. 'ninguno' elimina las viñetas y los números por completo.+  * <html>list-style-type</html> 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]] [[es:web_development:lists:menus|Siguiente: Menús]]
es/web_development/lists/checklists.1646254555.txt.gz · Last modified: 2023/08/16 09:33 (external edit)