{"id":181,"date":"2024-05-21T09:15:51","date_gmt":"2024-05-21T07:15:51","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=181"},"modified":"2024-05-21T09:15:51","modified_gmt":"2024-05-21T07:15:51","slug":"32-listas-desordenadas","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/32-listas-desordenadas\/","title":{"rendered":"32. Listas desordenadas"},"content":{"rendered":"\n

Una lista desordenada<\/strong> comienza con la etiqueta <ul><\/strong><\/em>. Cada elemento de la lista comienza con la etiqueta <li><\/em><\/strong>. Los elementos de la lista se marcar\u00e1n con vi\u00f1etas (peque\u00f1os c\u00edrculos negros) de forma predeterminada.<\/p>\n\n\n\n

Ejm<\/strong><\/p>\n\n\n\n

<ul>\n  <li>Coffee<\/li>\n  <li>Tea<\/li>\n  <li>Milk<\/li>\n<\/ul><\/pre>\n\n\n\n
Lista HTML desordenada: elegir marcador de elemento de lista<\/h2>\n\n\n\n
La propiedad CSS list-style-type<\/em><\/strong> se utiliza para definir el estilo del marcador de elemento de lista. Puede tener uno de los siguientes valores.<\/p>\n\n\n\n
Valor<\/th>Descripci\u00f3n<\/th><\/tr>
disc<\/em><\/strong><\/td>Establece el marcador de elementos de la lista en una vi\u00f1eta (predeterminado)<\/td><\/tr>
circle<\/em><\/strong><\/td>Establece el marcador de elementos de la lista en un c\u00edrculo<\/td><\/tr>
square<\/em><\/strong><\/td>Establece el marcador de elementos de la lista en un cuadrado<\/td><\/tr>
none<\/em><\/strong><\/td>Los elementos de la lista no se marcar\u00e1n<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<ul style=\"list-style-type:disc;\">\n  <li>Coffee<\/li>\n  <li>Tea<\/li>\n  <li>Milk<\/li>\n<\/ul><\/pre>\n\n\n\n
Listas anidadas<\/h2>\n\n\n\n
Las listas pueden estar anidadas (una lista dentro de otra)<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<ul>\n  <li>Coffee<\/li>\n  <li>Tea\n    <ul>\n      <li>Black tea<\/li>\n      <li>Green tea<\/li>\n    <\/ul>\n  <\/li>\n  <li>Milk<\/li>\n<\/ul><\/pre>\n\n\n\n
Listas horizontales con CSS<\/h2>\n\n\n\n
Las listas HTML se pueden dise\u00f1ar de muchas maneras diferentes con CSS. Una forma popular es dise\u00f1ar una lista horizontalmente, para crear un men\u00fa de navegaci\u00f3n.<\/p>\n\n\n\n
Ejm<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n<head>\n<style>\nul {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n  background-color: #333333;\n}\n\nli {\n  float: left;\n}\n\nli a {\n  display: block;\n  color: white;\n  text-align: center;\n  padding: 16px;\n  text-decoration: none;\n}\n\nli a:hover {\n  background-color: #111111;\n}\n<\/style>\n<\/head>\n<body>\n\n<ul>\n  <li><a href=\"#home\">Home<\/a><\/li>\n  <li><a href=\"#news\">News<\/a><\/li>\n  <li><a href=\"#contact\">Contact<\/a><\/li>\n  <li><a href=\"#about\">About<\/a><\/li>\n<\/ul>\n\n<\/body>\n<\/html><\/pre>\n","protected":false},"excerpt":{"rendered":"
Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":31,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-181","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Una lista desordenada comienza con la etiqueta <ul>. Cada elemento de la lista comienza con la etiqueta <li>. Los elementos de la...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=181"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/181\/revisions"}],"predecessor-version":[{"id":183,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/181\/revisions\/183"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}