一.ul是無序列表

????????網頁中最為常見的列表，各個列表項之間為并列關系，沒有順序級別之分，如導航欄，新聞話題展示區等。

????????默認示例表現為（默認帶有實心圓）：

<ul><li>無序列表項1</li><li>無序列表項2</li><li>無序列表項3</li> </ul>

常見問題：

1.去除默認樣式的實心圓：

<style>/* 嵌入式使用css,一般寫在head中 */ul li {list-style-type: none; } </style>

/*?list-style-type的其它取值

? ? ? ? ? ? ? ? ? ? ? ? none???無標記。

????????????????????????disc????實心圓（默認值）

????????????????????????circle??空心圓

????????????????????????square??實心方塊

????????????????????????decimal?阿拉伯數字

????????????????????????decimal-leading-zero?0開頭的阿拉伯數字(01,02……)

????????????????????????cjk-ideographic?漢字小寫數碼（一，二）

????????????????????????lower-roman??小寫羅馬數字

????????????????????????upper-roman??大寫羅馬數字

????????????????????????lower-alpha??小寫英文字母

????????????????????????upper-alpha??大寫英文字母

????*/

2.使用圖片替代實心圓點：

<style> /* 嵌入式使用css,一般寫在head中 */ul li {/* 小括號里為圖片的相對路徑 */list-style-image: url(./picture.png); } </style>

---

二.ol是有序列表

????????各個列表項會按照一定順序排列，如網頁中常見的游戲排行榜，歌曲排行榜等。

????????默認示例表現為（默認帶有數字）：

<ol><li>有序列表項1</li><li>有序列表項2</li><li>有序列表項3</li> </ol>

????????樣式修改方法與ul類似。

常見問題：

1.修改有序列表的起始數字由（默認的1變成2）

<ol start="2"><li>有序列表項1</li><li>有序列表項2</li><li>有序列表項3</li> </ol>

---

?擴展：

ul 和ol都是是塊級元素可以定義寬和高 。

<li>表示行排列不要單獨使用，需要放在<ul>和<ol>里面配合使用，不然會導致代碼混亂，不好維護等其他問題。

HTML5不再支持<ul> type 屬性，請使用 CSS替代。

CSS 語法:<ul style="list-style-type:square">

總結

以上是生活随笔為你收集整理的ul和ol的区别以及经验总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。