• 微信
您当前的位置:首页  > 文章 >  织梦排行榜制作

织梦排行榜制作

作者:admin 时间:2019-12-24 阅读数:8人
 织梦在做文章排行榜时,效果如下图,这个排行主要有两个知识点,其一是列表前面数字递增,其二是列表的前三篇文章序号背景色蓝色,其它序号背景是白色。
织梦排行榜制作

    制作这种效果通常有两种方法,一种是截图法,一种是用织梦标签autoindex,详细方法如下:

方法一:把上图文章前面的序号列表截图,1-10的序号都在一个图片上,之后把图片设置为文章列表的背景图片,用css调整其到合适的位置,设置文章列表合适的行宽,就可以了,这样当显示几条文章时,就会显示相应长度的背景。

方法二:用css设置不同样式,例如,设置class=top为前三篇文章序号的样式,而其它文章为默认,[field:global name=autoindex/]标签可以递增的熟练。代码如下:
<UL >
  
  <LI class="top"><EM>[field:global name=autoindex/]</EM><A title=[field:title/] href="[field:arcurl/]" target=_blank>[field:title/]</A></LI>
  
 <LI><EM>[field:global name=autoindex/]</EM><A title=[field:title/] href="[field:arcurl/]" target=_blank>[field:title/]</A></LI>

</UL>
 
上面<li class="top">是蓝色序号背景样式,具体的css不演示,你可以设置成自己喜欢的样式,而第二个<li>没有class的样式,我们要加个判断条件,当序号小于3时(序号都是从0开始,所以前三项是0,1,2),<li>的class是top ,其它的没有class。把上面的代码,改为:

<UL id=phc1 name="tabul">
  
  {dede:artlist row='' orderby='hot'}
 <LI class="[field:global name=autoindex runphp="yes"]
  if(@me>3==0)@me="top";
  else @me="";     
  [/field:global]"><EM>[field:global name=autoindex/]</EM><A title=[field:title/] href="[field:arcurl/]" target=_blank>[field:title/]</A></LI>
  
  {/dede:artlist}
  
  </UL>

即:把<li >中的top改成[field:global name=autoindex runphp="yes"]
  if(@me>3==0)@me="top";
  else @me="";     
  [/field:global]

    这样就可以了,你可以去试一下。当然序号递增主要用[field:global name=autoindex/] ,如果你想得到其它相关效果,可以在百度查相关关键字。

声明

源码下载不顺利,比如源码在百度网盘的有时会被无故取消等,请联系QQ:46667551
本站大部分下载资源收集于网络,但除特别说明之外,基本全部亲自测试可用!
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

原文链接:https://www.dnwfb.com//402.html,转载请注明出处