当先锋百科网

首页 1 2 3 4 5 6 7

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

1.png

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

2.png

本来想采用背景图片的,但实在太麻烦,还需要自己用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知识,锻炼写代码的能力。