嘿嘿，讓我來為你好好講講CSS列表是怎么回事?，F(xiàn)在你開網(wǎng)頁的時候，看到的那些美美的分類、排版，實際上很多都利用了CSS列表的功效！

CSS列表，英文名字叫做CSS List，它能夠讓我們的網(wǎng)頁排版更加清晰、有效?；A(chǔ)格式如下：

```

1. 項目1
2. 項目2
3. 項目3

```

看懂了嗎？啊哈哈，其實也沒那么難，就是一個開頭叫ol，里面有很多個開頭叫l(wèi)i的小東西，就像一個班級有好多學生一樣，大象講課法確實容易懂嘛！

好啦，記住兩個哲學思想，萬法皆可分，不求甚解。這里就給大家匯總一下CSS列表的各種功效咯！

## 1. 有序列表ol

看到上面的代碼，其實list item，也就是li是并沒有被明確的標號呢，這個時候如果我們想加上一個有序的編號呢？這時候，就要用到有序列表ol啦！

在ol標簽中，你可以添加type屬性：

- type="1" ：默認的數(shù)字編號，逐一往下排列。

- type="A" ：大寫字母編號。

- type="a" ：小寫字母編號。

- type="I" ：大寫羅馬數(shù)字編號。

- type="i" ：小寫羅馬數(shù)字編號。

```html

1. 編號1
2. 編號2
3. 編號3

1. 編號1
2. 編號2
3. 編號3

1. 編號1
2. 編號2
3. 編號3

1. 編號1
2. 編號2
3. 編號3

1. 編號1
2. 編號2
3. 編號3

```

哇塞，看到上面的代碼，感覺這些編號好像很厲害好吧？

## 2. 無序列表ul

有序列表講完了，那對應的，自然是要有一個無序列表啦！讓我們來看看代碼：

```html

• 列表1
• 列表2
• 列表3

```

咋一看跟有序列表的代碼沒啥變化，但是重點在于它呈現(xiàn)的方式咯。

無序列表主要特色是用符號、或其它圖案來代替數(shù)字編號。這里有幾個比較實用的實現(xiàn)方法：

### 2.1 圓點

```html

• 列表1
• 列表2
• 列表3

```

### 2.2 方塊

```html

• 列表1
• 列表2
• 列表3

```

### 2.3 小三角形

```html

• 列表1
• 列表2
• 列表3

```

上面的例子里，首先使用了list-style-type:none來去除默認的符號，再用margin-left屬性來控制文本距離左側(cè)的偏移量。至于為什么會變成想要的小三角形？這其實是因為我們在li的樣式中，添加了border-left、border-bottom屬性后所表現(xiàn)出來的效果咯！

``` CSS

li {

border-left: 9px solid transparent;

border-bottom: 10px solid #007fff;

padding: 10px 0 10px 10px;

}

```

## 3. 自定義列表實現(xiàn)

除了以上常用的無序列表，我們還可以利用CSS的強大特性來自定義一些更加特別的列表分類。

還記得我們上面說到的，班級和學生的關(guān)系嗎？在這里，我們可以用CSS來美化我們的“學生”們，讓他們更加特別！

```html

• 學生1
• 學生2
• 學生3

```

我們先在ul中添加了一個class=.my-list的自定義類名，好讓樣式表去找他、給他進行美妙的改變。接下來我們在CSS中為它定制特殊的樣式吧！

```CSS

.my-list {

display: block;

width: 100%;

background-color: #f5f5f5;

border: 1px dashed #ccc;

padding: 15px;

list-style-type:none;

}

.my-list li {

display: block;

width: 100%;

border-radius: 5px;

background-color: #d6eaf8;

padding: 10px;

margin-bottom: 10px;

}

```

啊哈哈哈哈，大家現(xiàn)在刷新一下頁面，看看學生們變成了啥樣？

定義CSS樣式，要點在于對常見的元素進行屬性重寫。例如這里的li元素，就重寫了它的backgroung-color、 border-radius，改變了它的顯示效果。

看到這里，是不是已經(jīng)完全get到CSS列表的魅力啦！哇，感覺又多了一把利器，去打敗其他人啦！ yinyiprinting.cn 寧波海美seo網(wǎng)絡(luò)優(yōu)化公司 是網(wǎng)頁設(shè)計制作，網(wǎng)站優(yōu)化，企業(yè)關(guān)鍵詞排名，網(wǎng)絡(luò)營銷知識和開發(fā)愛好者的一站式目的地，提供豐富的信息、資源和工具來幫助用戶創(chuàng)建令人驚嘆的實用網(wǎng)站。 該平臺致力于提供實用、相關(guān)和最新的內(nèi)容，這使其成為初學者和經(jīng)驗豐富的專業(yè)人士的寶貴資源。