Tailwind CSS - 列表样式图像

Tailwind CSS 列表样式图像 是一系列预定义类，使我们能够轻松更改网页上列表项的样式、图像或标记类型。

Tailwind CSS 列表样式图像类

以下是 Tailwind CSS 列表样式图像类的列表，可让您轻松设置列表在网页上的显示样式。

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

• list-image-none:此类会移除列表项中的默认标记(例如项目符号或数字)，使其不带任何额外的符号或装饰。

Tailwind CSS 列表样式图像类示例

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

自定义列表样式图像

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

示例

<!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>

悬停时显示列表项图标

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

示例

<!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 来轻松增强列表的外观。