SEO技术教程学习
重庆网站优化、网站排名服务

淘宝模板代码怎么使用(商品详情页面模板代码使用方法)

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

所以米色加班编写了一个双十一店铺宝贝展示的代码模板。美工只需要复制代码到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><!–宝贝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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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><!–这里一个<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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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><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></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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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><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></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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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><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></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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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 alt=”淘宝模板代码怎么使用(商品详情页面模板代码使用方法)” 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><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></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>

本文链接: http://www.xusseo.com/alfx/taobao/47678.html

版权声明:本文著作权归原作者徐三seo所有,转载请注明出处,感谢!

评论 抢沙发

评论前必须登录!

 

重庆SEO培训徐三为您提供最专业的SEO方案

SEO十万个为什么熊掌号专题

友情链接


#