今天接到一個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.b5b6.com/06_1_zh.html
">聚丙烯酰胺是什么？</a></li>
<li>89 次閱讀: <br />
  <a href="
https://www.b5b6.com/05_3_zh.html
">聚丙烯酰胺種類有哪些？</a></li>
<li>46 次閱讀: <br />
  <a href="
https://www.b5b6.com/10_55_zh.html
">為什么你家的聚丙烯酰胺那么“貴” 別家的那么便宜？</a></li>
<li>45 次閱讀: <br />
  <a href="
https://www.b5b6.com/05_71_zh.html
">聚丙烯酰胺干粉(粒，粉)</a></li>
<li>41 次閱讀: <br />
  <a href="
https://www.b5b6.com/29_56_zh.html
">如何選擇價格合適又好用的聚丙烯酰胺產品？</a></li>
<li>36 次閱讀: <br />
  <a href="
https://www.b5b6.com/25_16_zh.html
">聚丙烯酰胺MSDS化學品安全技術說明書</a></li>
<li>32 次閱讀: <br />
  <a href="
https://www.b5b6.com/12_48_zh.html
">造紙行業中陽離子聚丙烯酰胺用途</a></li>
<li>29 次閱讀: <br />
  <a href="
https://www.b5b6.com/09_29_zh.html">GB/T
 31246-2014 水處理劑 陽離子型聚丙烯酰胺的技術條件和試驗方法</a></li>
<li>26 次閱讀: <br />
  <a href="
https://www.b5b6.com/14_25_zh.html">GB
 17514-2008 水處理劑 聚丙烯酰胺</a></li>
<li>24 次閱讀: <br />
  <a href="
https://www.b5b6.com/26_15_zh.html
">聚丙烯酰胺海關編碼(HSCODE)3906901000</a></li>

 效果還行，zblog模板的修改每天都能接到幾個單子也不錯，在解決各種問題中可以學習更多的CSS知識，鍛煉寫代碼的能力。