本文主要介绍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. 廖雪峰Java11多线程编程-2线程同步-2synchronized方法

    1.Java使用synchronized对一个方法进行加锁 class Counter{ int count = 0; public synchronized void add(int n){ cou ...

  2. 洛谷P3376【模板】网络最大流 ISAP

    这篇博客写得非常好呀. 传送门 于是我是DCOI这一届第一个网络流写ISAP的人了,之后不用再被YKK她们嘲笑我用Dinic了!就是这样! 感觉ISAP是会比Dinic快,只分一次层,然后不能增广了再 ...

  3. koa2 安装环境

    1.安装koa2 npm install koa@2 -g 2.创建项目 (1)安装koa2生成器 npm install koa-generator -g (2)koa2生成一个test项目 koa ...

  4. 深入浅出 Java Concurrency (28): 线程池 part 1 简介[转]

    从这一节开始正式进入线程池的部分.其实整个体系已经拖了很长的时间,因此后面的章节会加快速度,甚至只是一个半成品或者简单化,以后有时间的慢慢补充.完善. 其实线程池是并发包里面很重要的一部分,在实际情况 ...

  5. 第一周课堂笔记2th

    上课笔记2th https://mubu.com/doc/2gxvIvVLG0(老师笔记网址) 1.     python python运行过程 把源代码转化成字节码(机器不能识别) 也可能不产生py ...

  6. <Python基础>类和对象(初级)---烧开水的例子

    ''' 类:模板(模子) 类的名称:类名(人) 类的属性:一组数据(年龄,身高) 类的方法:进行操作的方法(走,跑,吃,喝) 对象:实体 类的抽象:把现实中的物品用类去表示 ''' #创建一个类 cl ...

  7. Image 转换成 Icon

    /// <summary> /// Converts an image into an icon. /// </summary> /// <param name=&quo ...

  8. css 渐变背景

    background: linear-gradient(left,#fa7f6d, #fc5e7f); left: 从左边开始

  9. linux crontab定时任务运行shell脚本（shell执行sql文件）

    https://www.cnblogs.com/tiankongjava/p/6106743.html 今天做个linux定时任务(每晚12点把表汇总). 顺便写个博客记录一下~~ 为什么用linux ...

  10. 原生js封装ajax代码

    方法一:(类似jQuery的封装方法) 1.ajax函数封装: /* *author: Ivan *date: 2014.06.01 *参数说明: *opts: {'可选参数'} **method: ...