1、第一步：首先根据实际情况用网页制作软件打开或新建一个网页文档。这里我新建一个网页文档。
2、第二步：开始编写HTML代码进行页面的简单布局以实现相应的效果。比如写上有序列表代码。
<div id="" class="">
<ol <div id="list" >
<li>这是第一个</li>
<li>这是第二个</li>
<li>这是第三个</li>
<li>这是第四个</li>
</ol>
</div>
3、第三步：此时为了方便做对比，先在浏览器中进行效果的预览。
4、第四步：编写javascript代码，首先获取<ol>标签下的<li>标签。
var t= document.getElementById("list");//首先获取ol元素列表
var a= t.getElementsByTagName("li");//获取ol元素下li标签
5、第五步：当获取到<li>标签后，就可以为每个<li>设置不同的样式。先给第一个li标签通过javascript设置属性。
a[0].style.cssText=" color:#ff6699; font-size:20px;";//a[0]就是获取第一个li标签
6、第六步：用同样的方法对其他li标签设置不同属性。a[1]获取第二个、a[2]获取第三个，以此类推。
var t= document.getElementById("list");//首先获取ol元素列表
var a= t.getElementsByTagName("li");//获取ol元素下li标签
a[0].style.cssText=" color:#ff6699; font-size:20px;";//a[0]就是获取第一个li标签
a[1].style.cssText=" color:#6600ff; font-size:40px;";//a[1]就是获取第二个li标签
a[2].style.cssText=" color:#00cc33; font-size:60px;";//a[2]就是获取第三个li标签
a[3].style.cssText=" color:#ff0000; font-size:80px;";//a[3]就是获取第四个li标签
7、总结：
1、首先编写布局标签，包括列表标签<ol><li>
2、接着编写javascript代码
3、先利用document方法获取列表标签<ol>
4、接着通过标签名称的方法获取li标签
5、列表标签中list[0]就代表的是第一个li标签，其他以此类推
6、将获取到的li标签通过”style.cssText=""方法为每个li设置不同的属性即可“
