竹子建站
拒绝千篇一律,教你一招更酷的图文结合方式!
2020-11-24 04:55:00
网站中最常见的内容展现形式就是图文啦!有动手实践过的小伙伴一定知道,图文是我们在编辑网站的过程中完全无法避免的,那么我们有办法优化这种内容的展现形式吗?
答案当然是有的,今天小竹子就给大家带来了这样一段代码效果。
在竹子编辑器的系统设置中,一个图文组件可以通过点击样式设置图文的布局,我们系统内置了8种最常见的图文布局方式可以设置,可以满足大多数场景下页面制作的需求。


但是如果想要给内容的展示方式加一点新意,那么我们就需要加一些代码效果啦!
比如我们可以把图文的结合方式设置成这样:

这个效果就是通过一串简单的代码实现的,首先我们需要将图文的布局改成这种形式

然后我们点击图文的设置,将下列代码复制进去,具体操作如下:

代码如下:
<style>

    ._14tvbck7so000{

  }

._14tvbck7so000 .zz-comp-list__item .text, ._14tvbck7so000 .zz-comp-list__item:hover .caption-hover .text{


margin-left: 50%;

}

@media (max-width: 767px)

{

._14tvbck7so000 .zz-comp-list__item .text, ._14tvbck7so000 .zz-comp-list__item:hover .caption-hover .text{

margin-left: 51.5%;

}

}

</style>


PS:注意代码中蓝色背景部分的代码需要根据实际的组件id进行替换哦,组件id可以在这里获取:

好啦,今天的教程就到这里了,大家赶快去试试吧,我们下期再见吧!