有序清单和无序列表和有序列表的结合应用

悲酥清风
悲酥清风
悲酥清风
826
文章
55
评论
Dreamweaver1 3,623,749阅读模式

有序清单

有序号条例式清单<ol>与<li>（即将被废弃的标签）

格式:

  1. <ol>
  3.         <li>…</li>
  5.         <li>…</li>
  7.         <li>…</li>
  9.         <li>…</li>
  11.     </ol>

功能:

<ol>有序条列清单的开始.

</ol>表示结束.

<li>…</li>表示一个项目.

<ol>的属性

属性名称属性值说明（五种属性）

type=”1” 表示以1,2,3,4 来表示

type=” a” 表示以a,b,c,d 来表示

type=” A” 表示以A,B,C,D 来表示

type=” i”表示以i,ii ,iii 来表示

type=” I” 表示以I,II,III 来表示

举例一：

  1. <body>
  3.         <ol>
  5.             <li>语文</li>
  7.             <li>数学</li>
  9.             <li>英语</li>
  11.             <li>大综合</li>
  13.         </ol>
  15.     </body>

在浏览器中默认排序为有序排序  注：<ol></ol>=<ol type=”1”></ol>有序清单和无序列表和有序列表的结合应用

 举例二：

type=” a”

例：

  1. <body>
  3.         <ol type=”a”>
  5.             <li>语文</li>
  7.             <li>数学</li>
  9.             <li>英语</li>
  11.             <li>大综合</li>
  13.         </ol>
  15.     </body>

有序清单和无序列表和有序列表的结合应用

接下来几个大家慢慢去试验。

 

那么type属性可不可以放到<li>中呢？接下来试验一下：

  1. <body>
  3.         <ol type="a">
  5.             <li type="i">语文</li>
  7.             <li>数学</li>
  9.             <li>英语</li>
  11.             <li>大综合</li>
  13.         </ol>
  15.     </body>

有序清单和无序列表和有序列表的结合应用

  1. <body>
  3.         <ol type="a">
  5.             <li type="i">语文</li>
  7.             <li type="A">数学</li>
  9.             <li>英语</li>
  11.             <li>大综合</li>
  13.         </ol>
  15.     </body>

有序清单和无序列表和有序列表的结合应用

以上两个例子证明，不管在第几条<li>中加入属性，都会从第一条<li>开始计算，然后根据相应属性排序显示不同属性<li>的当前位置，同时也说明<ol><li></li></ol>的属性优先级为从小到大，<ol>为父标签，<li>为子标签，<li>的优先级高于<ol>。

 

无序列表和有序列表的结合应用

格式:

  1. <ul>
  3.        <li>
  5.        .....
  7.        <ol>
  9.            <li>…</li>
  11.            <li>…</li>
  13.            <li>…</li>
  15.            </ol>
  17.        </li>
  19.        <li>
  21.        .....
  23.        <ol>
  25.            <li>…</li>
  27.            <li>…</li>
  29.            <li>…</li>
  31.        </ol>
  33.        </li>
  35.    </ul>

应用：公司部门和各部门之间的等级划分，游戏中家族和各家族之间的等级划分，文章段落章节划分等。注：公司各部门没有等级关系，部门内部才有等级划分，游戏公会也如此。

例：

  1. <body>
  3.     游戏家族和每个家族的等级分布
  5.         <ul>
  7.             <li>海誓山盟家族
  9.                 <ol type="a">
  11.                     <li type="A">hm会长</li>
  13.                     <li>hm副会长</li>
  15.                     <li>hm长老</li>
  17.                     <li>hm普通成员</li>
  19.                 </ol>
  21.             </li>
  23.             <li>问鼎天下家族
  25.                 <ol type="i">
  27.                     <li type="I">wd会长</li>
  29.                     <li>wd副会长</li>
  31.                     <li>wd长老</li>
  33.                     <li>wd普通成员</li>
  35.                 </ol>
  37.             </li>
  39.             <li>硬汉无敌家族
  41.                 <ol type="1">
  43.                     <li type="i">yh会长</li>
  45.                     <li>yh副会长</li>
  47.                     <li>yh长老</li>
  49.                     <li>yh普通成员</li>
  51.                 </ol>
  53.             </li>
  55.         <ul/>
  57.     </body>

有序清单和无序列表和有序列表的结合应用

悲酥清风
  • 本文由 发表于 2015年4月22日 17:34:33
评论  1  访客  0  引用  1

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定