墨染说前端02-几种列表标签的学习

上一节中我们介绍了标题标签(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 ，这个呢现在很少用了，咱就不介绍了，如需了解可自行问度娘了。

好了，今天的就到这里，下次再见，希望你们每次都有收获。如果觉得不错，欢迎转发给有需要的人。