ul和ol的区别以及经验总结

一.ul是无序列表

网页中最为常见的列表，各个列表项之间为并列关系，没有顺序级别之分，如导航栏，新闻话题展示区等。

默认示例表现为（默认带有实心圆）：

• 无序列表项1
• 无序列表项2
• 无序列表项3

常见问题：

1.去除默认样式的实心圆：

/* 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.使用图片替代实心圆点：

二.ol是有序列表

各个列表项会按照一定顺序排列，如网页中常见的游戏排行榜，歌曲排行榜等。

默认示例表现为（默认带有数字）：

1. 有序列表项1
2. 有序列表项2
3. 有序列表项3

样式修改方法与ul类似。

常见问题：

1.修改有序列表的起始数字由（默认的1变成2）

2. 有序列表项1
3. 有序列表项2
4. 有序列表项3

扩展：

ul 和ol都是是块级元素可以定义宽和高 。