如何在 HTML 中创建图片项目符号
概述
在 HTML 中，我们可以创建两种类型的列表:有序列表和无序列表。列表创建后，在有序列表中，后跟数字、字母或罗马数字;在无序列表中，后跟点。有时我们需要用图片替换这些项目符号。这可以使用层叠样式表 (CSS) 的样式属性 list-style-image 来实现。我们可以将任何图片 URL 或图片地址设置为 list-style-image 的值，这样列表项前面就会显示为项目符号。
语法
CSS 样式属性中使用的语法为 −
list-style-image: url();
算法
步骤 1 − 在文本编辑器中创建一个包含 HTML 样板文件的 HTML 文件。
步骤 2 − 创建一个 HTML ol 容器来创建列表项。
<ol></ol>
步骤 3 − 使用 li 在 ol 标签中添加列表项。
<ol> <li>Penetration Testing</li> <li>Blackbox testing</li> <li>Whitebox testing</li> <li>Computer System Security</li> </ol>
步骤 4 − 现在通过将 style 标签添加到 HTML 标签的 head 标签来创建内部 CSS。
步骤 5 − 现在使用 list-style-image 属性设置 ol 标签的样式，并将 url 值设置为该属性。
ol {
list-style-image: url("https://www.cainiaomax.com/static/images/cyber-security.svg");
}
步骤 6−项目符号图片已成功创建。
示例
在此示例中，我们使用有序列表创建了一个列表项，并使用列表样式图片来制作图片的项目符号。
<html>
<head>
<title>image as bullet</title>
<style>
ol {
list-style-image: url("https://www.cainiaomax.com/static/images/cyber-security.svg");
}
</style>
</head>
<body>
<h3>Image list items</h3>
<ol>
<li>Penetration Testing</li>
<li>Blackbox testing</li>
<li>Whitebox testing</li>
<li>Computer System Security</li>
</ol>
</body>
</html>
算法
步骤 1 − 在文本编辑器中创建一个包含 HTML 样板文件的 HTML 文件。
步骤 2 − 现在创建一个 HTML 无序列表 ul 容器来创建列表项。
<ul></ul>
步骤 3 − 使用 li 在 ul 标签中添加列表项。
<ul> <li>Penetration Testing</li> <li>Blackbox testing</li> <li>Whitebox testing</li> <li>Computer System Security</li> </ul>
步骤 4 − 现在通过将 style 标签添加到 HTML 标签的 head 标签来创建内部 CSS。
步骤 5 − 现在使用 list-style-image 属性设置 ul 标签的样式，并将 url 值设置为该属性。
ul {
list-style-image: url("https://www.cainiaomax.com/static/images/cyber-security.svg");
}
步骤 6 − 已成功创建项目符号图像。
示例
在此示例中，我们使用无序列表 (<ul>) 创建了列表项，并使用列表样式图像制作了图像的项目符号。
<html>
<head>
<title>image as bullet ul</title>
<style>
ul {
list-style-image: url("https://www.cainiaomax.com/static/images/cyber-security.svg");
}
</style>
</head>
<body>
<h3>Image list items ul</h3>
<ul>
<li>Penetration Testing</li>
<li>Blackbox testing</li>
<li>Whitebox testing</li>
<li>Computer System Security</li>
</ul>
</body>
</html>
下图展示了上述示例的输出，图中显示了项目列表，项目符号用红色矩形标记。因此，您可以看到，这些项目符号并非普通的点或字母，而是使用 css 属性导入的图像。
结论
正如上述示例中使用的有序列表一样，我们也可以使用无序列表在项目符号中添加图像。这些图像将被默认项目符号列表中的项目符号替换。这些项目符号图像可以改善用户界面。您应该只选择 png 图标图像或任何尺寸较小的图像，否则，如果您要将图像与背景或大图像一起使用，界面会变得难看。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
