本文主要介绍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. pure-Python PDF library

    # -*- coding: utf-8 -*- # # vim: sw=4:expandtab:foldmethod=marker # # Copyright (c) 2006, Mathieu Fe ...

  2. 廖雪峰Java11多线程编程-3高级concurrent包-4Concurrent集合

    Concurrent 用ReentrantLock+Condition实现Blocking Queue. Blocking Queue:当一个线程调用getTask()时,该方法内部可能让给线程进入等 ...

  3. mysql权限操作

    1.mysql权限操作 grant select,insert on test1.tb1 to ltx2@127.0.0.1 默认权限:什么都没有 2.用户管理特殊命令: 创建用户:create us ...

  4. thinkphp 表达式查询

    上面的查询条件仅仅是一个简单的相等判断,可以使用查询表达式支持更多的SQL查询语法,也是ThinkPHP查询语言的精髓,查询表达式的使用格式: $map['字段名'] = array('表达式','查 ...

  5. android 头像选择以及裁剪

    一.布局申明 <ImageView android:id="@+id/head_image" android:layout_width="80dp" an ...

  6. PHP如何打造一个高可用高性能的网站呢？

    https://blog.csdn.net/jwq101666/article/details/80162245 1. 说到高可用的话要提一下redis,用过的都知道redis是一个具备数据库特征的n ...

  7. 运行pip报错：Fatal error in launcher: Unable to create process using '’路径’'

    参考此文:https://blog.csdn.net/cjeric/article/details/73518782 win7笔记本安装了Python2.7,Python3.7,以及anaconda3 ...

  8. Docker系列(十三)：Kubernetes Service的负载均衡和网络路由的秘密

    Kubernetes Service设计分析 什么是单体程序?所有的模块都在一个进程中 微服务,每一个服务是一个进程的模式 kubernetes中的service其实只是一个概念,是一组相同lable ...

  9. JDK源码阅读--Hashtable

    public class Hashtable<K,V> extends Dictionary<K,V> implements Map<K,V>, Cloneable ...

  10. jeecms v9 vue环境搭建

    一.安装NODEJS运行环境 前往nodejs官网下载nodejs,https://nodejs.org/en/ ,建议下载最新稳定版的,下载后安装即可,下载选择类似如下 安装完毕之后,在cmd中输入 ...