本文主要介绍html中有序列表标签ol,li的高级应用,

　　在网页设计时我们设计有序列表内容时，经常会在每个ITEM前手工加上一个数值，或是由程序加上这个数值。

　　而如果使用有序列表标签ol和li，则不需要这么麻烦，根本不用自行去填写序数，当单层列表的时候这种特性似乎并不明显，而当使用多层的时候其特性就很明显了。

　　一般的标签ol和li有序列表应用代码如下：

 <ol>

<li>列表内容一</li>

<li>列表内容二</li>

<li>列表内容三</li>

<li>列表内容四</li>

<li>列表内容五</li>

</ol>

下面让我们看一下有序列表标签ol,li的高级应用：

改变有序列表的开始值

改变开始值的属性是："start"，下面是序列号从10开始的有序列表示例代码：

 <ol start="">

<li>列表内容一</li>

<li>列表内容二</li>

<li>列表内容三</li>

<li>列表内容四</li>

<li>列表内容五</li>

</ol>

运行代码查看效果：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>CSS在线-示例</title>

<style type="text/css">

</style>

</head>

<body>

<ol start="">

<li>列表内容一</li>

<li>列表内容二</li>

<li>列表内容三</li>

<li>列表内容四</li>

<li>列表内容五</li>

</ol>

</body>

</html>

设置有序列表的序号类型

改变编号类型的属性是："type"，type类型有以下几种类型：

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

下面是序列号类型是大写字母的有序列表示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>CSS在线-示例</title>

<style type="text/css">

</style>

</head>

<body>

<ol type="A">

<li>列表内容一</li>

<li>列表内容二</li>

<li>列表内容三</li>

<li>列表内容四</li>

<li>列表内容五</li>

</ol>

</body>

</html>

html中有序列表标签ol,li的高级应用的更多相关文章

  1. （三）HTML中的列表标签、框架集及表单标签

    一.HTML的列表标签 在网页中,经常可以看到,有的内容排列如同word里面的项目编号,这就是HTML的无序排列和有序排列起到的作用.. HTML之无序排列:<ul></ul> ...

  2. html中的列表标签

    1.<dl>定义列表,<dt>定义列表中的项目,<dd>对项目的描述 例: 效果: 2.<ul>无序列表,<li>列表项 例: 效果: 3. ...

  3. Markdown中有序列表和无序列表

    最近有用户问我,在简书写 Markdown, 一条有序列表 item 之后接一条无序列表 item,为什么 parse 的结果,第二个 item 依旧是作为有序列表的第二项显示,带有有序列表的列表符号 ...

  4. Redis中有序列表(ZSet)相关命令

    redis语序集合和集合set是一样内部value为string类型的集合,有序不允许重复元素 但是,zset的每个元素有一个double类型的分数(score).redis正是靠这个分数对元素从小到 ...

  5. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  6. HTML中的ul, ol,li , dl,dt, dd标签

    ul: unordered lists ol: ordered lists li: Lists ol 有序列表. <ol><li>……</li><li> ...

  7. Div+css中ul ol li dl dt dd使用

    ol 有序列表.<ol><li>……</li><li>……</li><li>……</li></ol>表现 ...

  8. ol,li,ul,dl,dt,dd

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...

  9. HTML 中的 dl(dt,dd)、ul(li)、ol(li)

    HTML <dl> 标签 #定义和用法 <dl> 标签定义了定义列表(definition list). <dl> 标签用于结合 <dt> (定义列表中 ...

随机推荐

  1. day1-初识Python以及环境搭建

    ---恢复内容开始--- 为什么学习Python? 软件质量:python的可读性很强,易于理解,非常接近于人类的自然语言. 提高开发者效率:相当于C,C++和JAVA等编译/静态型语言,Python ...

  2. 2016.10.5初中部上午NOIP普及组比赛总结

    2016.10.5初中部上午NOIP普及组比赛总结 这次的题目出得挺有质量的.但我觉得我更应该努力了. 进度: 比赛:0+20+0+0=20 改题:AC+AC+AC+AC=AK kk的作业 这题我错得 ...

  3. ThinkPHP支持模型的分层

    ThinkPHP支持模型的分层 ,除了Model层之外,我们可以项目的需要设计和创建其他的模型层. 大理石平台支架 通常情况下,不同的分层模型仍然是继承系统的\Think\Model类或其子类,所以, ...

  4. python中的多线程编程与暂停、播放音频的结合

    先给两个原文链接: https://blog.csdn.net/u013755307/article/details/19913655 https://www.cnblogs.com/scolia/p ...

  5. 解决python中import时无法识别自己写的包和模块的方法

    我们用pycharm打开自己写的代码,当多个文件之间有相互依赖的关系的时候,import无法识别自己写的文件,但是我们写的文件又确实在同一个文件夹中, 这种问题可以用下面的方法解决: 1)打开File ...

  6. CCPC-Wannafly Summer Camp 2019 全记录

    // 7.19-7.29 东北大学秦皇岛校区十天训练营,题目都挂在了Vjudge上.训练期间比较忙,没空更博总结,回来继续补题消化. Day1 这天授课主题是简单图论,节奏挺好,wls两小时理完图论里 ...

  7. 8种nosql数据库对比

    1. CouchDB 所用语言: Erlang 特点:DB一致性,易于使用 使用许可: Apache 协议: HTTP/REST 双向数据复制, 持续进行或临时处理, 处理时带冲突检查, 因此,采用的 ...

  8. JZOJ5822 【NOIP提高A组模拟2018.8.16】 量子纠缠

    这是一道很巧妙的题目. 今早,我调了好久,终于将它切掉了-- 题目 Description Input 第一行包含一个正整数 m,代表操作数. 接下来 m 行,每行可能有以下形式: 1 s 代表将数字 ...

  9. 【ZJOI2007】【BZOJ1059】矩阵游戏 匈牙利算法

    题目描述 小Q是一个非常聪明的孩子,除了国际象棋,他还很喜欢玩一个电脑益智游戏——矩阵游戏.矩阵游戏在一个N*N黑白方阵进行(如同国际象棋一般,只是颜色是随意的).每次可以对该矩阵进行两种操作:行交换 ...

  10. https://blog.csdn.net/u012235003/article/details/54576737

    https://blog.csdn.net/u012235003/article/details/54576737