27-Listas desordenadas en html

En html se pueden crear listas de varias formas:

Listas desordenadas

Estas listas desordenadas se inician con la etiqueta ul y sus elementos tienen la etiqueta li

Ejemplo de una lista desordenada

• Coffee
• Tea
• Milk

Codigo del ejemplo

        <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
      </ul> 
    

---

...

Marcadores para listas desordenadas

para poner un marcador a la lista desordenada usamos las seguientes etiquetas:

style="list-style-type:disc;"

Las listas desordenadas tienen los seguinte marcadores:

Valor	Descripcion
disc	Marca la lista con un disco
circle	Marca la lista con un circulo
square	Marca la lista con un cuadrado
none	No se marca la lista

Ejemplo de disc

• Coffee
• Tea
• Milk

Ejemplo de circulo

• Coffee
• Tea
• Milk

ejemplo de cuadrado

• Coffee
• Tea
• Milk

Ejemplo de ninguno

• Coffee
• Tea
• Milk

---

Listas ninadas

Las listas tambien se pueden aninar unas dentro de otras

ejemplo de una lista aninada

• Coffee
• Tea
  • Black tea
  • Green tea
• Milk

---

Lista Horizontal

Para crear una lista horizontal tipo barra de menu, tendremos que crear algunas estilos como lo que se muestra en ejemplo

Codigo de estilos de barra de menu

        <style>
        ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
          overflow: hidden;
          background-color: #333333;
        }
        
        li {
          float: left;
        }
        
        li a {
          display: block;
          color: white;
          text-align: center;
          padding: 16px;
          text-decoration: none;
        }
        
        li a:hover {
          background-color: #111111;
        }
        </style>
    

Como se ve?

• Home
• News
• Contact
• About

---

Ir al indice