关于css中为什么ol标签不显示序号的解决办法

html-css029

关于css中为什么ol标签不显示序号的解决办法,第1张

首先,ol和ul分别代表序号和点的那种前缀,真正存在序号内容的是li标签,也就是并不能够仅仅书写ol标签

其次,在默认情况下,CSS的ol标签是存在序号的,如果你引入了CSS的重置文件,则ol的序号会被重置掉(设置为无)。

你可以尝试用如下代码,在你的浏览器当中看看效果

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>码匠- H5course</title>

</head>

<body>

<ol>

<li>HTML5</li>

<li>学堂</li>

<li>h5course</li>

</ol>

</body>

</html>

显示效果:

倒序是reversed,但是只有支持HTML5的浏览器才支持哦~IE9以下就不行了

例如:

<ol reversed>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

其他普通排序:

类型值     生成样式     序列举例  

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  

list-style-position://设置列表的标记的位置。

list-style-type://设置标志的类型。

list-style-image:url()//设置列表的标记是否使用图片。

用法:(Tips:list-style-type:属性值太多自己看图)

<head>

<style>

ol{

list-style-position:inside//标记在表单里面;

list-style-position:outside//标记在表单外面。

list-style-image:url(图片地址)

}

</style>

</head>

<body>

<ol>

<li>孔子</li>

<li>孟子</li>

</ol>

</body>