淘宝店铺装修：全屏海报，全屏轮播，店招通栏

来源：互联网 2023-02-21 16:13:55 477

给大家总结一些小卖家的常用店铺装修代码，但很多卖家们都没去了解店铺装修后台的版本，许多人也不知道：作为一钻级以下的店铺装修后台是默认基础版，可以免费使用专业版等我们到了一钻以后，如果想要用专业版要花50元一个月去买。我们会看到别人的全屏海报，全屏店招非常的大气、漂亮，但是自己又不知道如何去做，他们总是会说，我连ps都不熟，怎么看得懂代码呢，今天分享一些简单的代码给大家，你们不需要都看懂，其实很简单的，我会详细地给大家指出来。

工具/原料

电脑
图片

方法/步骤

第一点：全屏海报（代码如下）

【div style="height:550px;">

div class="footer-more-trigger" style="left:50%;top:auto;border:none;padding:0;">

div class="footer-more-trigger" style="left:-960px;top:auto;border:none;padding:0;">

a href="图片链接" target="_blank" style="width:1920px;height:550px;display:block;">

img src="图片地址" border="0" alt="全屏海报" />/a>

/div>

】

首先得将我们的海报做好之后，并上传到我们自己的图片空间里面，再复制海报图片的链接，替换掉上面代码中的“图片链接”，再用“希望顾客查看的自定义模块的链接”替换掉“图片地址”。（去装修后台，在店招下面部分添加一个自定义模块（相信这个应该都会吧））

淘宝店铺装修：全屏海报，全屏轮播，店招通栏

1该信息未经许可获取自百度经验

看图片，最上面一排显示标题后面选中“不显示”，第二排选中那个两个小箭头的按钮（>这是切换为源代码编辑模式），下面文本框里面，把我们改动之后的代码复制粘贴进去，就完成了，我们的全屏海报，！可以看到案例中的heighth:550px，这个我的图片用的1920*550的，作图的时候高度根据你们自己的需要去定，如果你用的600px的，就把代码中的550改为600就行了；left:-960px，因为我的图片宽1920，960是我的图片宽度的一半，这个可以设置成你的图片的一半就可以了。

淘宝店铺装修：全屏海报，全屏轮播，店招通栏

第二点：全屏轮播

一张图片可能不够刺激，想要全屏弄几张图片，让图片轮播，可以多展示几个宝贝，其实这个代码也不麻烦，代码如下：

【 div class="footer-more-trigger" style="width:1920px;height:550px;padding:0px;border:none;left:-960px;">

div data-widget-config="{'contentCls': 'taobaoux-com','navCls': 'bbs-taobaoux-com','effect': 'scrollx','easing':

'easeOutStrong','prevBtnCls':'prev1920','nextBtnCls':'next1920','autoplay': true,'viewSize':[1920],'circular': true}" data-widget-type="Carousel" class="J_TWidget">

div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[-500,0],'points':['cc','cc']}}" data-widget-

type="Popup" style="display:none;">

/div>

div class="J_TWidget" data-widget-config="{'trigger':'.ux1920','align':{'node':'.ux1920','offset':[500,0],'points':['cc','cc']}}" data-widget-type="Popup"

style="display:none;">

/div>

div style="height:550px;width:1920px;overflow:hidden;padding:0px;margin:0px;" class="ux1920">

ul class="taobaoux-com" style="height:550px;width:1920px;padding:0px;margin:0px;">

li style="width:1920px;height:550px;padding:0px;margin:0px;">

a target="_blank" href="图片一链接" style="padding:0px;margin:0px;">

img src="图片一地址" width="1920px" height="550px" border="0px">/a>/li>

li style="width:1920px;height:550px;padding:0px;margin:0px;">

a target="_blank" href="图片二链接" style="padding:0px;margin:0px;">

img src="图片二地址" width="1920px" height="550px" border="0px">/a>/li>

li style="width:1920px;height:550px;padding:0px;margin:0px;">

a target="_blank" href="图片三链接" style="padding:0px;margin:0px;">

img src="图片三地址" width="1920px" height="550px" border="0px">/a>/li>

/ul>

/div>

div class="footer-more-trigger" style="padding:0px;border:none;left:50%;">

div class="footer-more-trigger" style="width:1920px;height:50px;padding:0px;border:none;left:-960px;background: url() repeat;top:500px;">

ul class="bbs-taobaoux-com" style="width:950px;height:50px;margin:0 auto;text-align: center;">

li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">

img src="图片一地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" />/li>

li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">

img src="图片二地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" />/li>

li style="display: inline;margin: 0 5px;cursor:pointer;line-height: 50px;">

img src="图片三地址" width="137px" height="46px" border="0px" style="vertical-align:middle;margin:5px 0;" />/li>

/ul>

/div>

ul class="ks-switchable-nav" style="display:none;">/ul>

/div>

】

做的时候一定小心哦，因为一个标点的错误，可能就没有效果的，小心仔细点。

不要看这个代码如此之多，方法与我们上面说的全屏海报的方法差不多的，首先高度我就不强调了，与第一点的一样，把hight后面的550改成自己的图片的高度就行，这个轮播，我用的三张海报的，把海报传到自己的图片空间，三张海报地址与海报对应的跳转链接分别按照顺序替换代码中的图片一地址、图片一链接，一地址对应一个地址，“图片二地址、图片二链接，图片三地址、图片三链接”，图片链接就是点击海报我们想要跳转的页面链接。这些完成之后保存代码，同样在店招导航下面添加自定义模块，与第一点讲的一样，把改好的代码复制粘贴进去，确定，发布，再看吧，成功了。

淘宝店铺装修：全屏海报，全屏轮播，店招通栏

第三点：固定背景

我们去一些大店看的时候，他们的背景不会随着我们的页面拉动而改变，两边有着我们不论怎么拉动页面都可以看到的一些促销文案，二维码图片等等，其实这个也不难，我们只需要做一张宽1920，高一般700左右的就可以图片，然后，两边均匀加上我们想要加的东西，例如：微淘，二维码，促销信息。这点就需要大家用一下ps了，我们加的具体位置呢，是保证我们页面中间950两边，不然会被中间的模块遮挡住。图片做好之后，依然是上传到图片空间，代码如下：

【body{background-image:url(图片地址);background-repeat:no-repeat;background-position:center;background-attachment:fixed;}】

就这一句，简单吧，复制图片链接，替换这句代码中的图片地址。

淘宝店铺装修：全屏海报，全屏轮播，店招通栏