淘宝店铺基础版全屏店招代码

　　专业版旺铺可以实现全屏的店招非常简单，但是基础版旺铺要实现全屏店招有很多方法，今天就讲一个大家比较常用的实现全屏的方法。

 

　　本教程有文字+视频，最后还附带了代码。

 

　　第一步、店招和导航的安装

 

　　第一步：图片制作，首先需要设计一张1920宽160高的图片，如下图：

 

　　然后我们进行切片，把整张图片分割成三块，如下所示：

 

　　切出来之后是这样滴：

 

　　①店招

 

　　②导航条

 

　　③全屏背景

 

　　然后把这三张图片上传到自己的图片空间，这样就完成了第一步，前期的准备工作。

 

　　这里可能很多人会问，为什么要把背景做成160高度的呢？

 

　　答：淘宝在导航条设定了10个像素的间隙，理论上基础版店铺是无法去除这个间隙的，所以我们把店招 背景做成160，来解决这个问题。

 

　　第二步、 更改默认模板设置（关键的一步）

 

　　相信很多人都有给店铺设置背景的代码，但是却不能在自己的店铺成功实现全屏店招，根本原因就是忽略了这一步。

 

　　其实很简单。

 

　　首先进入店铺装修页面，直接参考图片中的①②③步，照做就可以了。

 

　　第三步、要实现全屏店招

 

　　这里就是我们最最想要的一步了！！！

 

　　其实很简单，只需要把下面的代码复制到导航条里面就可以了

 

　　body{background-image:url(括号里面替换成你自己的全屏店招背景图片地址);background-repeat:no-repeat;background-position:center 110px;background-attachment:scroll;}

 

　　纳尼，导航条什么地方可以放代码了？

 

　　哈哈，小白了吧，看这里

 

　　大功告成，快行动起来看看效果吧！！