帝国CMS灵动标签调用图文列表教程自适应PC+手机

时间：2026-06-25 19:44:20 来源：互联网作者：秩名阅读：

帝国CMS灵动标签调用图文列表教程自适应PC+手机
做帝国CMS网站，灵动标签绝对是最常用、最好用、自由度最高的标签。不管是首页最新列表、栏目图文、侧边栏推荐，基本都靠灵动标签实现。很多新手套用网上代码经常出现图片变形、排版错乱、手机端错位、无图空白等问题。
今天给大家分享一套帝国CMS通用自适应图文列表灵动标签，兼容7.5和8.0版本，自带缩略图、标题截取、简介、时间、无图占位，PC端左右布局、手机端自动适配，直接复制就能用。

一、适用场景

本代码适合文章站、教程站、资源站、小说站使用，可用于：

网站首页最新图文资讯列表调用
栏目页精选图文内容混排展示
侧边栏推荐图文、热门图文模块
自适应移动端图文列表，解决错位问题

二、功能亮点

自带完整图文结构，无需二次修改样式，解决新手90%的排版问题：自动缩略图、无图默认图片、标题自动截断、简介截断、发布时间显示、图片防拉伸、移动端自动适配。

三、完整灵动标签代码（直接复制使用）

<!--帝国CMS灵动标签自适应图文列表--> [e:loop={selfinfo,8,0,0}] <div class="news-list-item"> <div class="news-img"> <a href="<?=$bqsr[titleurl]?>" target="_blank"> <img src="<?=$bqsr[smallpic]?>" alt="<?=$bqsr[title]?>" onerror="this.src='/default/images/nopic.png'"> </a> </div> <div class="news-info"> <h3 class="news-title"><a href="<?=$bqsr[titleurl]?>"><?=esub($bqsr[title],30)?></a></h3> <div class="news-time"><?=date('Y-m-d',$bqsr[newstime])?></div> <p class="news-desc"><?=esub($bqsr[smalltext],60)?></p> </div> </div> [/e:loop]

四、代码参数简单讲解

{selfinfo,8,0,0}
selfinfo 表示调用当前栏目内容，想调用指定栏目直接改成栏目ID，例如 {1,8,0,0}。数字8是调用条数，可自行修改。后面两个0默认即可，适合列表展示。
图片容错
onerror 作用是文章没有缩略图时，自动加载默认占位图，避免页面出现空白裂图。
文字截取
esub 控制标题、简介字数，防止文字过长撑破页面，适配手机端显示。

五、自适应CSS样式

把下面CSS加入你的全局样式表，即可实现PC端图文左右排列、手机端自动上下排版，样式干净简洁，适合绝大多数模板。

.news-list-item{display:flex;flex-wrap:wrap;padding:15px 0;border-bottom:1px solid #eee;align-items:center;} .news-img{width:120px;height:80px;overflow:hidden;border-radius:6px;margin-right:15px;} .news-img img{width:100%;height:100%;object-fit:cover;transition:0.3s;} .news-info{flex:1;} .news-title{font-size:16px;font-weight:500;margin:0 0 5px 0;} .news-title a{color:#333;text-decoration:none;} .news-title a:hover{color:#0066cc;} .news-time{font-size:12px;color:#999;margin-bottom:5px;} .news-desc{font-size:14px;color:#666;margin:0;line-height:1.6;} /*移动端自适应*/ @media (max-width:768px){ .news-list-item{flex-direction:column;} .news-img{width:100%;height:auto;margin:0 0 10px 0;} }