：前言

马上电商年底大促双十一要开始了，店铺都在紧张备战中，特别是美工，各种页面设计装修，各种加班。

所以米色加班编写了一个双十一店铺宝贝展示的代码模板。美工只需要复制代码到DW里面，替换文字，图片，链接即可快速在店铺装修一个宝贝展示的效果。

因为是模板，所以样式可能是固定的，不过你有代码基础，也可以修改宝贝展示的效果。

二：我要吐槽

有小伙伴要吐槽了，我在PS里面直接设计好，只要放图片就可以嘛，搞这么麻烦干什么？

答：PS里面涉及图片是方便，但是如果老板要修改主图或者文案等内容呢？如果老板觉得一排4个不好看，换成1排3个呢？如果一个宝贝展示里面，有多个链接怎么办？

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

三：效果展示

因为一排4个的截图太长，不方便做封面，所以只截取了2个宝贝展示。

四：代码说明

【注意】：为了方便不同基础的小伙伴使用，米色专门编写了2个版本的代码模板，根据需要下载使用

【作者】：米色（miseu）

【适用】：淘宝店（由于没有天猫店测试，所以理论上也适用于天猫店）

【权限】：无需购买CSS权限

版本一：完美概念版

注意下面代码均为没有全屏的，因为不同版本店铺，全屏代码会不一样。需要全屏，可以使用下面的全屏生成工具

【使用】：

1. 为了方便使用，在代码中已经做了详细的文字说明

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

3. 下面所有的灰色注释文字，在店铺里面不会显示，放心复制

4. 注意，这是完美概念版，也就是可拓展性非常高，但是不敢保证，天猫和淘宝店 是不是都可以清理浮动，如果不能清浮动，可能导致背景色不显示。

5. 可随意修改内容部分宽度。

6. 可随意修改一排放多少宝贝，只需要修改一个数值，就可以随意切换一排的个数。

7. 可随意添加宝贝个数，想放几个 直接复制粘贴即可

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

9. 代码中所有的图片，链接，文字均可随意修改

【源码下载】：

由于不能发网盘链接，所以直接放的代码，复制到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="http://www.hmttv.cn/uploadfile/2024/0808/20240808043741120.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="http://www.hmttv.cn/uploadfile/2024/0808/20240808043742408.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="http://www.hmttv.cn/uploadfile/2024/0808/20240808043741120.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="http://www.hmttv.cn/uploadfile/2024/0808/20240808043742408.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="http://www.hmttv.cn/uploadfile/2024/0808/20240808043741120.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="http://www.hmttv.cn/uploadfile/2024/0808/20240808043742408.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="http://www.hmttv.cn/uploadfile/2024/0808/20240808043741120.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="http://www.hmttv.cn/uploadfile/2024/0808/20240808043742408.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>

很多时候，我们装修无线端页面的都需要大量的无线连接，通常我们都是用现成的转换工具来转换，但是如果没有这些无线连接转换工具了，我们该怎么获取无线端手机端页面链接呢？

下面我们疯狂小编教大家如何手动获取淘宝天猫手机无线店铺的各种链接。下面直接看下面的操作动图吧：

如果看完以上动图演示步骤还是不懂的，欢迎留言，我会尽量教会大家。

文章来源 疯狂的美工一站式设计师服务平台 https://www.fkdmg.com/article/2939.html