今天接到一个zblog模板修改单子，是修改我之前仿制的SEOWHY家的起家模板ydseo，左侧栏中的热门文章，如下图：

列表序号使用的是背景图片，太大了，确实没什么必要也多余，其中一个用户付费修改样式，让彩色序号放于阅读次数前面，文字可以自由换行，修改成如下图所示的：

本来想采用背景图片的，但实在太麻烦，还需要自己用PS做图，很无聊是不，所以就直接使用css即可。

CSS如下：

.shu{color:#fff;border-radius:2px; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; margin-right:5px; font-family:Verdana, Geneva, sans-serif;}
.shu1{background:#d9534f;}
.shu2{background:#f0ad4e;}
.shu3{background:#5cb85c}
.shu4{background:#428bca}
.shu5{background:#5bc0de}
.shu6{background:#5bc0de}
.shu7{background:#5bc0de}
.shu8{background:#5bc0de}
.shu9{background:#999999}
.shu10{background:#999999}

HTML代码如下：

<li>254 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/06_1_zh.html
">聚丙烯酰胺是什么？</a></li>
<li>89 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/05_3_zh.html
">聚丙烯酰胺种类有哪些？</a></li>
<li>46 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/10_55_zh.html
">为什么你家的聚丙烯酰胺那么“贵” 别家的那么便宜？</a></li>
<li>45 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/05_71_zh.html
">聚丙烯酰胺干粉(粒，粉)</a></li>
<li>41 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/29_56_zh.html
">如何选择价格合适又好用的聚丙烯酰胺产品？</a></li>
<li>36 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/25_16_zh.html
">聚丙烯酰胺MSDS化学品安全技术说明书</a></li>
<li>32 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/12_48_zh.html
">造纸行业中阳离子聚丙烯酰胺用途</a></li>
<li>29 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/09_29_zh.html">GB/T
 31246-2014 水处理剂 阳离子型聚丙烯酰胺的技术条件和试验方法</a></li>
<li>26 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/14_25_zh.html">GB
 17514-2008 水处理剂 聚丙烯酰胺</a></li>
<li>24 次阅读: <br />
  <a href="
https://www.yzktw.com.cn/26_15_zh.html
">聚丙烯酰胺海关编码(HSCODE)3906901000</a></li>

 效果还行，zblog模板的修改每天都能接到几个单子也不错，在解决各种问题中可以学习更多的CSS知识，锻炼写代码的能力。