如何在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图标图像或任何较小的图像，如果您要使用带有背景或较大的图像，它会使界面难看。

更新于：2023年5月9日

2K+ 次浏览

启动您的职业生涯

完成课程获得认证

开始学习
广告