模板内容	<style> ul#test { list-style:none; padding:0px; margin:0px; } ul#test li{padding-left:26px;height:28px;line-height:26px;overflow:hidden;position:relative;} ul#test li.line{padding-left:0px;height:1px;line-height:1px;margin-bottom:3px;border-bottom:1px #E9E9E9 dotted;} ul#test .ranknum {display:block;position:absolute;left:0;top:6px;width:20px;height:16px;line-height:14px;font-size:10px;font-weight:bold;color:#666;text-align:center;background:url(http://www.jumbotcms.net/themes/default/images/rank_bg.gif) no-repeat 0 0;} ul#test .first{color:#FFF;background-position:0px -32px} ul#test .second{color:#FFF;background-position:0px -48px} ul#test .third{color:#FFF;background-position:0px -16px} </style> <ul id="test"> <jcms:contentloop channelid="8" classid="11" repeatnum="10" orderfield="viewnum" fields="[title],isimg,istop,viewnum"> <#foreach> <li> <#if test="${equals(i,1)}"> <!--~判断是不是第1条记录~--> <span class="ranknum first">${i}</span> <#elseif test="${equals(i,2)}"><!--~判断是不是第2条记录~--> <span class="ranknum second">${i}</span> <#elseif test="${equals(i,3)}"><!--~判断是不是第3条记录~--> <span class="ranknum third">${i}</span> <#else> <span class="ranknum">${i}</span> <#/if> <a href="$_{url}" target="_blank">${cutstring(field.title,30)} <#if test="${equals(field.isimg,1)}"><!--~判断有没有缩略图~-->[图]<#/if> <#if test="${equals(field.istop,1)}"><!--~判断是不是推荐~-->[荐]<#/if> </a>(${field.viewnum})</li> <#if test="${div(i,5,0)}"><!--~如果被5整除就画一条直线~--> <li class="line"></li> <#/if> <#/foreach> </jcms:contentloop> </ul>
输出效果
最终HTML	<style> ul#test { list-style:none; padding:0px; margin:0px; } ul#test li{padding-left:26px;height:28px;line-height:26px;overflow:hidden;position:relative;} ul#test li.line{padding-left:0px;height:1px;line-height:1px;margin-bottom:3px;border-bottom:1px #E9E9E9 dotted;} ul#test .ranknum {display:block;position:absolute;left:0;top:6px;width:20px;height:16px;line-height:14px;font-size:10px;font-weight:bold;color:#666;text-align:center;background:url(http://www.jumbotcms.net/themes/default/images/rank_bg.gif) no-repeat 0 0;} ul#test .first{color:#FFF;background-position:0px -32px} ul#test .second{color:#FFF;background-position:0px -48px} ul#test .third{color:#FFF;background-position:0px -16px} </style> <ul id="test"> <li> <span class="ranknum first">1</span> <a href="/html/xinde/detail_2010_06/16/159.shtml" target="_blank">C#调用C++导出类的一个实例 </a>(9667)</li> <li> <span class="ranknum second">2</span> <a href="/html/xinde/detail_2010_11/14/177.shtml" target="_blank">解决服务器上swftools中pdf2swf. </a>(7282)</li> <li> <span class="ranknum third">3</span> <a href="/html/xinde/detail_2010_06/30/162.shtml" target="_blank">不用webserive，asp.net也可以定 </a>(6492)</li> <li> <span class="ranknum">4</span> <a href="/html/xinde/detail_2011_07/15/201.shtml" target="_blank">SQL语句：拆分某一个字段为多个字 [荐] </a>(3736)</li> <li> <span class="ranknum">5</span> <a href="/html/xinde/detail_2009_09/12/80.shtml" target="_blank">C#.net获取存储过程的Return返回 [荐] </a>(3368)</li> <li class="line"></li> <li> <span class="ranknum">6</span> <a href="/html/xinde/detail_2010_01/28/122.shtml" target="_blank">开源FLV播放器vcastr3.swf使用方 [荐] </a>(2867)</li> <li> <span class="ranknum">7</span> <a href="/html/xinde/detail_2010_04/30/154.shtml" target="_blank">一段附加sql server数据库的脚本 </a>(2696)</li> <li> <span class="ranknum">8</span> <a href="/html/xinde/detail_2009_09/12/77.shtml" target="_blank">IIS之当前标识(NT AUTHORITY\NET [荐] </a>(2691)</li> <li> <span class="ranknum">9</span> <a href="/html/xinde/detail_2010_09/10/168.shtml" target="_blank">使用Dreamweaver 3分钟整理出一套 </a>(2084)</li> <li> <span class="ranknum">10</span> <a href="/html/xinde/detail_2010_11/04/174.shtml" target="_blank">SQL语句：更新统计子栏目某一个字 [荐] </a>(2040)</li> <li class="line"></li> </ul>