Tailwind CSS - 列表样式图片

Tailwind CSS **列表样式图片** 是一个预定义类集合，使我们能够轻松更改网页上列表项目使用的样式、图片或标记类型。

Tailwind CSS 列表样式图片类

下面是 Tailwind CSS 列表样式图片类列表，它们允许您轻松设置网页上列表的显示方式。

类	CSS 属性
list-image-none	list-style-image: none;

Tailwind CSS 列表样式图片类的功能

**list-image-none:** 此类将从列表项目中删除默认标记（例如项目符号或编号），因此它们显示时没有任何额外的符号或装饰。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 列表样式图片类示例

以下是 Tailwind CSS 列表样式图片类的示例，它们提供了不同的选项来改进网页上列表的外观。

自定义列表样式图片

此示例使用 Tailwind CSS 的 list-image 实用程序将默认列表项目符号替换为自定义图片。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS List Style Image Example
    </h2>
    <ul class="list-image-[url('./checkmark.jpg')] ml-4">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>
</body>

</html>

悬停时显示列表项目图标

此示例演示了如何在悬停时将列表项目图标更改为图片。

示例

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h2 class="text-2xl font-bold mb-4">
        Tailwind CSS List Style Image Example
    </h2>
    <ul class="list-image-none hover:list-image-[url('./checkmark.jpg')] ml-4">
        <li>1 cup strawberries</li>
        <li>1/2 cup blueberries</li>
        <li>1 banana</li>
    </ul>
</body>

</html>

**注意：**您可以通过将提供的 URL 替换为您喜欢的图片来轻松增强列表的外观。

打印页面