码迷,mamicode.com
首页 > Web开发 > 详细

html中有序列表标签ol,li的高级应用

时间:2014-05-16 00:54:22      阅读:411      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   c   java   

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

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

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

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

bubuko.com,布布扣
 <ol>
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>
bubuko.com,布布扣

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

改变有序列表的开始值

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

bubuko.com,布布扣
 <ol start="10">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>
bubuko.com,布布扣

运行代码查看效果

bubuko.com,布布扣
 <!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="10">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>
</body>
</html>
bubuko.com,布布扣

bubuko.com,布布扣

设置有序列表的序号类型

改变编号类型的属性是:"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

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

bubuko.com,布布扣
<!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>
bubuko.com,布布扣

 

html中有序列表标签ol,li的高级应用,布布扣,bubuko.com

html中有序列表标签ol,li的高级应用

标签:style   blog   class   code   c   java   

原文地址:http://www.cnblogs.com/aobingyan/p/3730081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!