【温馨提示】本文共有2446个字，预计阅读完需要7分钟，请仔细阅读哦！
全屏轮播在店铺装修的首屏位置一直没有被撼动。形形色色的首页，预览你会发现轮播的影子无处不在。不管是全屏，或者小尺寸，轮播在的位置是非常抢眼的也是非常重要的！今天给大家带来淘宝店铺装修之全屏轮播代码解析！
显示器分辨率普遍在1920*1080p的当下。由于淘宝不支持全屏代码的自适应（淘宝天猫都屏蔽width:100%；）；所以首页的宽度自然而然选择1920px的宽度！至于高度而言单屏1080px的高度。轮播高度的选择就根据个人喜好而定。主要考虑的一些因素：淘宝官方标题的115px高度+店招150px高度+不同浏览器的标签标题工具栏高度不统一。因此轮播高度建议：450px-700px。下面我们以650px高度举例！
轮播尺寸：1920px*650px | 轮播数量：3张。淘宝店铺基础版代码如下：
<p style="height:640px;">
<p class="footer-more-trigger mallNav-others sn-simple-logo" style="width:1920px;height:650px;border:0;padding:0;right:auto;z-index:1;top:auto;left:50%;">
<p class="footer-more-trigger mallNav-others sn-simple-logo" style="width:1920px;height:650px;border:0;padding:0;right:auto;z-index:1;top:auto;left:-1060px;">
<p class="J_TWidget" data-widget-type="Carousel" data-widget-config="{'nextBtnCls':'next1','duration':1,'activeTriggerCls':'hidden','easing':'easeOutStrong','effect':'scrollx','interval':4,'navCls':'nav_pixel1','contentCls':'content_pixel2','prevBtnCls':'prev1','autoplay':true}" style="height:650px;overflow:hidden;position:relative;">
<ul class="content_pixel2"><li style="width:1920px;height:650px;display:block;float:left;">
<a target="_blank" href="#" style="width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i4/860326432/TB2LLB5p.lnpuFjSZFjXXXTaVXa_!!860326432.jpg);"> </a></li>
<li style="width:1920px;height:650px;display:block;float:left;">
<a target="_blank" href="#" style="width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i4/860326432/TB2yLFKpYBnpuFjSZFGXXX51pXa_!!860326432.jpg);"> </a></li>
<li style="width:1920px;height:650px;display:block;float:left;">
<a target="_blank" href="#" style="width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i2/860326432/TB2DUSgp5lnpuFjSZFgXXbi7FXa_!!860326432.jpg);"> </a></li></ul>
<ul class="footer-more-trigger mallNav-others sn-simple-logo" style="width:100%;height:20px;z-index:98;padding:0;border:0;right:auto;top:auto;left:auto;margin-left:700px;bottom:18px;">
<li style="width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;">轻便缓震跑鞋</li>
<li style="width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;">透气缓震跑鞋</li>
<li style="width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;"> 透气缓震跑鞋</li></ul>
<ul class="footer-more-trigger mallNav-others sn-simple-logo nav_pixel1" style="width:100%;height:20px;right:auto;z-index:99;padding:0;border:0;top:auto;left:auto;margin-left:700px;bottom:18px;">
<li style="width:180px;height:30px;background-color:#FFFFFF;display:block;float:left;margin-right:0px;font-size:12px;color:#4F4F4F;line-height:30px;text-align:center;opacity:0.9;" class="hidden">轻便缓震跑鞋</li>
<li style="width:180px;height:30px;background-color:#FFFFFF;display:block;float:left;margin-right:0px;font-size:12px;color:#4F4F4F;line-height:30px;text-align:center;opacity:0.9;"> 透气缓震跑鞋</li>
<li style="width:180px;height:30px;background-color:#FFFFFF;display:block;float:left;margin-right:0px;font-size:12px;color:#4F4F4F;line-height:30px;text-align:center;opacity:0.9;">
透气缓震跑鞋</li></ul>
</p></p></p></p>
轮播效果如下图所示：
图片更换成加链接：
<li style="width:1920px;height:650px;display:block;float:left;">
<a target="_blank" href="#" style="width:1920px;height:650px;display:block;background-image:url(https://img.alicdn.com/imgextra/i4/860326432/TB2LLB5p.lnpuFjSZFjXXXTaVXa_!!860326432.jpg);"> </a>
</li>
href="#" 把#换成店铺宝贝链接 background-image:url(...) 把括号里面的图片链接换成图片空间的链接
轮播标题修改：
<li style="width:180px;height:30px;background-color:#5B5B5B;display:block;float:left;cursor:pointer;margin-right:0px;font-size:12px;color:#FFF;line-height:30px;text-align:center;opacity:0.95;">
轻便缓震跑鞋
</li>
“轻便缓震跑鞋” 修改为自己想要的文案（下方还有一个一样的“轻便缓震跑鞋” 要修改哦）
650px高度不是你想要的效果。那么下面就教大家修改轮播高度！举例：650px高度修改成550px高度的轮播！需要的工具：Dreamweaver 是集网页制作和管理网站于一身的所见即所得网页编辑器（任何版本均可，需要绿色版的或者官方最新版cc2017 可以留言；给大家安装包）
为了小店店主的福利。主要讲解的均是店铺基础版的！专业版、智能版（包括天猫），代码跟基础版就一个数值的不同。其他是一模一样的！数值第三个<p....style=".....left:-1060px;">修改为<p....style="left:-960px;">这样修改专业版智能版就可以直接使用了！
第四个<p class="J_TWidget"...>其中两个数值修改将会改变轮播的视觉样式。
'effect':'scrollx' 将scrollx（左右轮播）修改为scrolly（上下轮播）
渐变效果参数修改
'easing':'easeOutStrong' 参数easeOutStrong修改视觉效果改变；供参考！
'easing':'easeNone' 没有任何变化 'easing':'easeBoth' 感觉和None差不多 'easing':'elasticOut' 变化很快后抖动一下 'easing':'easeOutStrong' 先快后慢→强 'easing':'easeOut' 先快后慢→速度比较缓 'easing':'easeIn' 先慢后宽→速度比较缓 'easing':'elasticIn' 抖动一下→很快变化 'easing':'backIn' 倒回去一点→再变化→有点象起步跑 'easing':'backOut' 跳过头→又返回→速度比较缓
上一篇提到《教你淘宝美工0基础淘宝店铺全屏装修技巧 Get！》；没有学习的可以去看看！
下一篇讲解预告：基础装修流程【ps切片→导出→上传图片空间→批量替换图片链接→加链接（或者用热点的方法加链接）→上传装修后台→发布】
有帮到大家，希望大家点关注。以上！
【进阶知识】
首选进入过户检测页面，系统会提示满足或不满足过户条件，如果满足可以直接进入过户流程，如果不满足会列出需要满足的项，需要处理后再重新检测
已经满足所有条件就可以直接进入过户流程
接下来填写接收方支付宝，然后把复制链接给到接收方，需要通过PC电脑端打开链接，登录接收方支付宝完成授权。
这里面要注意
1、当申请方（原店铺）为“个人店铺”时，可以选择“移民过户”、“死亡过户”；注意：此步骤移民过户/死亡过户提交审核材料；如果是营业执照注销需要提交材料+实人认证。
2、如果选择正常经营，该步骤需要申请方进行实人认证。
第五步：需要缴费服务费200元（如果新流程变更失败可以重复发起，不会再次收费，服务费是不能退款的）
第六步：复制链接，用之前填写的接收方支付宝登录。
第七步：接收方（新店主）签署协议。
第八步：接收方（新店主）绑定手机和邮箱（手机号是用于过户后绑定淘宝账号）。接收方（新店主）扫码认证
接收方（新店主）确认过户信息。
第九步：冻结保证金，需要在接收方（新店主）支付宝可用余额里充值钱款，额度大于等于申请方（原店主）保证金额度（保证金相关问题查看页面）。
第十步：执行变更，这个过程大概1-2分钟，如果比较长时间还没出执行结果，可以点击【刷新页面】。
注意：如果是同主体进行的过户（自己人），不需要修改密码，若是过户给其他人，则需要及时完成密码修改。
淘宝店铺二级域名怎么设置「免费二级域名申请步骤」
【本文标题和网址】淘宝店铺页面展示代码是什么「淘宝店铺装修教程解析」 http://www.cftyj.cn/taobao/2024052850830.html
内容更新时间（UpDate）：
2024年05月28日 星期二
