dw有序列表ol怎么用? HTML页面添加有序列表ol的教程

时间：2024-05-08 10:36:31|栏目：Dreamweaver教程|点击：次

dw有序列表ol怎么用？ Dreamweaver页面中国的内容需要添加列表效果，该怎么添加有序列表呢？下面我们就来看看HTML页面添加有序列表ol的教程

在网站中经常见到非常有顺序的排列，1、2、3···,很多时候这种情况都是使用有序列表来做的，今天我们就重点来看下有序列表的一般使用方法。

有序列表的标签是ol，一半ol都会和li一起使用，如图，使用ol和li做出一个数据

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图1)

打开预览后，就是这样的一个效果，如图，前面非常有顺序的1 2 3 排列

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图2)

这就是ol的属性了，还可以更改有序列表的数字显示方式，如图，在ol后面添加一个type属性，后面1就是他对应的属性设置了

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图3)

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图4)

在type后面还可以添加A，这样的数据排列就是从A开始的

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图5)

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图6)

还可以在后面添加小写字母a，然后后面数据排列就是从小a开始的，如图

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图7)

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图8)

还可以添加小写的i，

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图9)

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图10)

还有大些的I，就形成了大写的罗马数字字符，如图所示。

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图11)

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图12)

如果不想要li的样式属性，可以对其添加清除命令。

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图13)

dw有序列表ol怎么用? HTML页面添加有序列表ol的教程(图14)

以上就是HTML页面添加有序列表ol的教程

本文地址：https://www.fushidao.cc/wangyezhizuo/327.html