以是米色加班编写了一个双十一店铺宝贝展示的代码模板。美工只须要复制代码到DW里面，更换笔墨，图片，链接即可快速在店铺装修一个宝贝展示的效果。
由于是模板，以是样式可能是固定的，不过你有代码根本，也可以修正宝贝展示的效果。
有小伙伴要吐槽了，我在PS里面直接设计好，只要放图片就可以嘛，搞这么麻烦干什么？
答：PS里面涉及图片是方便，但是如果老板要修正主图或者文案等内容呢？如果老板以为一排4个不好看，换成1排3个呢？如果一个宝贝展示里面，有多个链接怎么办？
以是直接将米色的代码模板，进行修正，方便快捷。下面会有详细解释，看完你就知道这个代码模板的妙处了。
三：效果展示由于一排4个的截图太长，未便利做封面，以是只截取了2个宝贝展示。
四：代码解释【把稳】：为了方便不同根本的小伙伴利用，米色专门编写了2个版本的代码模板，根据须要下载利用
【作者】：米色（miseu）
【适用】：淘宝店（由于没有天猫店测试，以是理论上也适用于天猫店）
【权限】：无需购买CSS权限
版本一：完美观点版把稳下面代码均为没有全屏的，由于不同版本店铺，全屏代码会不一样。须要全屏，可以利用下面的全屏天生工具
【利用】：
为了方便利用，在代码中已经做了详细的笔墨解释
如果须要全屏，可以利用我编写的全屏工具，不会用，看利用教程。工具地址：http://www.mgsns.com/portal.php?mod=topic&topicid=7
下面所有的灰色注释笔墨，在店铺里面不会显示，放心复制
把稳，这是完美观点版，也便是可拓展性非常高，但是不敢担保，天猫和淘宝店 是不是都可以清理浮动，如果不能清浮动，可能导致背景色不显示。
可随意修正内容部分宽度。
可随意修正一排放多少宝贝，只须要修正一个数值，就可以随意切换一排的个数。
可随意添加宝贝个数，想放几个 直接复制粘贴即可
代码的利用，下面已经写了完全的笔墨解释
代码中所有的图片，链接，笔墨均可随意修正
【源码下载】：
由于不能发网盘链接，以是直接放的代码，复制到DW里面修正利用
<!-- ========== 复制下面的代码去利用 ========== -->
<div style=\公众width:1920px; background-color: #490585;\"大众>
<!--这下面的width:1100px;是中间宝贝展示的宽度，你想做成多宽 就改成多少-->
<div style=\"大众width:1100px; padding:30px 0; margin:0 auto; font-size:12px;font-family:Microsoft YaHei;\公众>
<ul class=\"大众clear-fix\"大众>
<!--宝贝1开始-->
<!--
1-一排2个，将下面每个li标签里面的 width:24%; 改成 width:49%;
2-一排3个，将下面每个li标签里面的 width:24%; 改成 width:32.333333%;
3-一排4个，默认不须要修正
4-一排5个，将下面每个li标签里面的 width:24%; 改成 width:19%;
-->
<li style=\"大众width:24%; background:#fff; margin:0 1% 1% 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%\公众 alt=\公众主图1\公众 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;\"大众 alt=\公众logo\公众 />
<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 href=\公众#\"大众 target=\"大众_blank\"大众 style=\公众float:left; display:block; height:28px; line-height:28px; width:35%; 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 href=\"大众#\公众 target=\公众_blank\公众 style=\"大众float:right; display:block; width:52%; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 4%;\公众>点击购买</a>
</div>
</div>
</li>
<!--宝贝1结束-->
<li style=\"大众width:24%; background:#fff; margin:0 1% 1% 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%\"大众 alt=\"大众主图1\"大众 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;\"大众 alt=\"大众logo\"大众 />
<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 href=\"大众#\公众 target=\公众_blank\"大众 style=\"大众float:left; display:block; height:28px; line-height:28px; width:35%; 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 href=\"大众#\"大众 target=\"大众_blank\"大众 style=\"大众float:right; display:block; width:52%; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 4%;\"大众>点击购买</a>
</div>
</div>
</li>
<li style=\公众width:24%; background:#fff; margin:0 1% 1% 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%\公众 alt=\"大众主图1\"大众 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;\"大众 alt=\"大众logo\"大众 />
<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;\"大众 data-source=\公众www.mgsns.com\"大众>
<a href=\"大众#\"大众 target=\"大众_blank\"大众 style=\"大众float:left; display:block; height:28px; line-height:28px; width:35%; 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 href=\公众#\"大众 target=\"大众_blank\"大众 style=\公众float:right; display:block; width:52%; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 4%;\公众>点击购买</a>
</div>
</div>
</li>
<li style=\"大众width:24%; background:#fff; margin:0 1% 1% 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%\公众 alt=\公众主图1\"大众 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;\"大众 alt=\公众logo\公众 />
<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 href=\"大众#\"大众 target=\公众_blank\"大众 style=\"大众float:left; display:block; height:28px; line-height:28px; width:35%; 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 href=\"大众#\"大众 target=\公众_blank\公众 style=\公众float:right; display:block; width:52%; background:#9013FE; color:#fff; text-decoration:none; overflow:hidden; padding:0 4%;\公众>点击购买</a>
</div>
</div>
</li>
<!--如果须要再加一个宝贝展示，就直接把全体<li>....</li>复制放到下面即可，看末了灰色注释样例-->
<!--<li style=\"大众width:24%; background:#fff; margin:0 1% 1% 0; float:left;\"大众>............</li>-->
</ul>
</div>
</div>
版本二：固定守旧版【利用】：
为了方便利用，在代码中已经做了详细的笔墨解释
如果须要全屏，可以利用我编写的全屏工具，不会用，看利用教程。工具地址：http://www.mgsns.com/portal.php?mod=topic&topicid=7
下面所有的灰色注释笔墨，在店铺里面不会显示，放心复制
这是守旧版，也便是尺寸都固定了，而且一排只能放4个宝贝
如果有代码根本，可随意修正代码来显示宝贝展示办法
代码的利用，下面已经写了完全的笔墨解释
代码中所有的图片，链接，笔墨均可随意修正
【源码分享】：
<!-- ========== 复制下面的代码去利用 ========== -->
<div style=\"大众width:1920px; background-color: #490585;\"大众>
<div style=\"大众width:1100px; padding:30px 0; margin:0 auto; font-size:12px;font-family:Microsoft YaHei;\"大众>
<!--由于限定了尺寸，以是如果只做一排4个，不须要修正；如果须要2排（8个）就将下面的height:404px;改成height:808px; 也便是有几排就乘几。-->
<ul class=\公众clear-fix\公众 style=\"大众height:404px;\公众>
<!--这里一个<li></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;\"大众 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>
<!-- === 一排四个分割线，超过4个就复制上面的<li></li> 放后面即可，看下面样例=== -->
<!--<li style=\"大众width:266px; height:392px; background:#fff; margin:0 0 12px 0; float:left; text-align:center;\"大众>5</li>-->
</ul>
</div>
</div>
