当前位置:天才代写 > tutorial > 网页教程 > 浅析CSS有序列表OL的一些特殊形式

浅析CSS有序列表OL的一些特殊形式

2018-05-17 08:00 星期四 所属: 网页教程 浏览:586

       在以前的网页制作中,如果我们需要编辑一些有着顺序的内容时,通常都会手动在内容前加上数值。可当这些有序内容数量众多的时候,好像也不是一件轻松活。但自从css有序列表诞生以来,我们的烦劳也随之解决。通过有序列表,我们根本不用自行去填写序数。可能你觉得有序列表也是仅此而已,其实与无序列表相比,有序列表还有一些特殊形式?那么,它有什么特殊形式呢?下面让我们一起走进CSS有序列表OL的世界,说不定你会有新的发现喔!

浅析CSS有序列表OL的一些特殊形式_CSS教程_有序列表_CSS基础_课课家

  首先我们看看有序列表的代码形式:

  <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,都没有考虑中国,这对于我们中国人来说实在是一大憾事!

  好了!关于有序列表特殊形式的内容我们就分析到这里了!通过本文的学习,你是否已经了解有序列表的特殊形式呢?如果还没有,不妨多看几遍!相信你一定会有收获的!

 

    关键字:

天才代写-代写联系方式