本文主要介绍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. JUC 一 Callable

    java.util.concurrent.Callable是一个泛型接口,只有一个call()方法 Callable和Runnable的区别 Callable使用call()方法,Runnable使用 ...

  2. ThinkPHP 读取数据

    在ThinkPHP中读取数据的方式很多,通常分为读取数据.读取数据集和读取字段值. 步进电机和伺服电机 数据查询方法支持的连贯操作方法有: 连贯操作 作用 支持的参数类型 where 用于查询或者更新 ...

  3. PAT甲级——A1005 Spell It Right

    题目描述 Given a non-negative integer N, your task is to compute the sum of all the digits of N, and out ...

  4. MySQL数据库--创建表，查询

    MySQL创建表: 表(一)Student (学生表): CREATE TABLE `Student` ( `sno` ) DEFAULT NULL, `sname` ) DEFAULT NULL, ...

  5. ps命令详解-转

    名称:ps使用权限:所有使用者使用方式:ps [options] [--help]说明:显示瞬间行程 (process) 的动态参数:ps的参数非常多, 在此仅列出几个常用的参数并大略介绍含义-A   ...

  6. selenium 三种断言以及异常类型

    selenium 提供了三种模式的断言:assert .verify.waitfor Assert 失败时,该测试将终止. Verify 失败时,该测试将继续执行,并将错误记入日显示屏 .也就是说允许 ...

  7. HtmlHelper2

    一.隐式从ViewBag取数据 1.action中的代码: ViewBag.UserName = "admin"; cshtml中的代码: @Html.TextBox(" ...

  8. Nodejs之路（一）—— Nodejs入门

    不知不觉,现在已经习惯学一点东西,就写博客记录一下.这次学习Nodejs主要是在B站上看的视频教程,感觉讲的很是不错,所以我想把在看视频学习过程中的一些重要知识点记录下来方便以后自己快速查阅. --- ...

  9. Vue配置多个跨域目标链接

    参考: https://segmentfault.com/a/1190000016199721 1.通过使用的http-proxy-middleware来实现跨域代理 devServer: { dis ...

  10. Drupal创建Omega 4.x 子主题layout笔记

    Adding a new region to your Omega 4.0 subtheme (Drupal) Drupal: Creating a custom layout with Omega ...