整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
【技術等級】初級
【承接文章】《CSS實現圖片精靈，原來要這樣使用背景屬性，前端設計師必備知識》
本文小海老師為大家講解利用CSS處理HTML中的列表，也就是CSS有關列表的屬性。本文屬于前端開發的初級教程，適合于剛剛開始接觸CSS技術的學習者。
列表屬性是指可以對HTML中的<ol></ol>標記對和<ul></ul>標記對進行樣式設置的屬性。這一組CSS屬性包括以下三個：
list-style-type
list-style-image
list-style-position
一、設置列表的項目符號或編號：
CSS技術使用 list-style-type 設置列表的項目符號或編號
在HTML中，主要操作的列表有兩種：
無序列表：用<ul></ul>標記對實現。無序列表項中左側的標識我們把它稱為“項目符號”。
有序列表：用<ol></ol>標記對實現。有序列表項中左側的標識我們把它稱為“編號”。
有序列表與無序列表
CSS技術利用 list-style-type 屬性來設置HTML列表左側標識的樣式。并且在CSS看來，<ul></ul>和<ol></ol>兩個標記對不再進行有序和無序的區分，使用list-style-type屬性設置為哪個取值，就是對應的哪種列表。
該屬性包括以下幾種取值：
none，列表項無標記。
disc，默認值，標記為實心圓。
circle，標記為空心圓。
square，標記為實心方塊。
decimal，標記為數字。
decimal-leading-zero，標記為0開頭的數字（01、02、03 等）。
lower-roman，標記為小寫羅馬數字（i、ii、iii等）。
upper-roman，標記為大寫羅馬數字（I、II、III等）。
lower-alpha，標記為小寫英文字母（a、b、c等）。
upper-alpha，標記為大寫英文字母（A、B、C等）。
二、使用自定義圖片來代替項目符號和編號：
CSS技術利用 list-style-image 屬性來設置列表左側的標識為指定的圖片
CSS技術利用 list-style-image 屬性來設置列表左側的標識為指定的圖片。
格式：list-style-image:url(Image_URL);
例如：ul{list-style-image:url(../images/01.jpg);}
三、設置列表中列表項的縮進：
CSS技術利用 list-style-position 屬性來設置列表項的縮進
CSS技術利用 list-style-position 屬性來設置列表項的縮進。
該屬性包括以下兩種取值：
loutside，默認值，列表項不縮進。
linside，列表項縮進。
這個屬性使用在列表項<li></li>標記對上的，不能用在<ol></ol>或<ul></ul>之上。
下一篇文章中，小海老師會繼續為大家向下講解CSS屬性，下一次我們講解CSS中最為重要的一組屬性：定位屬性。這是CSS中非常常用的一組屬性，希望大家千萬不要錯過！
如果大家希望得到更加全面的關于HTML和CSS技術講解的內容，可以私信我，我會免費將小海老師自己編寫的HTML和CSS的PDF教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
TML 支持有序、無序和定義列表:
HTML 列表
有序列表
| 無序列表
|
本例演示無序列表。無序列表
有序列表
本例演示有序列表。
HTML無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標簽
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下：
Coffee
Milk
HTML 有序列表
同樣，有序列表也是一列項目，列表項目使用數字進行標記。 有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器中顯示如下：
Coffee
Milk
HTML 自定義列表
自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<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
注意事項 - 有用提示
提示: 列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實例
不同類型的有序列表
本例演示不同類型的有序列表。
不同類型的無序列表
本例演示不同類型的無序列表。
嵌套列表
本例演示如何嵌套列表。
嵌套列表 2
本例演示更復雜的嵌套列表。
自定義列表
本例演示一個定義列表。
HTML 列表標簽
| 標簽 | 描述 |
|---|---|
| <ol> | 定義有序列表 |
| <ul> | 定義無序列表 |
| <li> | 定義列表項 |
| <dl> | 定義定義列表 |
| <dt> | 自定義列表項目 |
| <dd> | 定義自定列表項的描述 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
介：列表大家都應該都多少有點了解，列表是什么呢？你像課本目錄，大家都看過那就是最熟悉的列表了，各位原諒我智商有限，我只能舉這么一個不是例子的例子！好，話不多說，切入正題了！
工具軟件：大家平常有什么好的工具軟件可在下面評論下！新手的話我推薦1.dreamever 2.notepad++ 3.HBuilder 這3個里的任意一個！
需求：任務1.在網頁上顯示：
任務一效果圖
任務2.在網頁上顯示：
任務二效果圖
代碼截圖：
代碼截圖
知識點分析：在html中，網頁列表分為：1.有序列表2.無序列表！
有序列表用<ol>標簽一般格式為<ol> <li>列表</li> </ol>,在<ol>標簽中有一個重要屬性為type，可改變列表樣式大家可以自己試驗一下！
無序列表用<ul>標簽一般格式為<ul> <li>列表</li> </ul>,在<ul>標簽中也有一個重要屬性type，同樣也是改變列表樣式，他跟<ol>標簽的區別是一個按順序排列，一個無順序排列！
好的，今天的課程就講到這里，大家想學什么在評論下方評論，有什么不會的不懂得也可評論，我會一一給大家回復，歡迎大家訂閱收藏點贊，想要了解更多的可以關注微信公眾號“武訊科技”！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
