网页制作经验分享:干净简洁的网页列表代码

css代码：

* {
margin: 0;
padding: 0;
}

nav {
margin: 50px;
}

ul {
overflow: auto;
list-style-type: none;
}

li {
height: 25px;
float: left;
margin-right: 0px;
border-right: 1px solid #aaa;
padding: 0 20px;
}

li:last-child {
border-right: none;
}

li a {
text-decoration: none;
color: #ccc;
font: 25px/1 Helvetica, Verdana, sans-serif;
text-transform: uppercase;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

li a:hover {
color: #666;
}

li.active a {
font-weight: bold;
color: #333;
}

5.大数字开头的列表 Big Numbers Ordered List
上面介绍的都是无序的列表，如果我们想要一个有序的列表，在每一个列表元素的最开头加上数字能提示用户这是一个按顺序排列的内容。如果能将这个数字的样式显示的不同，将会有更好的直观感受。
在这里查看demo和源码 CodePen.

html代码：

<div>
<ol>
<li><span>1.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis. </p></li>
<li><span>2.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
<li><span>3.</span><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. </p></li>
</ol>
</div>

css代码：

div {
width: 500px;
margin: 10px
}

ol {
color: #ccc;
list-style-type: none;
}

ol li {
position: relative;
font: bold italic 45px/1.5 Helvetica, Verdana, sans-serif;
margin-bottom: 20px;
}

li p {
font: 12px/1.5 Helvetica, sans-serif;
padding-left: 60px;