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
    
有序列表项2
    
有序列表项3

        样式修改方法与ul类似。

常见问题：

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

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

---

 扩展：

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

表示行排列不要单独使用，需要放在

和
里面配合使用，不然会导致代码混乱，不好维护等其他问题。

HTML5不再支持

type 属性，请使用 CSS替代。

CSS 语法: