D1V1网源码站

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2493|回复: 438

[码农资料] DX门户频道文章图片封面列表模板及教程

[复制链接]

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-17 11:09:55 | 显示全部楼层 |阅读模式
DX默认的门户文章列表是“标题+摘要+封面”的显示方式,本模板可以实现文章列表按封面图片(即缩略图)以矩阵排列方式显示,适合用门户功能的图片类站点或需要以封面为主要显示方式站点。封面可以在你上传的图片附件中选择,封面自动裁切原始图不会有水印,有管理权限的ID登陆会显示编辑和删除链接。演示地址:http://www.0512dz.com/tuangou/

232537hwkugn8ktd8uctat.jpg.thumb.jpg

232534q6vv86u6yb8cbbv8.jpg.thumb.jpg

实现步骤:

1、首先开启门户缩略图,大小我这边用的是168×126
232531xiyqggykghorgtrg.jpg.thumb.jpg

2、可以将缩略图质量适当修改,我用80,80的质量168×126的图片几乎看不出有什么影响,这样生成的缩略图容量比较小
232529f09gspijigisqzg8.jpg.thumb.jpg

3、我右侧边栏宽度是250像素,DX默认的220像素什么广告都不合适放,因此需要改下控制边栏的CSS代码,打开文件template\default\common\common.css,找到以下代码
  • .ct2 .mn { float: left; width: 730px; margin-bottom: 1em; }
  • .ct2 .sd { float: right; width: 220px; overflow: hidden; _overflow-y: visible; }

[color=rgb(51, 102, 153) !important]复制代码

将220改为250,同样730改为700

4、将以下文章图片封面列表模板用到的CSS代码复制粘贴到template\default\common\common.css的最后
  • /*0512dz.com门户频道文章图片列表*/
  • .mydl_width{height:auto;padding:12px 0;background-color:#EBF5EC}
  • .mydl_width ul{ margin:0;padding:0;}
  • .myul{}
  • .myul li{width:220px;height:auto;display:block;float:left; margin-left:10px;margin-bottom:5px; text-align:center;}
  • .myli{}
  • .myh3{width:210px;height:50px;min-height:20px;line-height:22px;text-align:center;margin-top:3px;font-size:12px;}
  • .myliimg img{padding: 5px; width: 168px; height: 126px; border: 1px solid #CCC; background: {WRAPBG}; }

[color=rgb(51, 102, 153) !important]复制代码

以上代码可控制图片、标题的宽度高度,边框,背景等,当然也可以实现一行显示两张图片封面或四张图片封面等,懂CSS的一看就知道

5、将门户图片封面列表模板文件放到template\default\portal下,更新缓存
rar.jpg list_pic.rar (1.38 KB, 下载次数: 10470)

6、在后台频道详细设置里的列表页模板名中选择昆山打折网门户文章图片列表,每页显示文章数填好适合你的数字
232539baupal5xurpcqnp5.jpg.thumb.jpg

233114pcic9l6n7lnlrtn9.jpg.thumb.jpg

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-17 17:39:31 | 显示全部楼层
支持!!!!!!

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-18 00:09:08 | 显示全部楼层
不错不错 支持下

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-18 06:38:44 | 显示全部楼层
学习了,这就去试试

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-18 14:35:13 | 显示全部楼层
很不错的哦,支持,加油

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-18 22:31:43 | 显示全部楼层
赞一个!

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-19 06:28:12 | 显示全部楼层
前来围观,LZ好样的!

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-19 15:53:27 | 显示全部楼层
支持!!!!!!

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-20 01:18:43 | 显示全部楼层
支持你们一下下哈

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

购买VIP,消费全返

微信扫码,惊喜不断

发表于 2017-2-20 10:43:58 | 显示全部楼层
前来围观,LZ好样的!

yuanma.d1v1.com欢迎你,分享最好的网站商业源码,提供最好的免费空间申请

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

客服中心
关闭
加入VIP:点击进入
Email:
1184556465@qq.com
社区VIP用户交流QQ专用群234989379
非VIP请勿加此群
VIP
技术支持
消费全返
客服中心

QQ|D1V1网源码站|手机版|小黑屋|D1V1网源码站 ( 沪ICP备05028199号 )

GMT+8, 2024-11-23 02:50 , Processed in 0.089561 second(s), 33 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表