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

如何使用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>

结论

弹点是一种灵活且强大的方式,以易学易懂的方式呈现信息。一些常见的使用情况包括突出功能、概述步骤、提供选择、总结关键要点和创建列表。

Unicode字符:它们是一种特殊字符编码器,允许使用各种特殊字符和符号。

CSS伪元素:它允许我们创建可以添加到HTML元素的装饰性元素,我们使用“::before”或“::after”伪元素来添加自定义弹点到我们的列表中。

JavaScript库:有许多JavaScript库可用于创建自定义弹点和其他视觉效果。一些流行的库包括jQuery、D3.js和Snap.svg。

Camera课程

Python教程

Java教程

Web教程

数据库教程

图形图像教程

办公软件教程

Linux教程

计算机教程

大数据教程

开发工具教程