B2主题美化 首页专题改为4列显示

Jaysun

今天分享一个通过CSS修改网站首页专题样式,简单实用,使其在桌面端和移动端都能正常显示。首先将每列宽度改为25%,然后针对小于768px的屏幕,将专题宽度设为100%。有需要的自行使用,使用前记得保存文件,避免出现不可预知的问题。

B2主题美化 首页专题改为4列显示

首先专题样式必须是上图下文才能改

B2主题美化 首页专题改为4列显示

原版的一行只能显示两列,超过两列就会自适应换行,如果设置的首页显示4个专题那么就会占用大量的屏幕空间,通过CSS把每列改成25%即可

/*首页专题*/
.collection-box .collection-item {
    width: 25%;
}

如果只添加上面的代码在手机端浏览又会非常拥挤,所以就还需要添加下列代码:

付费内容
售价:5 积分
开通青铜VIP或更高级的会员可免费查看该内容
登录注册购买

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog
验证码
评论列表 (暂无评论,321人围观)

还没有评论,来说两句吧...

目录[+]

取消
微信二维码
微信二维码
支付宝二维码