数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学如何在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://tutorialspoint.com/static/images/cyber-security.svg");
}
步骤6 − 图像作为项目符号已成功创建。
示例
在这个示例中，我们使用有序列表创建了一个列表项，并使用列表样式图像来制作图像项目符号。
<html>
<head>
<title>image as bullet</title>
<style>
ol {
list-style-image: url("https://tutorialspoint.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://tutorialspoint.com/static/images/cyber-security.svg");
}
步骤6 − 图像作为项目符号已成功创建。
示例
在这个示例中，我们使用无序列表（<ul>）创建了列表项，并使用列表样式图像来制作图像项目符号。
<html>
<head>
<title>image as bullet ul</title>
<style>
ul {
list-style-image: url("https://tutorialspoint.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图标图像或任何较小的图像，如果您要使用带有背景或较大的图像，它会使界面难看。
2K+ 次浏览
