本节教程将展示三种不同风格的css3有序列表，列表的格式化一直是件很棘手的事情，至少天屹是这么认为滴~为了格式化计数数字，你需要移除默认的浏览器样式，并添加你自己的样式。本篇教程中你将会了解到如何使用css3对列表样式进行调整，从而得到一个漂亮的列表。

在线演示  下载源码

HTML标签结构：

很简单的一个无序列表结构

查看代码

1. <ol class="rounded-list">
2.     <li><a href="">项目一</a></li>
3.     <li><a href="">项目二</a></li>
4.     <li><a href="">项目三</a>
5.         <ol>
6.             <li><a href="">子项目一</a></li>
7.             <li><a href="">子项目二</a></li>
8.             <li><a href="">子项目三</a></li>
9.         </ol>
10.     </li>
11.     <li><a href="">项目四</a></li>
12.     <li><a href="">项目五</a></li>
13. </ol>

CSS样式：

下面的样式中使用了content，counter-increment 和counter-reset CSS 属性来实现列表的计数显示，如果你想详细连接这三个属性的用法，天屹推荐一篇不错的文章详细介绍了这三个属性，CSS content, counter-increment 和 counter-reset详解

查看代码

1. /**********基础样式***************/
2. ol{
3.     counter-reset: li; /* 初始化计数器 */
4.     list-style: none; /* 移除默认的计数 */
5.     *list-style: decimal; /*  兼容IE7 */
6.     font: 15px 'trebuchet MS', 'lucida sans';
7.     padding: 0;
8.     margin-bottom: 4em;
9.     text-shadow: 0 1px 0 rgba(255,255,255,.5);
10. }
11.  
12. ol ol{
13.     margin: 0 0 0 2em;
14. }

圆角形状数字列表CSS样式：

查看代码

1. /*********圆角形状数字***********/
2. .rounded-list a {
3.     position: relative;
4.     display: block;
5.     padding: .4em .4em .4em 2em;
6.     *padding: .4em;
7.     margin: .5em 0;
8.     background: #ddd;
9.     color: #444;
10.     text-decoration: none;
11.     border-radius: 1em;
12.     transition: all .3s ease-out;
13.     text-align: left;
14. }
15.  
16.     .rounded-list a:hover {
17.         background: #eee;
18.     }
19.  
20.         .rounded-list a:hover:before {
21.             transform: rotate(360deg);
22.         }
23.  
24.     .rounded-list a:before {
25.         content: counter(li);
26.         counter-increment: li;
27.         position: absolute;
28.         left: -1.3em;
29.         top: 50%;
30.         margin-top: -1.3em;
31.         background: #87ceeb;
32.         height: 2em;
33.         width: 2em;
34.         line-height: 2em;
35.         border: .3em solid #fff;
36.         text-align: center;
37.         font-weight: bold;
38.         border-radius: 2em;
39.         transition: all .3s ease-out;
40.     }

矩形形状数字列表:

修改上面ol的class为rectangle-list就可以使用了。

查看代码

1. .rectangle-list a {
2.     position: relative;
3.     display: block;
4.     padding: .4em .4em .4em .8em;
5.     *padding: .4em;
6.     margin: .5em 0 .5em 2.5em;
7.     background: #ddd;
8.     color: #444;
9.     text-decoration: none;
10.     transition: all .3s ease-out;
11.     text-align: left;
12. }
13.  
14.     .rectangle-list a:hover {
15.         background: #eee;
16.     }
17.  
18.     .rectangle-list a:before {
19.         content: counter(li);
20.         counter-increment: li;
21.         position: absolute;
22.         left: -2.5em;
23.         top: 50%;
24.         margin-top: -1em;
25.         background: #fa8072;
26.         height: 2em;
27.         width: 2em;
28.         line-height: 2em;
29.         text-align: center;
30.         font-weight: bold;
31.     }
32.  
33.     .rectangle-list a:after {
34.         position: absolute;
35.         content: '';
36.         border: .5em solid transparent;
37.         left: -1em;
38.         top: 50%;
39.         margin-top: -.5em;
40.         transition: all .3s ease-out;
41.     }
42.  
43.     .rectangle-list a:hover:after {
44.         left: -.5em;
45.         border-left-color: #fa8072;
46.     }

带内容的圆形数字列表：

html结构：

查看代码

1. <ol class="circle-list">
2.                 <li>
3.                     <h2>我是一个标题</h2>
4.                     <p>这里可以自定义你的内容...</p>
5.                 </li>
6.                 <li>
7.                     <h2>我是一个标题</h2>
8.                     <p>这里可以自定义你的内容...</p>
9.                 </li>
10.                 <li>
11.                     <h2>我是一个标题</h2>
12.                     <p>这里可以自定义你的内容...</p>
13.                 </li>
14.                 <li>
15.                     <h2>我是一个标题</h2>
16.                     <p>这里可以自定义你的内容...</p>
17.                 </li>
18.                 <li>
19.                     <h2>我是一个标题</h2>
20.                     <p>这里可以自定义你的内容...</p>
21.                 </li>
22.             </ol>

css样式：

查看代码

1. .circle-list li {
2.     padding: 2.5em;
3.     border-bottom: 1px dashed #ccc;
4.     text-align: left;
5. }
6.  
7. .circle-list h2 {
8.     position: relative;
9.     margin: 0;
10. }
11.  
12. .circle-list p {
13.     margin: 0;
14. }
15.  
16. .circle-list h2:before {
17.     content: counter(li);
18.     counter-increment: li;
19.     position: absolute;
20.     z-index: -1;
21.     left: -1.3em;
22.     top: -.8em;
23.     background: #f5f5f5;
24.     height: 1.5em;
25.     width: 1.5em;
26.     border: .1em solid rgba(0,0,0,.05);
27.     text-align: center;
28.     font: italic bold 1em/1.5em Georgia, Serif;
29.     color: #ccc;
30.     border-radius: 1.5em;
31.     transition: all .2s ease-out;
32. }
33.  
34. .circle-list li:hover h2:before {
35.     background-color: #ffd797;
36.     border-color: rgba(0,0,0,.08);
37.     border-width: .2em;
38.     color: #444;
39.     transform: scale(1.5);
40. }

总结：

样式中包含了一些css3数字动画效果，但是目前为止只有Firefox支持，希望其他的浏览器能快点支持这些很酷的效果。兼容所有主流浏览器，ie7/8整个结构也能够很好地显示，但是会缺失一些样式。