欢迎光临桐乡市黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

pbootcms后台文章列表增加缩图显示

时间:2020-12-12   来源:桐乡市网站建设

欢迎随便转载,需要注明来源和出处,我们的目的是让知识和内容得到分享和传播。


pbootcms默认的文章列表是不显示缩图的,只显示文字。

但是有时候我们上传的产品多了,想知道这个产品的名字与图片是否相符,总是需要点进去编辑才能查看图片,所以比较浪费时间。

所以为了用户体验更好。我们只需要作一点小小的改动就可以实现在列表显示图片了。


这是没有修改之前的效果。


image.png


这是修改之后的效果。原始的列表显示很小的图片,这样是为了让列表不至于因为图片过大而显示得太长。

然后用鼠标经过缩图的时候,显示大图,方便清楚的看看图片。


image.png



修改后台的模板文件:content.html


原来的代码是:

 {if($value->ico)}
                                    <span class="layui-badge layui-bg-orange">缩</span>                                  
  {/if}


我们作以下修改:

 {if($value->ico)}
     <span class="layui-badge layui-bg-orange" id="st">缩图 
      <img src="[value->ico]"  class="sst" >   <img src="[value->ico]" class="stimg" >
     </span>                                    
 {/if}


然后再加入CSS样式:

 <style>
    #st{position: relative;padding-right: 0}
    .stimg{position: absolute; top:0; left:35px; width: 200px; display: none; z-index: 9999; max-width: 150px!important;}
    .sst{width:20px; height: 20px; }
    #st:hover .stimg{display: block;}
    .layui-badge{height: 20px; line-height: 18px; }
</style>


至此,修改完成结束。

本文标签:
新闻推荐
龙华网站建设多少钱?
龙华网站建设多少钱?

大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...

龙华外贸网站建设必需知道的四大注意事项
龙华外贸网站建设必需知道的四大注意事项

在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...

jq控制视频播放和暂停以及声音
jq控制视频播放和暂停以及声音

在网站开发的过程中,我们常常需要添加一些视频来让网站内容更加丰富,比如说网页中有一个按钮,点击按钮后...

PBOOTCMS图片水印不支持jpeg格式怎么处理?
PBOOTCMS图片水印不支持jpeg格式怎么处理?

在使用PBOOT的时候,我们发现在后台开启了上传图片时给图片打上水印的功能,但是客户在上传图片的时候始终打...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top