我们要想实现本站推荐的效果，把文章标题列表排版，如看到列表布局前有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.511yj.com/centos-epel-yum.html">Centos6.x上安装EPEL</a></li>
<li><a href="http://www.511yj.com/bootstrap-panels-default.html">Bootstrap教程 面板（Panels）</a></li>
<li><a href="http://www.511yj.com/centos-web-php.html">centos6.x安装web开发环境nginx-php</a></li>
<li><a href="http://www.511yj.com/centos-nginx-web.html">centos6.x下修改nginx服务网站目录</a></li>
<li><a href="http://www.511yj.com/centos-hosts-hostsname.html">centos6.x配置虚拟主机名及域名hosts</a></li>
<li><a href="http://www.511yj.com/centos-yum-kernel.html">centos6.4或者6.5使用yum的elrepo源升级内核</a></li>
<li><a href="http://www.511yj.com/centos-yum-php.html">centos7.2yum安装php70w.x86_64</a></li>
<li><a href="http://www.511yj.com/centos-update-kernel.html">centos6.4或者6.5编译升级内核3.10.28</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.511yj.com/centos-epel-yum.html">Centos6.x上安装EPEL</a></li>
<li><a href="http://www.511yj.com/bootstrap-panels-default.html">Bootstrap教程 面板（Panels）</a></li>
<li><a href="http://www.511yj.com/centos-web-php.html">centos6.x安装web开发环境nginx-php</a></li>
<li><a href="http://www.511yj.com/centos-nginx-web.html">centos6.x下修改nginx服务网站目录</a></li>
<li><a href="http://www.511yj.com/centos-hosts-hostsname.html">centos6.x配置虚拟主机名及域名hosts</a></li>
<li><a href="http://www.511yj.com/centos-yum-kernel.html">centos6.4或者6.5使用yum的elrepo源升级内核</a></li>
<li><a href="http://www.511yj.com/centos-yum-php.html">centos7.2yum安装php70w.x86_64</a></li>
<li><a href="http://www.511yj.com/centos-update-kernel.html">centos6.4或者6.5编译升级内核3.10.28</a></li>
</ul></body></html>
整体css源码
@charset "utf-8";
/* www.511yj.com */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;
}
说明
这里用到了背景图片m-top.gif，颜色根据自己网站的风格，设计或者下载一个就可以了。