整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
列表是一個接一個顯示條目的首選方式，而不是使用<br>標記。完整的列表定義包括開始和結束標記，以及表示列表中每個條目的標記。
有三種類型的列表：有序列表、無序列表和定義列表。
無序列表是一個帶條目符號的列表，類似于菜單。
無序列表 - <ul> ... </ul>
ul標記定義無序列表的開始和結束，列表項包含在ul標記中。
無序列表項 - <li> ... </li>
li標記添加每個條目的文本，每個列表項必須有自己的li標記。
符號類型 <ul type="disc | circle | square">
默認情況下，瀏覽器將顯示圓形條目符號。這可以通過使用ul標記的type屬性來更改，這將更改整個列表的條目符號類型。
條目符號類型 <li type="?">
通過設置li標記的type屬性，可以為列表中的某個條目設置不同的符號類型。
以下是無序列表的示例：
瀏覽器顯示內容如下所示：
望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
【技術等級】初級
【承接文章】《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教材發給你，幫助你在前端開發的道路上闊步前行。
在頭條上發表的這些文章都是從前端開發的基礎開始一步一步講起的。我非常希望能有更多的前端開發初學者通過我寫的文章，逐步學到一定的知識，甚至慢慢有了入門的感覺。這些文章都是我這幾年教學過程中的經驗，每寫一篇時我都盡量把握好措辭，用簡單易懂的語言描述，同時精心設計版面，讓版面更加豐富，激發閱讀興趣。所以，每一篇文章可能篇幅不長，但是都要耗費小海老師很久的時間。
希望收藏了我寫的文章的你同時可以關注一下“小海前端”，因為這些文章都是連載的，并且是經過我系統的歸納過的。
關注“小海前端”，我會繼續為大家奉上更加深入的前端開發文章，也希望更多的初學者跟著學下去，我們共同將前端開發的路努力堅持的走下去。
一、在Html中 列表一共分為三種：
（1）無序列表 ：使用 ul 標簽來創建，用 li 標簽來表示列表項 (較常用)
<ul>
<li>結構</li>
<li>表現</li>
<li>行為</li>
</ul>（2）有序列表 ：使用 ol 標簽來創建，用 li 標簽來表示列表項
<ol>
<li>結構</li>
<li>表現</li>
<li>行為</li>
</ol>（3）定義列表 ：使用 dl 標簽來創建，用 dt 標簽來表示定義的內容 ，dd 標簽來對內容進行解釋說明
<dl>
<dt>YYDS</dt>
<dd>yyds是“永遠的神”的縮寫 [1] ，常被粉絲用來贊賞自己的愛豆 </dd>
<dt>XSWL</dt>
<dd>XSWL = 笑死我了”，作為當代沙雕青年，每天除了哈哈哈就是“窩窩頭一塊錢四個</dd>
</dl>二、列表相互之間可以嵌套：
<ul>
<li>節日
<ol>
<li>中秋</li>
<li>國慶</li>
<li>元旦</li>
</ol>
</li>
<li>中國</li>
<li>世界</li>
</ul>
三、網頁展示：
網頁效果展示
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
