修改杂志布局下,底部两栏分类列表缩略图显示样式

  • A+
所属分类:建博笔记
修改杂志布局下,底部两栏分类列表缩略图显示样式

在后台【主题选项--杂志布局--显示底部两栏分类列表】模块中有一个【不显示第一篇摘要】的选项,默认情况下是取消勾选的。当我勾选这个功能后,在前台首页显示的效果是这样的:

修改杂志布局下,底部两栏分类列表缩略图显示样式

默认显示效果

可以看到,在缩略图左右两侧留了一些空白,但是我希望将这部分空白去掉,让缩略图撑满列表。

修改方法

打开【style.css】文件,找到代码

/** 图片动画 **/
.picture-h-img a img,
.tao-h-img a img,
.line-one-thumbnail a img,
.line-small .small-thumbnail a img,
.line-big .small-thumbnail a img,
.section-thumbnail a img,
.custom-thumbnail a img {
    text-align: center;
    max-width: 100%;
    width: auto;
    height: auto;
    -webkit-transition: -webkit-transform .3s linear;
    -moz-transition: -moz-transform .3s linear;
    -o-transition: -o-transform .3s linear;
    transition: transform .3s linear
}

将其替换成

/** 图片动画 **/
.picture-h-img a img,
.tao-h-img a img,
.line-one-thumbnail a img,
.line-small .small-thumbnail a img,
.line-big .small-thumbnail a img,
.section-thumbnail a img,
.custom-thumbnail a img {
    text-align: center;
    max-width: 100%;
    width: 100%;
    height: auto;
    -webkit-transition: -webkit-transform .3s linear;
    -moz-transition: -moz-transform .3s linear;
    -o-transition: -o-transform .3s linear;
    transition: transform .3s linear
}

保存后,刷新前台可以看到效果已经变化了,如下图:

修改杂志布局下,底部两栏分类列表缩略图显示样式

修改后的效果

 

若文章图片、下载链接、网盘密码等信息出错,请留言反馈,博主将第一时间更新!如果喜欢,请打赏支持本站,谢谢大家!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: