在網(wǎng)頁設計和開發(fā)中，列表是一個常見的元素。如何使用div和CSS來創(chuàng)建一個漂亮的列表呢？本文將為您提供一種簡單的方法。

首先，我們需要新建一個HTML文件，并在文件頭部引入CSS樣式文件。接下來，在CSS樣式文件中，我們可以使用以下代碼來清除默認樣式：

      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
    

這段代碼將清除所有元素的默認外邊距、內(nèi)邊距和列表樣式。

接下來，我們需要在HTML文件中創(chuàng)建一個無序列表（ul）或有序列表（ol）。例如，我們創(chuàng)建一個無序列表：

      lt;ul class"list"gt;
        lt;ligt;列表項1lt;/ligt;
        lt;ligt;列表項2lt;/ligt;
        lt;ligt;列表項3lt;/ligt;
      lt;/ulgt;
    

請注意，我們?yōu)榱斜硖砑恿艘粋€class屬性，以便后續(xù)為其添加樣式。

現(xiàn)在，我們可以使用CSS樣式來使列表看起來漂亮。例如，我們可以為列表項添加一些間距、背景顏色和字體樣式：

      .list li {
        padding: 10px;
        margin-bottom: 5px;
        background-color: #f2f2f2;
        font-family: Arial, sans-serif;
      }
    

這段代碼將為每個列表項設置10像素的內(nèi)邊距、5像素的底部外邊距、淺灰色的背景和Arial字體。

通過以上步驟，我們已經(jīng)成功地為列表添加了樣式。您可以在瀏覽器中打開HTML文件，查看列表的效果。

默認情況下，無序列表將以實心圓點作為項目符號，有序列表將以數(shù)字作為項目符號。如果您不想使用默認的項目符號，并且不希望使用背景圖片來替代它們，您可以使用CSS偽元素來自定義項目符號。

      .list li:before {
        content: counter(li);
        counter-increment: li;
        margin-right: 5px;
        font-weight: bold;
      }
    

這段代碼將以數(shù)字作為項目符號，并在每個列表項前添加一個冒號。

通過上述代碼，我們已經(jīng)成功地為列表項添加了自定義的序號。您可以在瀏覽器中查看效果。

如果您想要為自定義的序號添加背景顏色，可以使用以下CSS樣式：

      .list li:before {
        content: counter(li);
        counter-increment: li;
        margin-right: 5px;
        padding: 2px 5px;
        background-color: #ccc;
        color: #fff;
        font-weight: bold;
      }
    

這段代碼將為自定義的序號添加灰色背景和白色文字顏色。

通過以上代碼，我們已經(jīng)成功地為自定義的序號添加了背景顏色。您可以在瀏覽器中查看最終效果。