您现在的位置是:首页 > cms教程 > DedeCMS教程DedeCMS教程
织梦dedecms排行榜怎么制作
芷蕾2024-08-25DedeCMS教程已有人查阅
导读织梦在做文章排行榜时,效果如下图,这个排行主要有两个知识点,其一是列表前面数字递增,其二是列表的前三篇文章序号背景色蓝色,其它序号背景是白色。
织梦在做文章排行榜时,效果如下图,这个排行主要有两个知识点,其一是列表前面数字递增,其二是列表的前三篇文章序号背景色蓝色,其它序号背景是白色。
制作这种效果通常有两种方法,一种是截图法,一种是用织梦标签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织梦列表不显示第一个元素如分隔符的修复方法
其实这个是我碰见的具体案例,本来是公司简介 | 联系我们 | 公司历程,这几个栏目,但是循环式时,发现这样
怎么去掉dede织梦文章分页里的li标签
请大家打开网站目录,然后找到/include/arc.listview.class.php以及arc.archives.class.php文件
自动更新HTML FOR 织梦dedecmsV5.7支持首页列表页的方法
DedeCMS V5.3的使用方法很简单,直接用后台的模块安装就可以了。坚决贯彻实施官方的插件模块化,一键安装的理念。
DEDE5.6升级dedecms5.7无法发布编辑文章的方法
DEDECMS5.6升级到5.7后导入老数据库数据无法发布编辑文章的解决办法此问题是从5.6升级到5.7再导入老数据库3表(附加表,主表,微表)后出的
相关源码
-
(自适应响应式)蓝色勘察设计院机构单位商会协会pbootcms模板下载本模板基于PbootCMS系统开发,为勘察设计院所、工程咨询单位设计,特别适合展示设计成果、技术服务和项目案例。采用响应式技术,确保设计图纸和方案以及文案在不同设备上都能清晰展示。查看源码 -
自适应新闻资讯技术博客个人网站pbootcms模板该模板基于PbootCMS开源内核深度开发,该模板适用于游戏新闻网站、游戏博客等企业或个人网站,新闻资讯技术博客pbootcms模板;采用六级分辨率断点适配技术查看源码 -
(自适应响应式)宠物经验资讯咨询博客pbootcms网站源码下载除宠物资讯领域外,通过内容替换可快速适配宠物用品商城、宠物医疗咨询平台、宠物训练教程网站、动物保护组织官网、水族爱好者社区等垂直领域。查看源码 -
(自适应手机端)seo博客网站模板新闻资讯网站源码下载本模板为SEO博客及新闻资讯类平台深度定制,采用PbootCMS内核开发。通过模块化设计实现多行业快速适配,仅需替换图文内容即可转型为医疗、教育、科技等领域网站。响应式布局确保在手机、平板等设备上获得一致浏览体验。查看源码 -
pbootcms模板(PC+WAP)微信小程序开发公司网站本模板为微信小程序开发代理、软件开发公司等企业设计,基于PbootCMS内核开发,支持PC+WAP双端响应式布局,数据实时同步,适用于多行业快速建站。查看源码 -
自适应建材瓷砖卫浴大理石类pbootcms网站模板源码下载为建材瓷砖、卫浴瓷砖企业打造的高端响应式门户模板,基于PbootCMS内核深度开发。采用前沿HTML5自适应架构,无缝兼容手机端触控交互与PC端展示场景。查看源码
| 分享笔记 (共有 篇笔记) |
