Tailwind CSS - 列表樣式圖片

Tailwind CSS **列表樣式圖片** 是一個預定義類集合，使我們能夠輕鬆更改網頁上列表專案使用的樣式、圖片或標記型別。

Tailwind CSS 列表樣式圖片類

下面是 Tailwind CSS 列表樣式圖片類列表，它們允許您輕鬆設定網頁上列表的顯示方式。

類	CSS 屬性
list-image-none	list-style-image: none;

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 替換為您喜歡的圖片來輕鬆增強列表的外觀。

列印頁面