您现在的位置是:首页 > 教程 > dedecms教程dedecms教程
织梦dedecms排行榜怎么制作
芷蕾2024-08-25 23:36:30dedecms教程已有人查阅
导读织梦在做文章排行榜时,效果如下图,这个排行主要有两个知识点,其一是列表前面数字递增,其二是列表的前三篇文章序号背景色蓝色,其它序号背景是白色。
织梦在做文章排行榜时,效果如下图,这个排行主要有两个知识点,其一是列表前面数字递增,其二是列表的前三篇文章序号背景色蓝色,其它序号背景是白色。
制作这种效果通常有两种方法,一种是截图法,一种是用织梦标签autoindex,详细方法如下:
方法一:把上图文章前面的序号列表截图,1-10的序号都在一个图片上,之后把图片设置为文章列表的背景图片,用css调整其到合适的位置,设置文章列表合适的行宽,就可以了,这样当显示几条文章时,就会显示相应长度的背景。
方法二:用css设置不同样式,例如,设置class=top为前三篇文章序号的样式,而其它文章为默认,[field:global name=autoindex/]标签可以递增的熟练。代码如下:
制作这种效果通常有两种方法,一种是截图法,一种是用织梦标签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/] ,如果你想得到其它相关效果,可以在百度查相关关键字。
本文标签:
很赞哦! ()
下一篇:织梦自定义表单怎么更换模板
相关文章
随机图文
-
织梦dedecms调用昨天、两天前、某个时间段发布的文章
某些情况下,我们需要调用昨天发布、两天前发布、某个时间段发布的文章,而织梦默认的只能够调过去X天内发布的文章,那么该如何解决这个问题呢? -
dedecms利用ajax实现调用当前登录会员信息的方法
DEDECMS中用Ajax实现调用当前登录会员信息,其实这个功能在dede默认的模板上就有,在模板二次开发之后,往往需要对原来的会员登录注册进行修改。下面将手把手教您轻松实现ajax调用会员信息。 -
织梦dedecms近三天发布文章显示红色日期或加上new图标的方法
为了在网站上显示更新的内容引起访问人的注意,可以让把最近三天的文章显示为红色.下面来看一下代码给近三天(或当天)发布的文章显示红色日期或加上new字或new小图片等。 -
织梦dedecms如何让文章列表实现隔行换色的代码实例
此文介绍了DedeCMS实现文章列表“隔行换色”的方法,列举的是隔五行加一行线的例子,需要的朋友可以参考此例修改自己想要的效果。
留言与评论 (共有 条评论) |