Hay muchas maneras de hacer que una página web sea más fácil de leer, navegar y digerir. Agregar imágenes y capitulares son métodos populares. Agregar viñetas es otra forma perfecta para publicaciones de blog y páginas de productos.
Puede crear viñetas utilizando un elemento de lista HTML desordenado. Este elemento se utiliza para agrupar artículos cuando el orden no es importante. Por ejemplo, las descripciones de los productos no tienen que coincidir con un pedido específico. Por otro lado, las instrucciones para los reglamentos deben.
Veremos ejemplos específicos a continuación, pero primero discutiremos cómo crear una lista desordenada.
Cómo crear una lista desordenada en HTML
Crear una lista desordenada es fácil con la etiqueta HTML
- . Analicemos este proceso paso a paso a continuación.
- .
Luego pon cada palabra o frase en las etiquetas
- . Se convertirán en elementos de su lista. Cada elemento de la lista debe tener una etiqueta de apertura y otra de cierre.
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
Nota: Las entradas de la lista no tienen que ser solo de texto. También pueden contener otros elementos HTML. Por ejemplo, una lista de elementos de anclaje o enlace se vería así:
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
Paso 3: Coloque todos los elementos de la lista en la etiqueta
- .
Finalmente, coloque todos los elementos de la lista en la etiqueta
- . Esto permite que el navegador muestre una lista desordenada de elementos, que por defecto es una lista con viñetas.
Aquí está el fragmento de código completo:
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>
Así es como se verá una lista desordenada en la interfaz de usuario:
Ahora que sabe cómo crear una lista desordenada básica, veamos algunas formas de diseñar la lista.
Ejemplos de listas HTML desordenadas
Puede diseñar una lista HTML desordenada para cambiar la etiqueta predeterminada de un elemento de la lista, anidar una lista en otra y cambiar el diseño predeterminado de vertical a horizontal. En los siguientes ejemplos, discutiremos cómo crear cada una de estas oportunidades.
Etiqueta de disco
La propiedad CSS list-style-type define la etiqueta del elemento de la lista. El valor predeterminado es «unidad», lo que significa que la etiqueta es una viñeta. Por lo tanto, una lista desordenada se mostrará como una lista con viñetas, ya sea que la propiedad de tipo de estilo de lista CSS esté establecida en «unidad» o no esté definida en absoluto.
Hay muchas formas de agregar CSS a HTML. Agregaremos CSS interno como se muestra en el Lápiz a continuación:
ver la pluma Inculto por HubSpot (@hubspot) en CódigoPen.
Marcador circular
Para cambiar la etiqueta predeterminada de un elemento de lista a un círculo, establezca la propiedad de tipo de estilo de lista CSS en «círculo».
ver la pluma Ejemplo de una lista HTML desordenada: Etiqueta de disco por HubSpot (@hubspot) en CódigoPen.
Marcador cuadrado
Para cambiar la etiqueta predeterminada de un elemento de lista a cuadrado, establezca la propiedad de tipo de estilo de lista CSS en «cuadrado».
ver la pluma Inculto por HubSpot (@hubspot) en CódigoPen.
Sin etiqueta
También puede eliminar la etiqueta de un elemento de la lista por completo configurando la propiedad de tipo de estilo de lista CSS en «ninguno». Las entradas de la lista seguirán sangradas, pero no aparecerá ningún marcador delante de ellas.
ver la pluma Inculto por HubSpot (@hubspot) en CódigoPen.
lista anidada
Puede crear una lista dentro de otra lista, también conocida como lista anidada, en HTML. Puede anidar una lista desordenada u ordenada dentro de una lista desordenada, pero nos centraremos en la primera porque el tema de esta publicación son las listas desordenadas.
Para crear una lista desordenada anidada, simplemente agregue una segunda lista desordenada debajo del elemento de la lista en la primera lista desordenada. Esta segunda lista también debe contener el elemento principal
- y elementos secundarios
- . Debe incluir una etiqueta de cierre
o el navegador mostrará todos los siguientes elementos de la lista como anidados.
ver la pluma Ejemplo de una lista HTML desordenada: anidada por HubSpot (@hubspot) en CódigoPen.
Lista de sangría personalizada
etiqueta HTML
- las sangrías enumeran los elementos de forma predeterminada. Si desea cambiar la distancia de la sangría, puede usar las propiedades CSS margin-left o padding-left. Un valor positivo moverá los elementos de la lista a la derecha y un valor negativo moverá los elementos a la derecha.
- etiqueta HTML
- define una lista desordenada.
- elemento HTML
- define un elemento de lista.
- Los elementos de la lista pueden contener otros elementos HTML, como elementos de anclaje.
- La propiedad CSS list-style-type define la etiqueta del elemento de la lista.
- Las listas desordenadas se pueden anidar.
- La propiedad margin-left o padding-left se puede usar para cambiar la distancia de sangría predeterminada de una lista desordenada.
- La propiedad flotante CSS se puede usar para mostrar una lista desordenada horizontalmente
ver la pluma Inculto por HubSpot (@hubspot) en CódigoPen.
lista horizontal
De forma predeterminada, los elementos de la lista se mostrarán verticalmente, pero puede mostrarlos horizontalmente con algo de CSS. Esta suele ser una opción popular al crear un menú de navegación.
El siguiente ejemplo muestra una lista de elementos de anclaje horizontalmente. CSS se aplica a un elemento de la lista desordenada para eliminar las etiquetas de los elementos de la lista y establecer el margen, el relleno y el color de fondo. La propiedad de desbordamiento también está configurada como «oculta» para ocultar cualquier desbordamiento y evitar que se represente fuera del marco del elemento.
Cada elemento de la lista está definido por la propiedad flotante de CSS y se establece en «izquierda» para flotar a la izquierda de su contenedor (es decir, un elemento de lista desordenado).
Finalmente, cada elemento de anclaje tiene un estilo CSS para que esté en negrita, centrado, azul marino y sin subrayar. La propiedad de visualización y relleno proporciona un espacio entre cada elemento de la lista.
ver la pluma Inculto por HubSpot (@hubspot) en CódigoPen.
Para obtener un tutorial paso a paso sobre cómo crear un menú de navegación completamente funcional, mire este video:
Cómo usar una lista desordenada en HTML
Pasamos por el proceso de crear varios tipos de listas desordenadas. Resumamos lo que hemos aprendido hasta ahora:
Usando la etiqueta HTML para una lista desordenada
Usando la etiqueta HTML
Paso 1: Incluya sus artículos en la lista.
Primero, escriba un texto que se convertirá en elementos de lista o viñetas. Aquí está el texto del marcador de posición a continuación:
Elemento de lista 1
Elemento de lista 2
Elemento de lista 3
