¿Cómo crear una lista desordenada con viñetas cuadradas en HTML?

En este artículo, veremos cómo crear una lista desordenada con viñetas cuadradas usando HTML . Para crear una lista desordenada con viñetas cuadradas, usaremos CSS list-style-type: propiedad cuadrada.

La propiedad list-style-type en CSS especifica la apariencia del marcador de elementos de la lista (como un disco, un carácter o un estilo de contador personalizado).

Sintaxis:

list-style-type: disc|circle|square|decimal|lower-roman|upper-roman|
lower-greek|lower-latin|upper-latin|lower-alpha|upper-alpha|none|
inherit;

Enfoque: en el siguiente ejemplo, crearemos una lista desordenada de elementos usando las etiquetas <ul> y <li> y agregaremos CSS list-style-type: square style en el elemento <ul> para crear viñetas cuadradas.

Ejemplo:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        How to create an unordered list 
        with square bullets in HTML?
    </title>
</head>
  
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <h3>
        How to create an unordered list 
        <br>with square bullets in HTML?
    </h3>
  
    <p>Web Development Technologies - </p>
    <ul style="list-style-type:square">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *