我们要想实现本站推荐的效果，把文章标题列表排版，如看到列表布局前有1 2 3 4 5 6 7等数字顺序，并且给前三名加上不同的背景，我们完全可以纯css实现，但通常我们对ul使用比较多，所以虽然是有序列表当然这里也使用ul li实现这个布局。
这里关键时如何切出图片素材便于布局。511遇见推荐图片作为背景图片素材，这样提高了浏览器的兼容性。为什么不用Ol，li,因为浏览器版本比较多而不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，这样容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片!!!
Html结构
<ul class=”array”>
<li><a href=”http://www.xxx.com/xxx-xxx.html”>xxxx</a></li>
<li><a href=”http://www.xxxx.com/xxxxx.html”>xxxx</a></li>
</ul>
CSS布局
ul.array{
margin:0 auto;
width:300px;
background:url(m-top.gif) no-repeat 0 5px；
}
ul.array li{
height:30px;
line-height:30px;
text-align:left;
overflow:hidden;
width:100%;
text-indent:28px；
}
整体Html源码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>纯css实现序列行数值排序</title>
<link href=”images/style.css” rel=”stylesheet” type=”text/css” />
<!– www.511yj.com –>
</head>
<body>
<ul class=”array”>
<li><a href=”http://www.xxx.com/xxx-xxx.html”>xxxx</a></li>
<li><a href=”http://www.xxxx.com/xxxxx.html”>xxxx</a></li>
</ul>
</body>
</html>
整体css源码
@charset “utf-8”;
body, div, ul, li{margin:0; padding:0;font-style: normal;
font:12px/22px “\5B8B\4F53”,Arial, Helvetica, sans-serif}
ol, ul ,li{list-style:none}
img {border: 0; vertical-align:middle}
body{color:#000000;background:#FFF; text-align:center}
a{color:#000000;text-decoration:none}
a:hover{color:#BA2636;text-decoration:underline}
ul.array{
margin:0 auto;
width:300px;
background:url(m-top.gif) no-repeat 0 5px;
}
ul.array li{
height:30px;
line-height:30px;
text-align:left;
overflow:hidden;
width:100%;
text-indent:28px;
}
