你的位置:首页 > 网页设计

[网页设计]CSS自动加序号


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <head>
<title>CSS自动加序号Ordered List样式</title>
<style type="text/css">
/* list 1 style */
#list1 {
font: italic 1em Georgia, Times, serif;
color: #999999;
}
#list1 p {
font: normal .8em Arial, Helvetica, sans-serif;
color: #000000;
}
/* list 2 styles */
#list2 {
font: italic 1em Georgia, Times, serif;
color: #999;
list-style: lower-roman;
}
#list2 p {
font: normal .85em Georgia, Times, serif;
color: #000;
}
/* list 3 styles */
#list3 {
font: normal 1.1em Arial, Helvetica, sans-serif;
color: #666;
}
#list3 p {
font: normal .7em Arial, Helvetica, sans-serif;
color: #000;
border-left: solid 1px #999;
margin: 0;
padding: 0 0 1em 1em;
}
</style>
</head>
<body>
<div>http://www.999jiujiu.com/</div>
<ol id="list1">
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容</p>
</li>
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容</p>
</li>
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容</p>
</li>
</ol>
<ol id="list2">
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示</p>
</li>
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容</p>
</li>
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容</p>
</li>
</ol>
<ol id="list3">
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容</p>
</li>
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容
</p>
</li>
<li>
<p>显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内
容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容,显示内容</p>
</li>
</ol>
</body>
</html>