如何使用li元素创建项目符号

li元素用于定义有序列表（ol）或无序列表（ul）中的列表项。li元素代表”list item”（列表项）。项目符号通常仅用于无序列表。在HTML中，使用ul元素创建无序列表，而每个列表项使用li元素定义。

语法

ul {
   list-style-type: disc;
}
<ul>
   <li>Items…</li>
</ul>

list-style-type 属性允许我们指定每个li元素要显示的标记类型，例如：圆点、方块、圆圈、数字或字母。

无序列表（</ul>）默认的标记类型是圆点（Disc）。

示例1

在这个例子中，我们将创建一个包含默认样式圆点标记的无序列表，并通过使用li元素创建嵌套列表的标记。

算法

上传一个包含页面CSS样式的样式部分。
根据需要设置列表和列表项的样式，包括将 list-style-type 属性设置为 “disc” 来显示圆点。
添加一个无序列表，使用 li 元素来表示不同的水果。
创建一个嵌套列表，包括水果、蔬菜和饮料，使用 li 元素，并保持默认的标记类型（圆点）。

<!DOCTYPE html>
<html>
<head>
   <title>(Example)Create Bullets List using li elements</title>
   <!-- CSS styling for the document -->
   <style>
      body {
         background-color: #f2f2f2;
         font-family: Arial, sans-serif;
      }
      h2 {
         color: #333;
         font-size: 24px;
         margin-bottom: 10px;
      }
      ul {
         list-style-type: disc; /* specifies disc as the list item marker */
         margin-left: 20px;
         margin-bottom: 20px;
      }
      li {
         color: #666;
         font-size: 18px;
         margin-bottom: 5px;
      }
   </style>
</head>
<body>
   <h2>Fruits List</h2>
   <!-- Unordered List of Fruits -->
   <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
   </ul>
   <h2>Nested List</h2>
   <!-- Nested List Example -->
   <ul>
      <!-- First level item -->
      <li>Food</li>
      <!-- Second level with Fruits and Vegetables -->
      <ul>
         <!-- Third level unordered list of Fruits -->
         <li>Fruits</li>
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
         </ul>
         <!-- Third level unordered list of Vegetables -->
         <li>Vegetables</li>
         <ul>
            <li>Carrot</li>
            <li>Broccoli</li>
            <li>Spinach</li>
         </ul>
      </ul>
      <!-- Second level unordered list of Drinks -->
      <li>Drinks</li>
      <ul>
         <li>Water</li>
         <li>Juice</li>
         <li>Soda</li>
      </ul>
   </ul>
</body>
</html>

示例2

在这里，我们将使用list-style-type属性来构建多个不同的项目符号样式，并将它们分配给我们的项目列表。

算法

使用CSS为无序列表定义三个独特的样式。将list-style-type设置为”circle”，”square”或”disc”，然后为每个样式指定一个颜色。
使用ul选择器元素创建一个无序列表。
根据所需的样式，为每个列表设置class属性为”circle”，”square”或”disc”。
在每个ul元素内部使用li元素创建多个列表项。每个li元素代表一个单独的列表项。

<!DOCTYPE html>
<html>
<head>
   <title>Creating Bullets Using li Elements</title>
   <style>
      /* Set left margin of all unordered lists to 30px */
      ul {
         margin-left: 30px; 
      }
      /* Use circle to create circle bullets and set the colour to red */
      .circle {
         list-style-type: circle; 
         color: red; 
      }
      /* Use square to create square bullets and set the colour to green */
      .square {
         list-style-type: square; 
         color: green; 
      }
      /* Use disc to create disc bullets and set the colour to blue */
      .disc {
         list-style-type: disc; 
         color: blue; 
      }
   </style>
</head>
<body>
   <!-- Create a heading for the page -->
   <h1>Creating Bullets Using li Elements</h1>
   <!-- Create an unordered list with circle bullets and items related to beverages -->
   <h2>List of beverages</h2>
   <ul class="circle">
      <li>Coffee</li>
      <li>Tea</li>
      <li>Milk</li>
      <li>Orange Juice</li>
      <li>Water</li>
   </ul>
   <!-- Create an unordered list with square bullets and items related to programming languages -->
   <h2>Different Programming Languages</h2>
   <ul class="square">
      <li>JavaScript</li>
      <li>Python</li>
      <li>Java</li>
      <li>C++</li>
      <li>PHP</li>
   </ul>
   <!-- Create an unordered list with disc bullets and items related to cities -->
   <h2>Popular cities</h2>
   <ul class="disc">
      <li>New York</li>
      <li>London</li>
      <li>Paris</li>
      <li>Tokyo</li>
      <li>Sydney</li>
   </ul>
</body>
</html>