CSS列表樣式

一、什麼是CSS列表

CSS列表是網頁常用的元素，用於展示內容列表。最簡單的形式是使用HTML中的<ul>和<li>標籤，但這種形式的列表樣式相對單調，不夠美觀。通過CSS，我們可以對列表元素進行樣式設置，使其更加美觀、豐富。

二、CSS列表的樣式設置

通過CSS，我們可以對列表的樣式進行設置。常見的CSS列表樣式包括以下幾種。

1、無序列表樣式

無序列表可以通過<li>元素來創建，樣式可以通過CSS中的list-style-type屬性進行設置。

    <style>
        ul {
            list-style-type: disc;
        }
    </style>
    <ul>
        <li>列表項一</li>
        <li>列表項二</li>
        <li>列表項三</li>
    </ul>

2、有序列表樣式

有序列表可以通過<li>元素來創建，樣式可以通過CSS中的list-style-type屬性進行設置。

    <style>
        ol {
            list-style-type: decimal;
        }
    </style>
    <ol>
        <li>列表項一</li>
        <li>列表項二</li>
        <li>列表項三</li>
    </ol>

3、自定義列表樣式

自定義列表樣式可以通過CSS中的list-style-image屬性進行設置，使用圖像作為列表符號。

    <style>
        ul {
            list-style-image: url('image.png');
        }
    </style>
    <ul>
        <li>列表項一</li>
        <li>列表項二</li>
        <li>列表項三</li>
    </ul>

4、水平列表樣式

水平列表可以通過設置display屬性為inline，使列表項排列在一行。

    <style>
        ul {
            list-style-type: none;
        }
        li {
            display: inline;
            margin-right: 20px;
        }
    </style>
    <ul>
        <li>列表項一</li>
        <li>列表項二</li>
        <li>列表項三</li>
    </ul>

三、總結

CSS列表樣式可以通過設置list-style-type屬性、list-style-image屬性、display屬性等來實現。通過對列表樣式的設置，可以讓網頁內容更加美觀、有趣。