在以前的网页制作中,如果我们需要编辑一些有着顺序的内容时,通常都会手动在内容前加上数值。可当这些有序内容数量众多的时候,好像也不是一件轻松活。但自从css有序列表诞生以来,我们的烦劳也随之解决。通过有序列表,我们根本不用自行去填写序数。可能你觉得有序列表也是仅此而已,其实与无序列表相比,有序列表还有一些特殊形式?那么,它有什么特殊形式呢?下面让我们一起走进CSS有序列表OL的世界,说不定你会有新的发现喔!
首先我们看看有序列表的代码形式:
<ol>
<li>这就是列表的内容了,这是第一句www.kokojia.com</li>
<li>这就是列表的内容了,这是第二句</li>
<li>这就是列表的内容了,这是第三句www.kokojia.com</li>
<li>这就是列表的内容了,这是第四句</li>
<li>这就是列表的内容了,这是第五句www.kokojia.com</li>
</ol>
看上去,与无序列表的形式似乎没太大的区别,只是外围标签从ul换成了ol。但实际上,有序列表比无序列表具有更多的特殊形式。因为有序列表会涉及顺序的方方面面,具体表现为以下两个方面:
1.改变开始值
一般情况下,浏览器会从阿拉伯数字“1”开始自动有序编号。但在实际生活中,往往会有意外发生:譬如说有序列表由两个人去共同完成。那么,下一部分的人编号自然是要根据上一段最后一个编号加1为开始号,而不是从头开始编号。这时我们就需要改变列表的开始值。改变开始值的属性是”start”,写法是:
<ol start=”6″>
<li>这就是列表的内容了,这是第一句www.kokojia.com</li>
<li>这就是列表的内容了,这是第二句</li>
<li>这就是列表的内容了,这是第三句www.kokojia.com</li>
<li>这就是列表的内容了,这是第四句</li>
<li>这就是列表的内容了,这是第五句www.kokojia.com</li>
</ol>
上面这段代码的意思是列表的开始值从6开始。
2.改变编号类型
我们经常看到的列表编号似乎都是阿拉伯数字。如果每个人都是使用阿拉伯数字,好像也太单调,太没特色了吧!那么是否可以换换编号类型呢?答案是肯定的!使用的属性是type,但遗憾的是CSS有序列表提供的列表编号不多,只有五种:
A:使用大写字母作为编号,表现形式为A、B、C、D、E
a:使用小写字母作为编号,表现形式为a、b、c、c、e
I:使用大写罗马数字作为编号,表现形式为I、II、III、IV、V
i:使用小写罗马数字作为编号,表现形式为i、ii、iii、iv、v
1:使用阿拉伯数字作为编号,表现形式为1、2、3、4、5
在代码中的写法应该是:
<ol type=”A”>
<li>这就是列表的内容了,这是第一句www.kokojia.com</li>
<li>这就是列表的内容了,这是第二句</li>
<li>这就是列表的内容了,这是第三句www.kokojia.com</li>
<li>这就是列表的内容了,这是第四句</li>
<li>这就是列表的内容了,这是第五句www.kokojia.com</li>
</ol>
不知道大家有没有发现一个问题,这些编号好像没有中文喔!是的,无论是CSS1还是CSS2,都没有考虑中国,这对于我们中国人来说实在是一大憾事!
好了!关于有序列表特殊形式的内容我们就分析到这里了!通过本文的学习,你是否已经了解有序列表的特殊形式呢?如果还没有,不妨多看几遍!相信你一定会有收获的!