欢迎访问融科网络!我们专注于郑州网站建设郑州网站制作郑州网站设计郑州做网站等相关服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行

编程代码

织梦CMS排行榜制作

标签: 作者:融科网络 | 点击:
02

Nov
2019

导语
织梦CMS 在做新闻排行榜时,效果如下图,这个排行主要有两个知识点,其一是列表前面数字递增,其二是列表的前三篇新闻序号背景色蓝色,其它序号背景是白色。 制作这种效果
 

织梦CMS 在做新闻排行榜时,效果如下图,这个排行主要有两个知识点,其一是列表前面数字递增,其二是列表的前三篇新闻序号背景色蓝色,其它序号背景是白色。

织梦CMS排行榜制作



    制作这种效果通常有两种办法,一种是截图法,一种是用织梦标签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/] ,如果你想得到其它相关效果,可以在baidu查相关关键词。
 

郑州融科网络专注于企业网站建设、网站制作、高端网站设计,郑州荥阳、上街做网站就找融科网络!
本文章网址:http://www.ppssdd.com/code/13939.html。转载请保留出处,谢谢合作!

全网(营销型+响应式)专业定制

快速搭建高询盘+营销独立站

微信扫一扫 添加微信

推荐分享,免费SEO诊断

扫码加好友,即送价值1880元的SEO优化教程

(网站没排名,轻松让关键词上首页!专注H5企业建站+网站优化推广)

上一篇:织梦DEDECMS5.7在栏目页动态调用点击次数

下一篇:Dedecms新闻内容分页{dede:pagebreak/}调用办法

  • 网站建设咨询
  • 网站建设案例
建站流程
  • 网站需
    求分析
  • 网站策
    划方案
  • 页面风
    格设计
  • 程序设
    计研发
  • 资料录
    入优化
  • 确认交
    付使用
  • 后续跟
    踪服务
  • 151-3895-5886
  • 品牌网站建设定制
  • 营销型网站建设定制