米色电商双十一店铺宝贝展示模板代码分享(淘宝/天猫商城)
米色编写的双十一店铺宝贝展示模板,附源码下载和代码使用说明
一:前言
马上电商年底大促双十一要开始了,店铺都在紧张备战中,特别是美工,各种页面设计装修,各种加班。
所以米色加班编写了一个双十一店铺宝贝展示的代码模板。美工只需要复制代码到DW里面,替换文字,图片,链接即可快速在店铺装修一个宝贝展示的效果。
因为是模板,所以样式可能是固定的,不过你有代码基础,也可以修改宝贝展示的效果。
二:我要吐槽
有小伙伴要吐槽了,我在PS里面直接设计好,只要放图片就可以嘛,搞这么麻烦干什么?
答:PS里面涉及图片是方便,但是如果老板要修改主图或者文案等内容呢?如果老板觉得一排4个不好看,换成1排3个呢?如果一个宝贝展示里面,有多个链接怎么办?
所以直接将米色的代码模板,进行修改,方便快捷。下面会有详细说明,看完你就知道这个代码模板的妙处了。
三:效果展示

因为一排4个的截图太长,不方便做封面,所以只截取了2个宝贝展示。
四:代码说明
【注意】:为了方便不同基础的小伙伴使用,米色专门编写了2个版本的代码模板,根据需要下载使用
【作者】:米色(miseu)
【适用】:淘宝店(由于没有天猫店测试,所以理论上也适用于天猫店)
【权限】:无需购买CSS权限
版本一:完美概念版
注意下面代码均为没有全屏的,因为不同版本店铺,全屏代码会不一样。需要全屏,可以使用下面的全屏生成工具
【使用】:
为了方便使用,在代码中已经做了详细的文字说明
如果需要全屏,可以使用我编写的全屏工具,不会用,看使用教程。工具地址://www.mgsns.com/portal.php?mod=topic&topicid=7
下面所有的灰色注释文字,在店铺里面不会显示,放心复制
注意,这是完美概念版,也就是可拓展性非常高,但是不敢保证,天猫和淘宝店 是不是都可以清理浮动,如果不能清浮动,可能导致背景色不显示。
可随意修改内容部分宽度。
可随意修改一排放多少宝贝,只需要修改一个数值,就可以随意切换一排的个数。
可随意添加宝贝个数,想放几个 直接复制粘贴即可
代码的使用,下面已经写了完整的文字说明
代码中所有的图片,链接,文字均可随意修改
版本二:固定保守版
【使用】:
为了方便使用,在代码中已经做了详细的文字说明
如果需要全屏,可以使用我编写的全屏工具,不会用,看使用教程。工具地址://www.mgsns.com/portal.php?mod=topic&topicid=7
下面所有的灰色注释文字,在店铺里面不会显示,放心复制
这是保守版,也就是尺寸都固定了,而且一排只能放4个宝贝
如果有代码基础,可随意修改代码来显示宝贝展示方式
代码的使用,下面已经写了完整的文字说明
代码中所有的图片,链接,文字均可随意修改
【源码分享】:
文章下面上传了附件,直接下载即可






































