本文主要介绍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>

最新文章

  1. Unity运行时检测Altas使用情况
  2. Paxos算法与Zookeeper分析
  3. XAF视频教程来啦,已出15课
  4. 转-squid介绍及其简单配置
  5. web性能优化——浏览器相关
  6. AQS 与 LockSupport
  7. hadoop疑难杂症解析
  8. CSS reset--重置样式
  9. Devexpress GridControl中combobox级联显示 z
  10. oc-10-函数与方法的区别
  11. ASP.net WebAPI 上传图片
  12. Golang测试技术
  13. NOIP2017SummerTraining0706
  14. [Css] css3的flex布局
  15. 使用Spring的@Async创建异步方法
  16. VMware5.5-高可用性和动态资源调度(DRS)
  17. java.lang.ClassNotFoundException: org.apache.commons.fileupload.FileItemFactory
  18. Liblinear and Libsvm-rank训练数据的bash代码
  19. MPLAB X IDE V4.15 创建工程,编译,问题处理
  20. 关于web开发中,图片加载失败替换为默认图片

热门文章

  1. 【JZOJ3397】【luoguP4556】雨天的尾巴
  2. 廖雪峰Java11多线程编程-3高级concurrent包-4Concurrent集合
  3. 数组(Array)与 字符串(String)公用的属性与方法
  4. linux系统添加定时任务
  5. Webstorm在MAC下的安装方法
  6. Struts2OGNL
  7. WinForm中Dispose()和Close()的区别
  8. Appscan standard怎么设置外部浏览器为IE
  9. VC窗体透明而控件不透明以及Static文本背景透明方法
  10. 路飞学城-Python爬虫集训-第二章