欢迎随便转载,不需要注明来源和出处,我们的目的是让知识和内容得到分享和传播。
pbootcms默认的文章列表是不显示缩图的,只显示文字。
但是有时候我们上传的产品多了,想知道这个产品的名字与图片是否相符,总是需要点进去编辑才能查看图片,所以比较浪费时间。
所以为了用户体验更好。我们只需要作一点小小的改动就可以实现在列表显示图片了。
这是没有修改之前的效果。
这是修改之后的效果。原始的列表显示很小的图片,这样是为了让列表不至于因为图片过大而显示得太长。
然后用鼠标经过缩图的时候,显示大图,方便清楚的看看图片。
修改后台的模板文件: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>
至此,修改完成结束。
大家好,这里是黑马视觉,今天我们来聊聊在深圳建一个网站需要多少钱?龙华网站建设需要多少钱?从所周知,...
在深圳有很多外贸公司,他们已经不满足于通过其他平台来引流,于是他们都需要建设一个自己自己的外贸网站,...
在最新一版的宝塔NGINX免费防火墙中,有一条规则是:我们可以看到里面有:script,所以会导致在添加一些第三...
假如你的网站之前安装了SSL证书,然后到期之后,你将你的网站SSL证书也删除了。但是在使用谷歌浏览器打开网...