上一节中我们介绍了标题标签(H1~H6)、段落文本标签P、图片标签img、超链接a、经常拿来布局的div，接下来我们再看几个列表标签。
1.有序列表
ol 是 Ordered List（有序列表）的缩写。与之相对的是无序列表 ul 标签。列表里的项目用 li 标签记述。
举个栗子:
默认的有序列表是已数字的方式排列
显然这样并不能满足大众的需求，我们可以通过在 ol 标签里加 type属性改变这种排序
小写英文字母显示排序
大写英文字母显示排序
希腊数字显示排序
这些排序并不是只能从1到无穷大，或者从A到Z，我们也可以改变起始位置以及是否倒序排列
这里设置的是起始位置为4，也就是D开始
如果需要倒序排列，我们需要加上reversed，当然此属性是HTML5新增的，IE9以下吃地沟油长大的IE浏览器是不支持的。
倒序排列
不过这些默认的都暴丑，满足不了现在这个看脸时代大众的需求，所以一般很少用，那我们用什么呢？
没错，我们用ul无序列表，再结合其他的标签就可以做出比较好看的效果，无序列表可谓是前端布局的常客了，这个标签后面我们会经常用到，大家要牢记哦。
默认的无序列表效果
你会发现列表项li前面有个默认的小圆点，这个美人痣是可以去掉的，只需要给li加上 list-style:none （列表样式：无）
接下来我们做个小案例，先上效果图：
截图自魅族官网
那接下来我们布局一下HTML结构，可以看到前面的排序1、2、3、4、5都不是我们刚才的那种丑的默认效果，所以我们需要借助别的标签完成。
HTML结构以及默认效果图
那接下来就是美化这个现实的效果，以下内容需要有CSS基础，如果你是零基础，不妨跟着我敲，这里所有的CSS知识后面都会讲到。
CSS样式，已备注
这里为了给列表项加上不同的底色，所以更改了HTML，具体如下。
更改的部分HTML
这里的class是类名，就像咱们给别人取的外号一样，比如大家见了我就叫我的外号：帅哥，懂了吧。
那最后给展示一下我们的效果图：
最终效果图
其实还有一种列表标签叫做 dl dt dd ，这个呢现在很少用了，咱就不介绍了，如需了解可自行问度娘了。
好了，今天的就到这里，下次再见，希望你们每次都有收获。如果觉得不错，欢迎转发给有需要的人。
网友评论