二：我要吐槽
有朋友想投诉。我是直接用PS设计出来的，直接放图片就可以了。何苦呢？
答：在PS中使用图片固然方便，但是如果老板要修改主图或者文案等内容怎么办？如果老板觉得4连不好看，改成3连怎么办？如果婴儿展示中有多个链接怎么办？
因此，直接修改米色代码模板，方便快捷。下面会有详细的说明。读完本文后，您就会知道这个代码模板的美妙之处。
三：效果展示
由于一排4张截图太长，无法用作封面，所以我只截了2张截图进行展示。
四：代码说明
【注】：为了方便不同背景的朋友使用，米格特地编写了2个版本的代码模板，可以根据需要下载使用。
【适用】：淘宝店（由于没有天猫店测试，理论上也适用于天猫店）
【权限】：无需购买CSS权限
版本一：完美概念版
注意，以下代码均未全屏，因为不同版本的商店全屏代码会有所不同。如果需要全屏可以使用下面的全屏生成工具
【使用】：
为了方便使用，代码中提供了详细的文字说明。
如果需要全屏，可以使用我写的全屏工具。如果您不知道如何使用，请参阅使用教程。工具地址：http://www.mgsns.com/portal.php?mod=topictopicid=7
注意，这是一个完美的概念版本，这意味着可扩展性非常高，但不能保证天猫和淘宝店是否可以清除浮动。如果无法清除浮动，则背景颜色可能无法显示。
内容部分的宽度可以随意修改。
您可以自由修改连续宝物的数量。只需要修改一个值，就可以随意切换一行中的数字。
对于代码的使用，下面已经写了完整的文字说明
代码中的所有图片、链接、文字都可以随意修改。
【源码下载】：
div样式=’width:1920px;背景颜色： #490585;’
!–宽度：1100px;下面是中间宝宝的宽度。你可以把它改成你想要的宽度——
div样式=’width:1100px;填充：30px 0; margin:0 自动； font-size:12px;font-family:微软雅黑；’
ul 类=’清除修复’
!–宝贝1开始–
！–
连续1-2，改变宽度：24%；在下面的每个li 标签中设置width:49%；
连续2-3个，改变宽度：24%；在下面的每个li 标签中改为width:32.333333%；
连续3-4个，默认无需修改
连续4-5个，改变宽度：24%；在下面的每个li 标签中设置width:19%；
—
li style=’width:24%;背景：#fff；保证金：0 1% 1% 0;浮动：左；文本对齐：center;’
div 样式=’padding:5px;’
a href=’#’ target=’_blank’img src=’https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!675431384.jpg’ width=’100%’ alt=’主图1′ style=’显示：块；’ //一个
p样式=’background:rgba(0,0,0,5);颜色：#fff；高度：20px；行高：20px；字体大小：12px； Overflow:hidden;’产品卖点描述/p
h4 样式=’border-bottom: 1px 实心RGBA (118,77,247,2);高度3:29px；行高：29px；颜色： #9013FE; 3 像素；颜色：#F40b4c;溢出：隐藏； ‘产品标题文本部分/H4
div样式=’height:40px;行高：40px；填充：4px 0;’
img src=’https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!675431384.png’ style=’width:40%;高度：40px；显示：块； float:left;’ alt=’标志’/
p样式=’width:60%;高度：40px；行高：40px；显示：块； float:left;color: #9013FE;’预售价：span style=’font-size:18px;字体粗细：700;’3899/span/p
/div
div样式=’height:30px;行高：30px;’
a href=’#’ target=’_blank’ style=’float:left;显示：块；高度：28px；行高：28px；宽度：35%； border:1px 虚线#9013FE;color: #9013FE;文本装饰：无；’
跨度样式=’width:30%;边框-right:1px 虚线#9013FE；显示：块； float:left;’凭证/跨度
跨度样式=’width:65%;显示：块；浮动：左； Overflow:hidden;’150元/跨
/一个
a href=’#’ target=’_blank’ style=’float:right;显示：块；宽度：52%；背景：#9013FE;颜色：#fff；文本装饰：无；溢出：隐藏； padding:0 4%;’点击购买/一个
/div
/div
/里
!–宝贝1结束–
li style=’width:24%;背景：#fff；保证金：0 1% 1% 0;浮动：左；文本对齐：center;’
div 样式=’padding:5px;’
a href=’#’ target=’_blank’img src=’https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!675431384.jpg’ width=’100%’ alt=’主图1′ style=’显示：块；’ //一个
p样式=’background:rgba(0,0,0,5);颜色：#fff；高度：20px；行高：20px；字体大小：12px； Overflow:hidden;’产品卖点描述/p
h4 样式=’border-bottom: 1px 实心RGBA (118,77,247,2);高度3:29px；行高：29px；颜色： #9013FE; 3 像素；颜色：#F40b4c;溢出：隐藏； ‘产品标题文本部分/H4
div样式=’height:40px;行高：40px；填充：4px 0;’
img src=’https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!675431384.png’ style=’width:40%;高度：40px；显示：块； float:left;’ alt=’标志’/
p样式=’width:60%;高度：40px；行高：40px；显示：块； float:left;color: #9013FE;’预售价：span style=’font-size:18px;字体粗细：700;’3899/span/p
/div
div样式=’height:30px;行高：30px;’
a href=’#’ target=’_blank’ style=’float:left;显示：块；高度：28px；行高：28px；宽度：35%； border:1px 虚线#9013FE;color: #9013FE;文本装饰：无；’
跨度样式=’width:30%;边框-right:1px 虚线#9013FE；显示：块； float:left;’凭证/跨度
跨度样式=’width:65%;显示：块；浮动：左； Overflow:hidden;’150元/跨
/一个
a href=’#’ target=’_blank’ style=’float:right;显示：块；宽度：52%；背景：#9013FE;颜色：#fff；文本装饰：无；溢出：隐藏； padding:0 4%;’点击购买/一个
/div
/div
/里
li style=’width:24%;背景：#fff；保证金：0 1% 1% 0;浮动：左；文本对齐：center;’
div 样式=’padding:5px;’
a href=’#’ target=’_blank’img src=’https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!675431384.jpg’ width=’100%’ alt=’主图1′ style=’显示：块；’ //一个
p样式=’background:rgba(0,0,0,5);颜色：#fff；高度：20px；行高：20px；字体大小：12px； Overflow:hidden;’产品卖点描述/p
h4 样式=’border-bottom: 1px 实心RGBA (118,77,247,2);高度3:29px；行高：29px；颜色： #9013FE; 3 像素；颜色：#F40b4c;溢出：隐藏； ‘产品标题文本部分/H4
div样式=’height:40px;行高：40px；填充：4px 0;’
img src=’https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!675431384.png’ style=’width:40%;高度：40px；显示：块； float:left;’ alt=’标志’/
p样式=’width:60%;高度：40px；行高：40px；显示：块； float:left;color: #9013FE;’预售价：span style=’font-size:18px;字体粗细：700;’3899/span/p
/div
div样式=’height:30px;行高：30px;’数据源=’www.mgsns.com’
a href=’#’ target=’_blank’ style=’float:left;显示：块；高度：28px；行高：28px；宽度：35%； border:1px 虚线#9013FE;color: #9013FE;文本装饰：无；’
跨度样式=’width:30%;边框-right:1px 虚线#9013FE；显示：块； float:left;’凭证/跨度
跨度样式=’width:65%;显示：块；浮动：左； Overflow:hidden;’150元/跨
/一个
a href=’#’ target=’_blank’ style=’float:right;显示：块；宽度：52%；背景：#9013FE;颜色：#fff；文本装饰：无；溢出：隐藏； padding:0 4%;’点击购买/一个
/div
/div
/里
li style=’width:24%;背景：#fff；保证金：0 1% 1% 0;浮动：左；文本对齐：center;’
div 样式=’padding:5px;’
a href=’#’ target=’_blank’img src=’https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!675431384.jpg’ width=’100%’ alt=’主图1′ style=’显示：块；’ //一个
p样式=’background:rgba(0,0,0,5);颜色：#fff；高度：20px；行高：20px；字体大小：12px； Overflow:hidden;’产品卖点描述/p
h4 样式=’border-bottom: 1px 实心RGBA (118,77,247,2);高度3:29px；行高：29px；颜色： #9013FE; 3 像素；颜色：#F40b4c;溢出：隐藏； ‘产品标题文本部分/H4
div样式=’height:40px;行高：40px；填充：4px 0;’
img src=’https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!675431384.png’ style=’width:40%;高度：40px；显示：块； float:left;’ alt=’标志’/
p样式=’width:60%;高度：40px；行高：40px；显示：块； float:left;color: #9013FE;’预售价：span style=’font-size:18px;字体粗细：700;’3899/span/p
/div
div样式=’height:30px;行高：30px;’
a href=’#’ target=’_blank’ style=’float:left;显示：块；高度：28px；行高：28px；宽度：35%； border:1px 虚线#9013FE;color: #9013FE;文本装饰：无；’
跨度样式=’width:30%;边框-right:1px 虚线#9013FE；显示：块； float:left;’凭证/跨度
跨度样式=’width:65%;显示：块；浮动：左； Overflow:hidden;’150元/跨
/一个
a href=’#’ target=’_blank’ style=’float:right;显示：块；宽度：52%；背景：#9013FE;颜色：#fff；文本装饰：无；溢出：隐藏； padding:0 4%;’点击购买/一个
/div
/div
/里
!–li style=’width:24%;背景：#fff；保证金：0 1% 1% 0; float:left;’./li–
/ul
/div
/div
版本二：固定保守版
【用途】：
为了方便使用，代码中提供了详细的文字说明。
如果需要全屏，可以使用我写的全屏工具。如果您不知道如何使用，请参阅使用教程。工具地址：http://www.mgsns.com/portal.php?mod=topictopicid=7
这是保守版，即尺寸固定，只能放4个宝宝成一排。
如果有代码库，可以随意修改代码，实现宝贝显示方法。
对于代码的使用，下面已经写了完整的文字说明
代码中的所有图片、链接、文字都可以随意修改。
div样式=’width:1920px;背景颜色： #490585;’
div样式=’width:1100px;填充：30px 0; margin:0 自动； font-size:12px;font-family:微软雅黑；’
!–因为尺寸有限，如果只做一排4个，则无需修改；如果您需要2行（8），请更改以下高度：404px；高度为：808px；也就是说，乘以您拥有的行数。 —
ul class=’clear-fix’ style=’height:404px;’
!–这里的里/里是个宝–
!–宝贝1号代码开始–
li style=’width:266px;高度：392px；背景：#fff；边距：0 12px 12px 0;浮动：左；文本对齐：center;’
div 样式=’padding:5px;’
a href=’#’ target=’_blank’img src=’https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!675431384.jpg’ width=’100%’ height=’256′ style=’display:block; ‘//一个
p样式=’background:rgba(0,0,0,5);颜色：#fff；高度：20px；行高：20px；字体大小：12px； Overflow:hidden;’宝贝卖点描述/p
h4 样式=’border-bottom: 1px 实心RGBA (118,77,247,2);高度3:29px；行高：29px；颜色： #9013FE; 3 像素；颜色：#F40b4c;溢出：隐藏； ‘产品标题文本部分/H4
div样式=’height:40px;行高：40px；填充：4px 0;’
img src=’https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!675431384.png’ style=’width:40%;高度：40px；显示：块； float:left;’ /
p型
e=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>预售价：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p>
</div>
<div style=”height:30px; line-height:30px;” data-source=”www.mgsns.com”>
<a class=”miseu1″ href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:100px; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”>
<span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span>
<span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span>
</a>
<a class=”miseu2″ href=”#” target=”_blank” style=”float:right; display:block; width:130px; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 10px;”>点击购买</a>
</div>
</div>
</li>
<!–宝贝1代码结束–>
<li style=”width:266px; height:392px; background:#fff; margin:0 12px 12px 0; float:left; text-align:center;”>
<div style=”padding:5px;”>
<a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” height=”256″ style=”display:block;” /></a>
<p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>宝贝卖点描述</p>
<h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>产品标题文字部分</h4>
<div style=”height:40px; line-height:40px; padding:4px 0;”>
<img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” />
<p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>预售价：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p>
</div>
<div style=”height:30px; line-height:30px;”>
<a class=”miseu1″ href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:100px; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”>
<span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span>
<span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span>
</a>
<a class=”miseu2″ href=”#” target=”_blank” style=”float:right; display:block; width:130px; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 10px;”>点击购买</a>
</div>
</div>
</li>
<li style=”width:266px; height:392px; background:#fff; margin:0 12px 12px 0; float:left; text-align:center;”>
<div style=”padding:5px;”>
<a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” height=”256″ style=”display:block;” /></a>
<p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>产品卖点描述</p>
<h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>产品标题文字部分</h4>
<div style=”height:40px; line-height:40px; padding:4px 0;”>
<img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” />
<p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>预售价：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p>
</div>
<div style=”height:30px; line-height:30px;”>
<a class=”miseu1″ href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:100px; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”>
<span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span>
<span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span>
</a>
<a class=”miseu2″ href=”#” target=”_blank” style=”float:right; display:block; width:130px; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 10px;”>点击购买</a>
</div>
</div>
</li>
<li style=”width:266px; height:392px; background:#fff; margin:0 0 12px 0; float:left; text-align:center;”>
<div style=”padding:5px;”>
<a href=”#” target=”_blank”><img src=”https://img.alicdn.com/imgextra/i4/675431384/TB2gEFrlbxmpuFjSZJiXXXauVXa_!!675431384.jpg” width=”100%” height=”256″ style=”display:block;” /></a>
<p style=”background:rgba(0,0,0,.5); color:#fff; height:20px; line-height:20px; font-size:12px; overflow:hidden;”>产品卖点描述</p>
<h4 style=”border-bottom: 1px solid rgba(118,77,247,.2); height:29px; line-height:29px; color: #9013FE; font-size:13px;color:#f40b4c; overflow:hidden;”>产品标题文字部分</h4>
<div style=”height:40px; line-height:40px; padding:4px 0;”>
<img src=”https://img.alicdn.com/imgextra/i3/675431384/TB2QD4EjCFjpuFjSszhXXaBuVXa_!!675431384.png” style=”width:40%; height:40px; display:block; float:left;” />
<p style=”width:60%; height:40px; line-height:40px; display:block; float:left;color: #9013FE;”>预售价：￥<span style=”font-size:18px; font-weight:700;”>3899</span></p>
</div>
<div style=”height:30px; line-height:30px;”>
<a class=”miseu1″ href=”#” target=”_blank” style=”float:left; display:block; height:28px; line-height:28px; width:100px; border:1px dashed #9013FE;color: #9013FE; text-decoration:none;”>
<span style=”width:30%; border-right:1px dashed #9013FE; display:block; float:left;”>劵</span>
<span style=”width:65%; display:block; float:left; overflow:hidden;”>150元</span>
</a>
<a class=”miseu2″ href=”#” target=”_blank” style=”float:right; display:block; width:130px; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 10px;”>点击购买</a>
</div>
</div>
</li>
<!–<li style=”width:266px; height:392px; background:#fff; margin:0 0 12px 0; float:left; text-align:center;”>5</li>–>
</ul>
</div>
用户评论
一笑抵千言
这个米色电商双十一店铺宝贝展示模板代码太实用了，我马上用这个来优化我的店铺页面，希望销量能涨涨涨！
有17位网友表示赞同！
冷青裳
双十一快到了，这个模板颜色搭配得真不错，可惜我不会用代码，希望有大神能帮忙看看。
有19位网友表示赞同！
七级床震
刚刚看到这个模板，真的挺好看的，特别是米色的背景，让人感觉温馨。打算用它来吸引顾客。
有6位网友表示赞同！
∞◆暯小萱◆
米色电商双十一店铺模板，简直是电商人的福音啊！这种免费分享真是太好了。
有10位网友表示赞同！
青衫故人
第一次看到这样的模板，感觉挺有创意的，尤其是宝贝展示区域的设计，赞一个！
有20位网友表示赞同！
站上冰箱当高冷
双十一临近，这个模板颜色搭配得恰到好处，可惜我不会做店铺，不然就能用上了。
有15位网友表示赞同！
一笑傾城゛
看到这个米色电商双十一店铺模板，心里有点小激动，希望能帮助我的店铺吸引更多顾客。
有19位网友表示赞同！
醉枫染墨
这个模板代码分享太及时了，我正愁双十一店铺怎么设计呢，感谢分享者！
有11位网友表示赞同！
断秋风
米色电商双十一店铺模板，感觉比那些花里胡哨的模板更接地气，适合大众口味。
有10位网友表示赞同！
?娘子汉
双十一店铺宝贝展示模板，这个米色风格真的挺好看的，希望用这个模板能提升店铺档次。
有19位网友表示赞同！
情如薄纱
这个模板的代码看起来有点复杂，我是不是得去学习一下编程了？哈哈。
有19位网友表示赞同！
墨染天下
双十一快到了，这个米色电商店铺宝贝展示模板，真是解了我们的燃眉之急啊！
有18位网友表示赞同！
别伤我i
分享的模板设计简洁大方，米色背景确实很温馨，谢谢分享者，给个好评！
有6位网友表示赞同！
绳情
米色电商双十一店铺模板，感觉有点单调，如果能有更多颜色选择就好了。
有17位网友表示赞同！
伱德柔情是我的痛。
这个模板代码分享太贴心了，正好我在为双十一店铺装修犯愁，感谢分享者！
有11位网友表示赞同！
陌離
双十一店铺宝贝展示模板，米色背景确实挺好看的，就是不知道兼容性如何。
有16位网友表示赞同！
瑾澜
这个米色电商双十一店铺模板，感觉有点像我的风格，打算试试看。
有16位网友表示赞同！
巷口酒肆
双十一店铺装修模板，米色背景显得高端大气，希望用这个模板能提高转化率。
有20位网友表示赞同！
歆久
这个模板代码分享得挺详细的，虽然我不是很懂，但试着看能不能应用到我的店铺里。
有18位网友表示赞同！