如何使用 CSS 在列表中添加图片作为列表项标记?

cssweb developmentfront end technology更新于 2024/2/11 10:52:17

CSS 是层叠样式表 (Cascading Style Sheets) 的缩写，是一种简单易用的语言，可以更轻松地呈现网页。使用 CSS 可以将样式应用于网页。在本文中，我们将了解如何使用 CSS 在列表中添加图片作为列表项标记。

方法

我们将使用 list-style-image 属性来完成此任务。list-style-image 属性允许用户将图片设置为列表中的列表项标记。

语法

list-style-image: none | url | initial | inherit;

示例

步骤 1 − 首先，我们定义 HTML 代码。

<!DOCTYPE html>
<html>
<head>
   <title>How to add an image as the list-item marker in a list using CSS?</title>
</head>
<body>
   <h4>How to add an image as the list-item marker in a list using CSS?</h4>
   <div>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </div>
</body>
</html>

步骤 2 − 现在我们将添加 CSS 逻辑。

<style>
   ul{
      list-style-image: url("https://www.cainiaomax.com/images/logo.png");
      padding-left: 350px;
   }
</style>

这是完整的代码 −

<!DOCTYPE html>
<html>
<head>
   <title>How to add an image as the list-item marker in a list using CSS?</title>
   <style>
      ul {
         list-style-image: url("https://www.cainiaomax.com/images/logo.png");
         padding-left: 350px;
      }
   </style>
</head>
<body>
   <h4>How to add an image as the list-item marker in a list using CSS?</h4>
   <div>
      <ul>
         <li>Item 1</li>
         <li>Item 2</li>
         <li>Item 3</li>
      </ul>
   </div>
</body>
</html>