在 CSS 中，設(shè)置列表的樣式（如符號(hào)類型）是通過 `list-style` 屬性來實(shí)現(xiàn)的。`list-style` 屬性允許你控制無序列表（`

`）和有序列表（`
`）的標(biāo)記符號(hào)的外觀。

一、無序列表的符號(hào)類型設(shè)置

對(duì)于無序列表（`

`），`list-style` 屬性的常用值如下：

1. `disc`：默認(rèn)值，顯示實(shí)心圓。

```css

ul {

list-style: disc;

}

```

2. `circle`：顯示空心圓。

```css

ul {

list-style: circle;

}

```

3. `square`：顯示實(shí)心方塊。

```css

ul {

list-style: square;

}

```

你還可以使用 `list-style-image` 屬性來指定自定義的圖像作為無序列表的符號(hào)。例如，以下代碼將使用一個(gè)名為 `custom-bullet.png` 的圖像作為無序列表的符號(hào)：

```css

ul {

list-style-image: url('custom-bullet.png');

}

```

二、有序列表的符號(hào)類型設(shè)置

對(duì)于有序列表（`

`），`list-style` 屬性的常用值如下：

1. `decimal`：默認(rèn)值，顯示數(shù)字。

```css

ol {

list-style: decimal;

}

```

2. `lower-roman`：顯示小寫羅馬數(shù)字。

```css

ol {

list-style: lower-roman;

}

```

3. `upper-roman`：顯示大寫羅馬數(shù)字。

```css

ol {

list-style: upper-roman;

}

4. `lower-alpha`：顯示小寫字母。

```css

ol {

list-style: lower-alpha;

}

```

5. `upper-alpha`：顯示大寫字母。

```css

ol {

list-style: upper-alpha;

}

```

同樣，你也可以使用 `list-style-image` 屬性為有序列表指定自定義圖像作為符號(hào)。

三、列表項(xiàng)標(biāo)記的位置調(diào)整

除了設(shè)置符號(hào)類型，還可以通過 `list-style-position` 屬性來調(diào)整列表項(xiàng)標(biāo)記的位置。該屬性有兩個(gè)值：

1. `outside`：默認(rèn)值，標(biāo)記位于列表項(xiàng)文本之外。

```css

ul {

list-style-position: outside;

}

```

2. `inside`：標(biāo)記位于列表項(xiàng)文本之內(nèi)。

```css

ul {

list-style-position: inside;

}

```

四、綜合示例

以下是一個(gè)綜合示例，展示如何設(shè)置無序列表和有序列表的樣式：

```css

/* 無序列表 */

ul {

list-style: square;

list-style-position: inside;

}

/* 有序列表 */

ol {

list-style: lower-roman;

list-style-position: outside;

}

```

在上述示例中，無序列表的符號(hào)類型設(shè)置為實(shí)心方塊，并且標(biāo)記位于列表項(xiàng)文本內(nèi)部；有序列表的符號(hào)類型設(shè)置為小寫羅馬數(shù)字，標(biāo)記位于列表項(xiàng)文本外部。

通過 CSS 的 `list-style` 屬性，你可以輕松地自定義列表的樣式，使其更符合你的設(shè)計(jì)需求。無論是改變符號(hào)類型、使用自定義圖像還是調(diào)整標(biāo)記位置，都可以通過簡單的 CSS 代碼來實(shí)現(xiàn)。這使得你能夠創(chuàng)建出獨(dú)特而吸引人的列表布局，提升網(wǎng)頁的視覺效果。