如何使用 li 元素创建项目符号?
<li> 元素用于定义有序列表 (<ol>) 或无序列表 (<ul>) 中的列表项。<li> 元素代表"列表项"。项目符号通常仅用于无序列表。在 HTML 中，无序列表使用 <ul> 元素创建，每个列表项使用 <li> 元素定义。
语法
ul {
list-style-type: disc;
}
<ul>
<li>Items…</li>
</ul>
list-style-type 属性允许我们指定每个 <li> 元素显示的标记类型，例如项目符号、正方形、圆形、数字或字母。
无序列表 (</ul>) 的默认项目符号样式为"圆盘"。
示例 1
在此示例中，我们将为无序列表创建默认样式的圆盘项目符号，并演示如何使用 <li> 为嵌套列表创建项目符号。元素。
算法
上传一个包含页面 CSS 样式的样式部分。
根据需要设置列表和列表项的样式，包括将 list-style-type 属性设置为"disc"以显示项目符号。
使用代表不同水果的 (<li>) 元素添加一个包含一些列表项的无序列表。
使用带有默认项目符号样式 (disc) 的 <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。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
