内容
您现在的位置: 科右新闻 > 军事 > 3m登录网址 产品详情代码分享之图文分离(二)

3m登录网址 产品详情代码分享之图文分离(二)

科右新闻 2020-01-09 15:24:06 热度:3471}

3m登录网址 产品详情代码分享之图文分离(二)

3m登录网址,國産〇〇柒

今天给大家分享另外一种阿里巴巴国际站宝贝详情页图文分离的方法,之前给大家分享过一种图文分离的方法,有兴趣的小伙伴可以点击这里查看:。今天这种方式与之前的方法不同,目前来看阿里是支持这种方法的,废话不多说直接干货上图:

这里我就用制作详情描述中关联产品模板的方式举例,如下图:

图片:moban.jpg

这里把所有的产品制作到同一张图片上,每个产品下部留出文字空间(由于下面代码的调试全部是基于该图,所以下面给出的代码在阿里详情页内部只符合该图尺寸,有需要该模板psd源文件的小伙伴可联系国産〇〇柒)

接下来我们看一下加入代码后在阿里产品详情页预览效果,如图:

图片:阿里内预览示意图02.png

下面直接上代码:

(由于阿里对代码的支持不是太理想,以上代码是通过多次在阿里后台调试得出,结合上图可直接使用。以上代码并非最精简,如有需要小伙伴们可以自行精简,也可以自己按照自己的设计图来调整代码)【参考为主】

注意:第一句代码中

width建议是750;height必须是你制作图片的实际高度。

url('这里填写你的图片链接')一般都是把图片上传到图片银行空间中,然后复制其网址,记住:链接中如有后缀“_350x350.jpg”,一定要去掉。

优缺点:

采用这种图文分离的优点:不占用阿里详情描述中的图片数量,如图:

图片:不占用图片数03.png

已经加入图片,后台显示图片张数仍为15张,这种方法比较适合有大量图片需要展示的店铺使用。

有优点就会有缺点,这种方式在制作关联产品的时候效果不太理想,原因是链接只能加在文字上,图片无法加点击链接。由此可见,制作关联产品仍然是热点模式比较有优势。但是制作其他无需图片加入链接的效果仍然有较大优势。

今天是纯技术分享,作为上次图文分离的补充分享,内容确实干的有些无聊。如有看不太明白的小伙伴可以联系国産〇〇柒交流。

国産〇〇柒电商分享

上一篇:瓜帅:丁丁&斯通斯已回到球队 车祸不影响阿圭罗上场
下一篇:“鹘鹰”舰载型细节曝光 采用弹射起飞折叠幅度远超外界想象