望收藏了我寫(xiě)的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過(guò)我系統(tǒng)的歸納過(guò)的。

【技術(shù)等級(jí)】初級(jí)

【承接文章】《CSS實(shí)現(xiàn)圖片精靈，原來(lái)要這樣使用背景屬性，前端設(shè)計(jì)師必備知識(shí)》

本文小海老師為大家講解利用CSS處理HTML中的列表，也就是CSS有關(guān)列表的屬性。本文屬于前端開(kāi)發(fā)的初級(jí)教程，適合于剛剛開(kāi)始接觸CSS技術(shù)的學(xué)習(xí)者。

列表屬性是指可以對(duì)HTML中的<ol></ol>標(biāo)記對(duì)和<ul></ul>標(biāo)記對(duì)進(jìn)行樣式設(shè)置的屬性。這一組CSS屬性包括以下三個(gè)：

• list-style-type

• list-style-image

• list-style-position

一、設(shè)置列表的項(xiàng)目符號(hào)或編號(hào)：

CSS技術(shù)使用 list-style-type 設(shè)置列表的項(xiàng)目符號(hào)或編號(hào)

在HTML中，主要操作的列表有兩種：

• 無(wú)序列表：用<ul></ul>標(biāo)記對(duì)實(shí)現(xiàn)。無(wú)序列表項(xiàng)中左側(cè)的標(biāo)識(shí)我們把它稱為“項(xiàng)目符號(hào)”。

• 有序列表：用<ol></ol>標(biāo)記對(duì)實(shí)現(xiàn)。有序列表項(xiàng)中左側(cè)的標(biāo)識(shí)我們把它稱為“編號(hào)”。

有序列表與無(wú)序列表

CSS技術(shù)利用 list-style-type 屬性來(lái)設(shè)置HTML列表左側(cè)標(biāo)識(shí)的樣式。并且在CSS看來(lái)，<ul></ul>和<ol></ol>兩個(gè)標(biāo)記對(duì)不再進(jìn)行有序和無(wú)序的區(qū)分，使用list-style-type屬性設(shè)置為哪個(gè)取值，就是對(duì)應(yīng)的哪種列表。

該屬性包括以下幾種取值：

• none，列表項(xiàng)無(wú)標(biāo)記。

• disc，默認(rèn)值，標(biāo)記為實(shí)心圓。

• circle，標(biāo)記為空心圓。

• square，標(biāo)記為實(shí)心方塊。

• decimal，標(biāo)記為數(shù)字。

• decimal-leading-zero，標(biāo)記為0開(kāi)頭的數(shù)字（01、02、03 等）。

• lower-roman，標(biāo)記為小寫(xiě)羅馬數(shù)字（i、ii、iii等）。

• upper-roman，標(biāo)記為大寫(xiě)羅馬數(shù)字（I、II、III等）。

• lower-alpha，標(biāo)記為小寫(xiě)英文字母（a、b、c等）。

• upper-alpha，標(biāo)記為大寫(xiě)英文字母（A、B、C等）。

二、使用自定義圖片來(lái)代替項(xiàng)目符號(hào)和編號(hào)：

CSS技術(shù)利用 list-style-image 屬性來(lái)設(shè)置列表左側(cè)的標(biāo)識(shí)為指定的圖片

CSS技術(shù)利用 list-style-image 屬性來(lái)設(shè)置列表左側(cè)的標(biāo)識(shí)為指定的圖片。

格式：list-style-image:url(Image_URL);

例如：ul{list-style-image:url(../images/01.jpg);}

三、設(shè)置列表中列表項(xiàng)的縮進(jìn)：

CSS技術(shù)利用 list-style-position 屬性來(lái)設(shè)置列表項(xiàng)的縮進(jìn)

CSS技術(shù)利用 list-style-position 屬性來(lái)設(shè)置列表項(xiàng)的縮進(jìn)。

該屬性包括以下兩種取值：

• loutside，默認(rèn)值，列表項(xiàng)不縮進(jìn)。

• linside，列表項(xiàng)縮進(jìn)。

這個(gè)屬性使用在列表項(xiàng)<li></li>標(biāo)記對(duì)上的，不能用在<ol></ol>或<ul></ul>之上。

文章預(yù)告

下一篇文章中，小海老師會(huì)繼續(xù)為大家向下講解CSS屬性，下一次我們講解CSS中最為重要的一組屬性：定位屬性。這是CSS中非常常用的一組屬性，希望大家千萬(wàn)不要錯(cuò)過(guò)！

小海教材

如果大家希望得到更加全面的關(guān)于HTML和CSS技術(shù)講解的內(nèi)容，可以私信我，我會(huì)免費(fèi)將小海老師自己編寫(xiě)的HTML和CSS的PDF教材發(fā)給你，幫助你在前端開(kāi)發(fā)的道路上闊步前行。

小海聲明

在頭條上發(fā)表的這些文章都是從前端開(kāi)發(fā)的基礎(chǔ)開(kāi)始一步一步講起的。我非常希望能有更多的前端開(kāi)發(fā)初學(xué)者通過(guò)我寫(xiě)的文章，逐步學(xué)到一定的知識(shí)，甚至慢慢有了入門(mén)的感覺(jué)。這些文章都是我這幾年教學(xué)過(guò)程中的經(jīng)驗(yàn)，每寫(xiě)一篇時(shí)我都盡量把握好措辭，用簡(jiǎn)單易懂的語(yǔ)言描述，同時(shí)精心設(shè)計(jì)版面，讓版面更加豐富，激發(fā)閱讀興趣。所以，每一篇文章可能篇幅不長(zhǎng)，但是都要耗費(fèi)小海老師很久的時(shí)間。

希望收藏了我寫(xiě)的文章的你同時(shí)可以關(guān)注一下“小海前端”，因?yàn)檫@些文章都是連載的，并且是經(jīng)過(guò)我系統(tǒng)的歸納過(guò)的。

關(guān)注“小海前端”，我會(huì)繼續(xù)為大家奉上更加深入的前端開(kāi)發(fā)文章，也希望更多的初學(xué)者跟著學(xué)下去，我們共同將前端開(kāi)發(fā)的路努力堅(jiān)持的走下去。

TML 支持有序、無(wú)序和定義列表:

HTML 列表

本例演示無(wú)序列表。無(wú)序列表

有序列表

本例演示有序列表。

HTML無(wú)序列表

無(wú)序列表是一個(gè)項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。

無(wú)序列表使用 <ul> 標(biāo)簽

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

瀏覽器顯示如下：

• Coffee

• Milk

HTML 有序列表

同樣，有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。 有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。

列表項(xiàng)項(xiàng)使用數(shù)字來(lái)標(biāo)記。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

瀏覽器中顯示如下：

1. Coffee

2. Milk

   
   
   

HTML 自定義列表

自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。

自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt> 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。

<dl>

<dt>Coffee</dt>

<dd>- black hot drink</dd>

<dt>Milk</dt>

<dd>- white cold drink</dd>

</dl>

瀏覽器顯示如下：

• Coffee

• - black hot drink

• Milk

• - white cold drink

注意事項(xiàng) - 有用提示

提示: 列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。

更多實(shí)例

不同類(lèi)型的有序列表

本例演示不同類(lèi)型的有序列表。

不同類(lèi)型的無(wú)序列表

本例演示不同類(lèi)型的無(wú)序列表。

嵌套列表

本例演示如何嵌套列表。

嵌套列表 2

本例演示更復(fù)雜的嵌套列表。

自定義列表

本例演示一個(gè)定義列表。

HTML 列表標(biāo)簽

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

介：列表大家都應(yīng)該都多少有點(diǎn)了解，列表是什么呢？你像課本目錄，大家都看過(guò)那就是最熟悉的列表了，各位原諒我智商有限，我只能舉這么一個(gè)不是例子的例子！好，話不多說(shuō)，切入正題了！

工具軟件：大家平常有什么好的工具軟件可在下面評(píng)論下！新手的話我推薦1.dreamever 2.notepad++ 3.HBuilder 這3個(gè)里的任意一個(gè)！

需求：任務(wù)1.在網(wǎng)頁(yè)上顯示：

任務(wù)一效果圖

任務(wù)2.在網(wǎng)頁(yè)上顯示：

任務(wù)二效果圖

代碼截圖：

代碼截圖

知識(shí)點(diǎn)分析：在html中，網(wǎng)頁(yè)列表分為：1.有序列表2.無(wú)序列表！

有序列表用<ol>標(biāo)簽一般格式為<ol> <li>列表</li> </ol>,在<ol>標(biāo)簽中有一個(gè)重要屬性為type，可改變列表樣式大家可以自己試驗(yàn)一下！

無(wú)序列表用<ul>標(biāo)簽一般格式為<ul> <li>列表</li> </ul>,在<ul>標(biāo)簽中也有一個(gè)重要屬性type，同樣也是改變列表樣式，他跟<ol>標(biāo)簽的區(qū)別是一個(gè)按順序排列，一個(gè)無(wú)順序排列！

好的，今天的課程就講到這里，大家想學(xué)什么在評(píng)論下方評(píng)論，有什么不會(huì)的不懂得也可評(píng)論，我會(huì)一一給大家回復(fù)，歡迎大家訂閱收藏點(diǎn)贊，想要了解更多的可以關(guān)注微信公眾號(hào)“武訊科技”！