淘宝店铺装修模板代码(米色电商双十一店铺宝贝展示模板代码分享（淘宝/天猫商城）)

编辑柚子

2022-04-20 03:24:41

一：前言

年底电商要促销双十一，店铺都在备战，尤其是美工，各种页面设计装修，各种加班。

所以米色加班为双十一店铺宝贝展示编了一个代码模板。美工只需要将代码复制到DW中，替换掉文字、图片和链接，就可以快速将店铺装修成宝贝展示效果。

因为是模板，风格可能是固定的，但是如果有代码库也可以修改宝贝展示的效果。

二：我要吐槽

有朋友想吐槽。我是直接用PS设计的。放图片就好。何必呢？

答:PS中涉及图片很方便，但是老板要修改主图或者文案怎么办？如果老板觉得四连不好看，那三连呢？宝贝展示有多个环节怎么办？

所以直接修改米色码模板方便快捷。下面会有详细的解释，看完就知道这个代码模板的妙处了。

三：效果展示

因为一排4张截图太长做不了封面，所以只截取了2个宝贝秀。

四：代码说明

【注意】:为了方便不同基础的小伙伴使用，米色特别整理了两个版本的代码模板，大家可以根据需要下载使用。

【作者】:米色(miseu)

【适用】:淘宝店(因为没有天猫店测试，理论上也适用于天猫店)

【权限】:无需购买CSS权限。

版本一：完美概念版

注意以下代码不是全屏的，因为不同版本的商店全屏代码会有所不同。需要全屏，可以使用下面的全屏生成工具。

[用途]:

为方便使用，代码中做了详细的文字描述。

如果需要全屏，可以用我写的全屏工具。如果不会用，就看教程。地址:http://www.mgsns.com/portal.php?。topicid=7

以下所有灰色标注文字不会显示在商店里，可以随意复制。

注意，这是完美的概念版，就是扩展性强，但是不能保证天猫和淘宝店都可以清洗和浮动。如果不能，背景色可能不会显示。

您可以随意修改内容部分的宽度。

你可以随意改变排多少个宝宝，只要改变一个数值就可以随意切换排数。

宝宝数量随便加，想复制粘贴几个就行。

代码的使用，下面已经写了完整的文字说明。

代码中的所有图片、链接、文字都可以随意修改。

[来源下载]:

因为不能把链接发到网盘，所以直接放的代码复制到DW里修改使用。

& lt！-= = = = = = = = =复制以下代码使用= = = = = = = = =-->:

& ltdiv style = " width:1920 px；背景色:# 490585；"& gt

& lt！-以下宽度:1100px是中间婴儿展示的宽度。你可以随意改变它的宽度->:

& ltdiv style = " width:1100 px；填充:30px 0；边距:0自动；字体大小:12pxfont-family:微软雅黑；"& gt

& ltul class="clear-fix " >

& lt！-宝宝1开始-& gt；

& lt！-

连续1- 2个，把宽度放在每个李标签下面:24%；改宽度:49%；

2-一排有3个，下面每个li标签中的宽度为24%；宽度:32.333333%；

连续3- 4个，默认情况下不需要修改

连续4- 5个，把宽度放在每个李标签下面:24%；改宽度:19%；

-& gt；

& lt李style= "宽度:24%；背景:# fff边距:0 1% 1% 0；浮动:左；文本对齐:居中；"& gt

& ltdiv style = " padding:5px；"& gt

<a href="#" target="_blank"><img src="https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg" width="100%" alt="主图1" style="display:block;" /></a>& lta href="#" target="_blank " >& ltimg src = " https://img . alicdn . com/img extra/i4/675431384/TB 2 gefrlbxmpufjszjixxxauvxa _！！65431384.jpg " width = " 100% " Alt = "主图1 " style = " display:block；"/& gt；& lt/a & gt；

& ltp style="background:rgba(0，0，0，.. 5)；颜色:# fff高度:20px行高:20px字体大小:12px溢出:隐藏；"& gt产品卖点描述

& ltH4 style = " border-bottom:1px solid rgba(118，77，247，. 2)；高度:29px行高:29px颜色:# 9013FE字体大小:13px颜色:# f 40 b4c；溢出:隐藏；"& gt产品标题的文本部分

& ltdiv style = " height:40px；行高:40px填充:4px 0；"& gt

<img src="https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png" style="width:40%; height:40px; display:block; float:left;" alt="logo" />& ltimg src = " https://img . alicdn . com/img extra/i3/675431384/TB 2 qd 4 ejcfjpufjsszhxxabuvxa _！！675431384 . png " style = " width:40%；高度:40px显示:块；浮动:左；"alt = " logo "/& gt；

& ltp style= "宽度:60%；高度:40px行高:40px显示:块；浮动:左；颜色:# 9013FE"& gt预售价:18pxfont-weight:700；"& gt3899 & lt/span>。& lt/p & gt；

& lt/div & gt；

& ltdiv style = " height:30px；行高:30px& gt

& lta href = " # " target = " _ blank " style = " float:left；显示:块；高度:28px行高:28px宽度:35%；边框:1px虚线# 9013FE颜色:# 9013FE文本-装饰:无；"& gt

& ltspan style = " width:30%；右边框:1px虚线# 9013FE显示:块；浮动:左；"& gt嗯。

& ltspan style = " width:65%；显示:块；浮动:左；溢出:隐藏；"& gt一百五十元

& lt/a & gt；

& lta href = " # " target = " _ blank " style = " float:right；显示:块；宽度:52%；背景:# 9013FE颜色:# fff文字-装饰:无；溢出:隐藏；填充:0 4%；"& gt点击购买

& lt/div & gt；

& lt/李& gt

& lt！-宝宝1结束了-& gt；

& lt李style= "宽度:24%；背景:# fff边距:0 1% 1% 0；浮动:左；文本对齐:居中；"& gt

& ltdiv style = " padding:5px；"& gt

& ltp style="background:rgba(0，0，0，.. 5)；颜色:# fff高度:20px行高:20px字体大小:12px溢出:隐藏；"& gt产品卖点描述

& ltH4 style = " border-bottom:1px solid rgba(118，77，247，. 2)；高度:29px行高:29px颜色:# 9013FE字体大小:13px颜色:# f 40 b4c；溢出:隐藏；"& gt产品标题的文本部分

& ltdiv style = " height:40px；行高:40px填充:4px 0；"& gt

& ltp style= "宽度:60%；高度:40px行高:40px显示:块；浮动:左；颜色:# 9013FE"& gt预售价:18pxfont-weight:700；"& gt3899 & lt/span>。& lt/p & gt；

& lt/div & gt；

& ltdiv style = " height:30px；行高:30px& gt

& lta href = " # " target = " _ blank " style = " float:left；显示:块；高度:28px行高:28px宽度:35%；边框:1px虚线# 9013FE颜色:# 9013FE文本-装饰:无；"& gt

& ltspan style = " width:30%；右边框:1px虚线# 9013FE显示:块；浮动:左；"& gt嗯。

& ltspan style = " width:65%；显示:块；浮动:左；溢出:隐藏；"& gt一百五十元

& lt/a & gt；

& lta href = " # " target = " _ blank " style = " float:right；显示:块；宽度:52%；背景:# 9013FE颜色:# fff文字-装饰:无；溢出:隐藏；填充:0 4%；"& gt点击购买

& lt/div & gt；

& lt/李& gt

& lt李style= "宽度:24%；背景:# fff边距:0 1% 1% 0；浮动:左；文本对齐:居中；"& gt

& ltdiv style = " padding:5px；"& gt

& ltp style="background:rgba(0，0，0，.. 5)；颜色:# fff高度:20px行高:20px字体大小:12px溢出:隐藏；"& gt产品卖点描述

& ltH4 style = " border-bottom:1px solid rgba(118，77，247，. 2)；高度:29px行高:29px颜色:# 9013FE字体大小:13px颜色:# f 40 b4c；溢出:隐藏；"& gt产品标题的文本部分

& ltdiv style = " height:40px；行高:40px填充:4px 0；"& gt

& ltp style= "宽度:60%；高度:40px行高:40px显示:块；浮动:左；颜色:# 9013FE"& gt预售价:18pxfont-weight:700；"& gt3899 & lt/span>。& lt/p & gt；

& lt/div & gt；

& ltdiv style = " height:30px；行高:30pxdata-source="www.mgsns.com">。

& lta href = " # " target = " _ blank " style = " float:left；显示:块；高度:28px行高:28px宽度:35%；边框:1px虚线# 9013FE颜色:# 9013FE文本-装饰:无；"& gt

& ltspan style = " width:30%；右边框:1px虚线# 9013FE显示:块；浮动:左；"& gt嗯。

& ltspan style = " width:65%；显示:块；浮动:左；溢出:隐藏；"& gt一百五十元

& lt/a & gt；

& lta href = " # " target = " _ blank " style = " float:right；显示:块；宽度:52%；背景:# 9013FE颜色:# fff文字-装饰:无；溢出:隐藏；填充:0 4%；"& gt点击购买

& lt/div & gt；

& lt/李& gt

& lt李style= "宽度:24%；背景:# fff边距:0 1% 1% 0；浮动:左；文本对齐:居中；"& gt

& ltdiv style = " padding:5px；"& gt

& ltp style="background:rgba(0，0，0，.. 5)；颜色:# fff高度:20px行高:20px字体大小:12px溢出:隐藏；"& gt产品卖点描述

& ltH4 style = " border-bottom:1px solid rgba(118，77，247，. 2)；高度:29px行高:29px颜色:# 9013FE字体大小:13px颜色:# f 40 b4c；溢出:隐藏；"& gt产品标题的文本部分

& ltdiv style = " height:40px；行高:40px填充:4px 0；"& gt

& ltp style= "宽度:60%；高度:40px行高:40px显示:块；浮动:左；颜色:# 9013FE"& gt预售价:18pxfont-weight:700；"& gt3899 & lt/span>。& lt/p & gt；

& lt/div & gt；

& ltdiv style = " height:30px；行高:30px& gt

& lta href = " # " target = " _ blank " style = " float:left；显示:块；高度:28px行高:28px宽度:35%；边框:1px虚线# 9013FE颜色:# 9013FE文本-装饰:无；"& gt

& ltspan style = " width:30%；右边框:1px虚线# 9013FE显示:块；浮动:左；"& gt嗯。

& ltspan style = " width:65%；显示:块；浮动:左；溢出:隐藏；"& gt一百五十元

& lt/a & gt；

& lta href = " # " target = " _ blank " style = " float:right；显示:块；宽度:52%；背景:# 9013FE颜色:# fff文字-装饰:无；溢出:隐藏；填充:0 4%；"& gt点击购买

& lt/div & gt；

& lt/李& gt

& lt！-如果您需要添加另一个婴儿展示，只需将整个

& lt！-& lt；李style= "宽度:24%；背景:# fff边距:0 1% 1% 0；浮动:左；"& gt............& lt/李& gt-& gt；

& lt/ul & gt；

& lt/div & gt；

版本二：固定保守版

[用途]:

为方便使用，代码中做了详细的文字描述。

如果需要全屏，可以用我写的全屏工具。如果不会用，就看教程。地址:http://www.mgsns.com/portal.php?。topicid=7

以下所有灰色标注文字不会显示在商店里，可以随意复制。

这是保守版，就是尺寸固定，一排只能放4个宝宝

如果有代码库，可以随意修改代码显示宝贝显示模式。

代码的使用，下面已经写了完整的文字说明。

代码中的所有图片、链接、文字都可以随意修改。

【来源分享】:

& lt！-= = = = = = = = =复制以下代码使用= = = = = = = = =-->:

& ltdiv style = " width:1920 px；背景色:# 490585；"& gt

& ltdiv style = " width:1100 px；填充:30px 0；边距:0自动；字体大小:12pxfont-family:微软雅黑；"& gt

& lt！-因为尺寸有限，如果只做一排4，就不需要修改了；如果需要2行(8)，设置如下高度:404px改成高度:808px也就是说，取尽可能多的行。-& gt；

& ltul class = " clear-fix " style = " height:404 px；"& gt

& lt！-这里有一个:

& lt！-宝贝1代码开始-& gt；

& lt李style = " width:266 px；身高:392px背景:# fff边距:0 12px 12px 0浮动:左；文本对齐:居中；"& gt

& ltdiv style = " padding:5px；"& gt

<a href="#" target="_blank"><img src="https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg" width="100%" height="256" style="display:block;" /></a>& lta href="#" target="_blank " >& ltimg src = " https://img . alicdn . com/img extra/i4/675431384/TB 2 gefrlbxmpufjszjixxxauvxa _！！675431384 . jpg " width = " 100% " height = " 256 " style = " display:block/& gt；& lt/a & gt；

& ltp style="background:rgba(0，0，0，.. 5)；颜色:# fff高度:20px行高:20px字体大小:12px溢出:隐藏；"& gt宝贝卖点描述

& ltH4 style = " border-bottom:1px solid rgba(118，77，247，. 2)；高度:29px行高:29px颜色:# 9013FE字体大小:13px颜色:# f 40 b4c；溢出:隐藏；"& gt产品标题的文本部分

& ltdiv style = " height:40px；行高:40px填充:4px 0；"& gt

<img src="https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png" style="width:40%; height:40px; display:block; float:left;" />& ltimg src = " https://img . alicdn . com/img extra/i3/675431384/TB 2 qd 4 ejcfjpufjsszhxxabuvxa _！！675431384 . png " style = " width:40%；高度:40px显示:块；浮动:左；"/& gt；

& ltp style= "宽度:60%；高度:40px行高:40px显示:块；浮动:左；颜色:# 9013FE"& gt预售价:18pxfont-weight:700；"& gt3899 & lt/span>。& lt/p & gt；

& lt/div & gt；

& ltdiv style = " height:30px；行高:30pxdata-source="www.mgsns.com">。

& lta class = " miseu 1 " href = " # " target = " _ blank " style = " float:left；显示:块；高度:28px行高:28px宽度:100px边框:1px虚线# 9013FE颜色:# 9013FE文本-装饰:无；"& gt

& ltspan style = " width:30%；右边框:1px虚线# 9013FE显示:块；浮动:左；"& gt嗯。

& ltspan style = " width:65%；显示:块；浮动:左；溢出:隐藏；"& gt一百五十元

& lt/a & gt；

& lta class = " miseu 2 " href = " # " target = " _ blank " style = " float:right；显示:块；宽度:130px背景:# 9013FE颜色:# fff文字-装饰:无；溢出:隐藏；填充:0 10px"& gt点击购买

& lt/div & gt；

& lt/李& gt

& lt！-宝贝1代码结束-& gt；

& lt李style = " width:266 px；身高:392px背景:# fff边距:0 12px 12px 0浮动:左；文本对齐:居中；"& gt

& ltdiv style = " padding:5px；"& gt

& ltp style="background:rgba(0，0，0，.. 5)；颜色:# fff高度:20px行高:20px字体大小:12px溢出:隐藏；"& gt宝贝卖点描述

& ltH4 style = " border-bottom:1px solid rgba(118，77，247，. 2)；高度:29px行高:29px颜色:# 9013FE字体大小:13px颜色:# f 40 b4c；溢出:隐藏；"& gt产品标题的文本部分

& ltdiv style = " height:40px；行高:40px填充:4px 0；"& gt

<img src="https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png" style="width:40%; height:40px; display:block; float:left;" />& ltimg src = " https://img . alicdn . com/img extra/i3/675431384/TB 2 qd 4 ejcfjpufjsszhxxabuvxa _！！675431384 . png " style = " width:40%；高度:40px显示:块；浮动:左；"/& gt；

& ltp style= "宽度:60%；高度:40px行高:40px显示:块；浮动:左；颜色:# 9013FE"& gt预售价:18pxfont-weight:700；"& gt3899 & lt/span>。& lt/p & gt；

& lt/div & gt；

& ltdiv style = " height:30px；行高:30px& gt

& lta class = " miseu 1 " href = " # " target = " _ blank " style = " float:left；显示:块；高度:28px行高:28px宽度:100px边框:1px虚线# 9013FE颜色:# 9013FE文本-装饰:无；"& gt

& ltspan style = " width:30%；右边框:1px虚线# 9013FE显示:块；浮动:左；"& gt嗯。

& ltspan style = " width:65%；显示:块；浮动:左；溢出:隐藏；"& gt一百五十元

& lt/a & gt；

& lt/div & gt；

& lt/李& gt

& lt李style = " width:266 px；身高:392px背景:# fff边距:0 12px 12px 0浮动:左；文本对齐:居中；"& gt

淘宝店铺装修代码大全

& ltdiv style = " padding:5px；"& gt

& ltp style="background:rgba(0，0，0，.. 5)；颜色:# fff高度:20px行高:20px字体大小:12px溢出:隐藏；"& gt产品卖点描述

& ltH4 style = " border-bottom:1px solid rgba(118，77，247，. 2)；高度:29px行高:29px颜色:# 9013FE字体大小:13px颜色:# f 40 b4c；溢出:隐藏；"& gt产品标题的文本部分

& ltdiv style = " height:40px；行高:40px填充:4px 0；"& gt

<img src="https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png" style="width:40%; height:40px; display:block; float:left;" />& ltimg src = " https://img . alicdn . com/img extra/i3/675431384/TB 2 qd 4 ejcfjpufjsszhxxabuvxa _！！675431384 . png " style = " width:40%；高度:40px显示:块；浮动:左；"/& gt；

& ltp style= "宽度:60%；高度:40px行高:40px显示:块；浮动:左；颜色:# 9013FE"& gt预售价:18pxfont-weight:700；"& gt3899 & lt/span>。& lt/p & gt；

& lt/div & gt；

& ltdiv style = " height:30px；行高:30px& gt

& lta class = " miseu 1 " href = " # " target = " _ blank " style = " float:left；显示:块；高度:28px行高:28px宽度:100px边框:1px虚线# 9013FE颜色:# 9013FE文本-装饰:无；"& gt

& ltspan style = " width:30%；右边框:1px虚线# 9013FE显示:块；浮动:左；"& gt嗯。

& ltspan style = " width:65%；显示:块；浮动:左；溢出:隐藏；"& gt一百五十元

& lt/a & gt；

& lt/div & gt；

& lt/李& gt

& lt李style = " width:266 px；身高:392px背景:# fff边距:0 0 12px 0浮动:左；文本对齐:居中；"& gt

& ltdiv style = " padding:5px；"& gt

& ltp style="background:rgba(0，0，0，.. 5)；颜色:# fff高度:20px行高:20px字体大小:12px溢出:隐藏；"& gt产品卖点描述

& ltH4 style = " border-bottom:1px solid rgba(118，77，247，. 2)；高度:29px行高:29px颜色:# 9013FE字体大小:13px颜色:# f 40 b4c；溢出:隐藏；"& gt产品标题的文本部分

& ltdiv style = " height:40px；行高:40px填充:4px 0；"& gt

<img src="https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png" style="width:40%; height:40px; display:block; float:left;" />& ltimg src = " https://img . alicdn . com/img extra/i3/675431384/TB 2 qd 4 ejcfjpufjsszhxxabuvxa _！！675431384 . png " style = " width:40%；高度:40px显示:块；浮动:左；"/& gt；

& ltp style= "宽度:60%；高度:40px行高:40px显示:块；浮动:左；颜色:# 9013FE"& gt预售价:18pxfont-weight:700；"& gt3899 & lt/span>。& lt/p & gt；

& lt/div & gt；

& ltdiv style = " height:30px；行高:30px& gt

& lta class = " miseu 1 " href = " # " target = " _ blank " style = " float:left；显示:块；高度:28px行高:28px宽度:100px边框:1px虚线# 9013FE颜色:# 9013FE文本-装饰:无；"& gt

& ltspan style = " width:30%；右边框:1px虚线# 9013FE显示:块；浮动:左；"& gt嗯。

& ltspan style = " width:65%；显示:块；浮动:左；溢出:隐藏；"& gt一百五十元

& lt/a & gt；

& lt/div & gt；

& lt/李& gt

& lt！-= = =一排四条分割线，如果超过四条，复制上面的

& lt！-& lt；李style = " width:266 px；身高:392px背景:# fff边距:0 0 12px 0浮动:左；文本对齐:居中；"& gt5 & lt/李& gt-& gt；

& lt/ul & gt；