摘要：
　　这篇文章是一篇关于淘宝店铺装修知识点总结的文章，文章中大部分都是提及解决方案，详细的会附上相关的链接......

前言

站长于2013年8月14号开始接触淘宝，由于div+css基础比较劳固加上自己喜欢各种捣腾，至今已积累了大量的店铺装修经验。早在2014年11月份开始，站长就在导航上新建了“懒人代码”栏目，里面存放淘宝店铺装修方面经验与自己的css3特效。

由于网站中关于淘宝店铺装修方面的教程文章过多而多数读者均未能一一浏览完毕。一些简单的问题，仍是有不少新手在群里问及。为了更好更快更加精准的解决新手在装修店铺中遇到的各种问题，艺灵决定将以往的相关文章中的核心内容整理到这篇文章中，同时也会新增一些技巧性经验。也就是说，所有问题均可在此文章中找到解决方案，我想这应该是一个不错的解决方案。（友情提示：查找问题时记得使用Ctrl+F）

目录列表

 
1.会用浏览器
　1.1趁热打铁
2.熟悉店铺后台
 
3.边框问题
 
　3.1去图片边框
 
　3.2去热点轮廓(边框)
 
4.超链接问题
 
　4.1去超链接下划线
 
　4.2图片上任意地方添加超链接问题
 
　4.3淘宝天猫店铺锚点跳转失效
 
5.下边距问题
 
　5.1店招下10px问题
 
　5.2模块下10px/20px问题
　5.3查看下边距具体值(2015年3月8号临时更新此条)
 
6.显示已隐藏的模块/店招
 
　6.1显示已隐藏的店招
 
　6.2显示已隐藏的自定义模块
 
7.全屏问题
 
　7.1全屏店招
　7.2全屏店招1px白边
　7.3全屏代码框架
 
　7.4自定义页面全屏
 
　7.5天猫B店页尾全屏且无水平滚动条
 
　7.6淘宝C店页尾全屏
 
　7.7淘宝C店详情页百变全屏背景
 
　7.8全屏固定背景
 
　7.9视差滚动特效
 
8.自定义搜索框
 
9.关注代码
 
　9.1关注代码带数字
 
　9.2关注代码可取消
 
10.您不能使用他人图片空间中的图片
 
　10.1延迟加载技术data-ks-lazyload
 
　10.2上传自己空间
 
11.收藏代码
 
　11.1店铺收藏代码
 
　11.2单个宝贝收藏代码
 
12.加入购物车代码
 
13.分享代码
 
14.喜欢代码
 
15.店铺留言板代码
 
16.滤镜代码失效问题
 
17.Widget规范
18.图片空隙问题(2015.2.28号新增)
　18.1垂直方向上有空隙
　18.2水平方向上有空隙
　18.3table中的图片在垂直方向上有空隙(京东)
19.倒计时特效失效问题
20.代码过滤问题
　20.1css样式过滤
　20.2html标签过滤
 

1.会用浏览器

如果你想装修店铺，而又不会使用浏览器的“审查元素”功能，一遇到问题就开始挠头的话，即使你把头皮挠破，问题还是解决不了！因为你根本就没有找对方法！

有人开始不服了，某人说：“我本身就不是个淘宝美工，我用审查元素功能有个屁用啊！”

我要说：“你不做美工可以，有本事你别使用电脑浏览网页啊！”

只要你浏览网页，你就得用浏览器。至于学会这个“审查元素”功能有什么好处，这个要看你个人用到什么方面上了。废话不说了，进入正文。

下面简单的说下如何使用浏览器的“审查元素”功能。艺灵建议大家使用以下一系列浏览器中的任意一种：Chrome(谷歌)、Ff(火狐)、Opera(欧朋)、360极速、360安全、淘宝、搜狗等。如果浏览器自带双核，建议切换成“极速模式”。(这里列举的双核浏览器，建议更新到最新版本。)接下来以图文的方式，教新手如何将双核浏览器切换成极速模式。以360安全浏览器为基准进行演示，具体请看下图一： 切换完成后再教新手如何使用浏览器的“审查元素”功能，具体请看下图二： 

1.1趁热打铁

刚讲了审查元素的用法，下面我们来趁热打铁一下，举个栗子。上图： 上图所示的是某下载网站中dreamweaver cs6绿色版下载页面的截图。对于那些对下载网站不了解的小朋友来说，相当多的一部分人会毫不犹豫的点击红框中的链接，然后坐等下载完成。看似图中有好多渠道的链接，起码最少有7个吧。那么问题来了：问：箭头所指的区域内有几个渠道的下载链接。

有奖竞猜

答案即将公布，不要走开，广告过后，精彩回来！
大葵花爸爸课堂上课了！......
左手拿着教科书，右手拿着打火机，哪里不会点哪里！爷爷再也不用担心没人陪我玩啦！......
不管是现在，还是在遥远的未来......
广告完毕，精彩回来。想知道答案者请继续往下看
真相↓
 

真是不看不知道，一看吓一跳啊！骚年，学会使用审查元素吧，艺灵只能帮你到这儿了。最后唠叨一句：如果你的时间够充足的话，可以到本站导航上面的“资源下载”中下载淘宝店铺装修零基础教程专题讲解01_会用浏览器和熟悉后台-艺灵设计 视频，看里面具体案例应用。

2.熟悉店铺后台

说到装修店铺，不需要你把后台所有功能都吃透，但基本的一些功能必须要了解！群内有很多新手会问一些小儿科的问题，例如：店招下10px问题、全屏店招、二级页面全屏背景等等问题，（后面会一一讲到）其实这些问题都可以通过后台设置来解决。多么简单的事情，可在他们眼中却是难于登天。我在经过多次思考后总结出2点原因：
1.对后台不熟悉，80%的功能没有亲自测试使用过；
2.不看字！

上面列举的2点原因中第2点最为严重！基本上隔三差五的都会有这种新手来找我，归根结底还是不看字引起。下面来看一个6号的真实案例。我先来描述下问题吧。

2015.1.5号群内一网友在qq上面问我关于“淘宝店铺二级页面全屏背景”的问题。他当时发来一个链接，然后我把背景提取出来后发给了他。然后他可能不知道怎么操作，然后我又以之前的截图案例发给了他。其实我是知道他还会来找我的，结果真的又来了。啥也不多说，仔细看聊天记录，发现问题所在吧。有此类问题的需要注意，没有的话可以跳过看下面的内容了。图三：

类似这种的例子还有很多很多，艺灵就不一一列举了。下面我们来看下官方给出的淘宝C店专业版和基础版的区别，请看下图四：

如果想了解更多，可以点击淘宝官网地址：http://wangpu.taobao.com/wangpu/comparation.htm

下面我们到后台中看一看那些常用且常被忽视的地方。图五： 注意上面红框中的内容，“店招下10px问题”、“全屏店招背景”、“二级页面全屏背景”这些都可以在后台解决。当然，后台中还有其它的一些内容，这个就自己摸索吧。

下面一段内容于 2015.5.25号新增

唉，有些看官的店铺已经升级成了新版本，然后。。。。好多功能就不知道怎么改了，让我说什么好呢？！不就是个升级成新版本嘛，基础功能都还在的好不！如图：

功能自己再找吧。 (新增内容完毕)

另外再说两点经验。
经验一：代码需要放到新建的自定义页面测试，不要直接放到首页测试。
理由：如果你的店铺每日流量巨大的话，你这样直接在首页装修测试代码，用户进来时看到店铺零乱不堪，你觉得用户还有心情继续在你店铺看下去吗？
如何新建自定义页面？请看下图六： 
经验二：测试代码要发布不要预览。
理由一：自2014年4月中旬左右开始，预览页与发布页效果会不同。主要是由于某些原因（修改销量泛滥+需要修复漏洞的地方过多等其它原因），因此淘宝不得不加强了后台的过滤项以及修复bug漏洞。即使一些操作在后台保存时没有被过滤掉，但发布后系统会进行二次更深的过滤（尽管现在仍有修改权限，此处略去一万字漏洞说明）。所以最后展现给用户的是发布后的页面而不是预览页的内容。
理由二：预览页仅自己在当前页面可见，发布后大众可见！（很多新手在群内求助问题时发的链接80%都是预览页，你在逗我玩么？！）
发布按钮在哪儿？装修页面右上方，具体请看下图七： 

3.边框问题

3.1去图片边框

问题描述：在ie浏览器中，如果超链接内包含有图片。默认情况下，当鼠标滑过这个超链接时，图片会有一个深蓝色的边框。如图八： 

解决方案：将图片的border属性设置为0或none即可。

案例演示

<a href="链接自填" ><img src="图片地址" style="border:0"> </a>

3.2去热点轮廓(边框)

问题描述：默认情况下，图片上的热点在获取焦点时会显示热点的轮廓。不同浏览器下显示颜色均不同。如图九： 

解决方案：将热点的outline属性设置为0或none即可。

案例演示

<img src="图片地址" usemap="#Map" />
<map name="Map" id="Map">
　<area shape="rect" coords="14,23,71,57" href="#" style="outline:0" />
</map>

知识延伸：无论是图片还是热点还是其它标签有边框，都可以通过style="border:0;"或style="border:none;"来解决。

如果以上两种方法还不会操作的话，可以点击网站导航上面的“在线生成”，然后在右侧找到“清除图片空隙”，鼠标猛戳进去，在上面的文本框中输入自己的代码后点击右侧的“生成代码”即可在下方生成新代码，复制代码到店铺中即可。如图十： 

4.超链接问题

4.1去超链接下划线

问题描述：超链接的默认状态下会有下划线。如图十一： 

解决方案：将超链接的text-decoration属性设置为none即可。

案例演示

<a href="链接自填" style="text-decoration:none">艺灵设计</a>

4.2图片上任意地方添加超链接问题

通常情况下在一张图片上任意地方添加链接的话，大多新手都是用热点地图。除了用热点外，还可以使用透明超链接定位到图片上面。这种方法也是常常用到的，但真正会用并处理的很好的人并不多。因为正常情况下，绝对定位后内容为的超链接虽能在-webkit内核浏览器下可点击，但在ie浏览器中却失效。

问题描述：绝对定位后内容为空的超链接在ie中无法点击。如图十二： 

解决方案：给超链接设置background等相关属性即可。相关文章：ie中绝对定位后的bug。

案例演示

<a href="链接自填" class="调用官方绝对定位类名" style="position:absolute;left:auto;top:auto;display:inline-block;width:50px;height:20px;border:1px solid #f00;background:url(about:blank)"><!--此处内容为空--></a>

4.3淘宝天猫店铺锚点跳转失效

问题描述：无论是淘宝店铺还是天猫店铺，点击锚点链接后不会跳转，锚点失效。（同一模块内除外）

解决方案：放弃自定义锚点名，使用系统模块中的id即可。相关文章：淘宝店铺中锚点跳转失效问题。

淘宝天猫店铺锚点框架

<a href="A#id">这里是自己的内容</a>

代码框架说明：1.A可省略，表示页面网址。如果是在当前页面内做锚点，A可省略；如果是两个页面间做锚点，A为需要跳转到页面的网址。
2.黄色高亮id为模块id标识，可在页面中通过“审查元素”功能获取id，替换即可。详情请点击上方相关文章看具体应用案例讲解教程。

5.下边距问题

5.1店招下10px问题

说起这个店招下10px问题，首先搞清楚你的店铺是“天猫B店”还是“淘宝C店专业版”还是“淘宝C店基础版”。明白这一点至关重要！可是很多人都不管这个，听别人说店招上有个关闭10px的单选框就跑到后台去找，结果找了半天也没有找到。不是你没有找到，而是你的店铺根本就没有那项功能！至于这个关闭10px的单选框长什么样，具体的请往回看上面的图五。

问题描述：默认情况下，店招下面会有10px的空隙，如图十三： 

解决方案：如果店铺是天猫B店或者是淘宝C店专业版的话，可以从后台背景设置中选择关闭10px即可；如果是淘宝C店基础版的话，不用找了，后台中没有这个功能，只能用背景来掩饰，具体代码如下：

淘宝C店基础版

body{background-image:url(图片链接);background-position:50% 115px;background-repeat:repeat-x;}

代码说明：1.在ps中处理好图片，高度需要设置为160px。其中，150~160px这之间的10px内容为替补图案。
2.将图片上传到自己图片空间，然后替换掉图片链接即可。至于这段代码放哪里呢？当然是放店招里面了。如图十四： 相关文章：淘宝店铺模块间10px问题详解

5.2模块下10px/20px问题

问题描述：出于布局美观，淘宝将店铺模块统一设置了一定距离的下边距。如图十五： 

解决方案：绝对定位+负值。

CSS样式(壕级别)"

.ylsj-mt10{margin-top:-10px}//代码放到css入口中

相对而言，屌丝店铺都没有购买旺铺css，因此这个方法也就不行了，需要另找他法。这时，我们可以利用绝对定位+负值。

代码框架(屌丝级别)

<div style="height:(H-h)px;" >
　<div class="A" style="top:auto;">
　　<div class="A" style="top:-hpx">
　　　<!--自定义代码区-->
　　　<!--此代码可解决任意自定义模块下边距问题，中间最多可插入一个系统模块。需要注意的是：当店铺为淘宝C店基础版时，店招下的第一个模块无法清除此模块与店招之间间距，解决方法见5.1店招下10px问题-->
　　</div>
　</div>
</div>

代码说明：H：自定义内容的高度；h：模块下边距数值，当店铺为淘宝C店基础版时，h为20；当店铺为淘宝C店专业版或天猫B店时，h为10；A：可用绝对定位样式。例如：淘宝C店使用footer-more-trigger等，天猫B店使用sn-simple-logo等。使用时记得修改系统属性。（建议尝试理解原理，后面全屏框架会继续使用此框架）如不会修改代码，可使用本站的相关软件“清除淘宝店铺模块下边距工具 ”免费在线生成即可。

5.3查看下边距具体值(2015年3月8号临时更新此条)

就在刚才，又有一个小伙伴进群求助这个下边距的问题了。虽然我的软件里面已经设置了此功能，但看似事情比想像的复杂。为什么呢？因为同是专业版，这个下边距还有两个不同的版本！什么？不会吧！我们还是用图来说话吧。不明觉厉的看官可以按照本文开篇目录1中的方法跟着艺灵一起来操作看个究竟。

有店铺的可以直接进入自己店铺首页，没店铺的可在淘宝中随便点一款产品然后进入店铺。进入后我们把鼠标放到导航下面的任意一张图片上(实际上是任意一个自定义模块上)开始操作。1.图片上右键--2.审查元素--3.向上查找父级skin-box tb-module tshop-pbsm tshop-pbsm-shop-self-defined--4.看右侧显示的样式值。完整操作如下图：

上图是两个专业版店铺的对比图，从图中右侧可以看出一个是margin-bottom: 20px;一个是margin-bottom: 10px;，所以呢，在套代码时有必要看看自己店铺的下边距到底是多少哈。

6.显示已隐藏的模块/店招

6.1显示已隐藏的店招

问题描述：部分新手复制别人的代码或者自己脑洞大开写了一个display:none放入店招或模块中，结果发布后再回到后台装修时发现店招不见了......

解决方案：其实方案有两种，但大多数新手一种都不知道......
方案一：后台备份中复原（新手推荐）。步骤：进入后台→鼠标放到装修上右键→点击模板管理→左侧点击我备份的模板→选择店招被玩坏前的一次备份→鼠标左键单击→应用备份即可。如果看不懂文字，那么我再来上一张教程图，如图十六： 方案二：后台审查元素中复原。这种方法苦逼了很多新手，早在文章开篇我就说了要学会浏览器的审查元素功能，某些新手偏不听。现在需要用到审查功能了，跟不上了吧。简单来说，在审查元素下，修改模块高度即可复原。如图十七： 相关文章显示已隐藏的店招

6.2显示已隐藏的自定义模块

问题描述：除了上面6.1的方法隐藏掉店招和模块外，还有一些其它方法隐藏掉模块。例如：自定义模块不设置高度、修改源码后提交导致模块异常等。

解决方案：同6.1的解决方案。

7.全屏问题

7.1全屏店招

默认情况下，店铺中的店招最大宽度是950px/990px。其中淘宝C店是950px，天猫B店在去年已调整成990px。但如果从“店铺动态评分”中进入店铺，店招宽度还是只有950px的哦，这个应该属于淘宝更新样式不到位引起。如图十八： 

问题描述：由于店铺强制限制了店招的宽度，因此无法突破950px/990px布局实现全屏。

解决方案：背景设置/开通旺铺css修改系统样式/设计师模板/模块漏洞......

其中，背景设置适用于大众，学会这一招已经足够了。还是来看看这招如何使用吧。
方案一：页头背景（推荐）。步骤：进入后台→鼠标放到装修上右键→点击样式管理→左侧点击背景设置→点击右侧的更换图片→上传图片→保存即可。此文字的配套图已在图五中列出，此处就不重复了。
方案二：body背景。代码如下：

body背景

body{background-image:url(图片链接);background-position:50% 115px;background-repeat:repeat-x;}

此代码的配套截图在5.1中已列出，忘记的请回滚到相关内容区。
方案三：修改系统属性，适用于已开通旺铺CSS的天猫店铺的壕级别卖家。代码如下：

修改系统样式

.tshop-pbsm-shop-custom-banner{overflow:visible;}//天猫店铺暂未过滤。原理：修改相关父级属性成position:static或overflow:visible;均可

将以上代码放到店铺的css入口中保存即可实现正宗的全屏店招，因为宽度已突破990px限制。相关文章：天猫店铺与c店导航突破宽度限制
方案四：购买设计师模板。说明一下，不是所有的设计师模板都能突破950px/990px宽度。当然了，少数设计师模板中自带css入口，这种牛b模板不买实现是对不起射鸡师！！！
方案五：模块漏洞。后台中修改数据达到添加牛b模块的效果。相关文章：淘宝bug之设计师权限完爆旺铺CSS，曝淘宝网往期改销量多处漏洞
方案六：其它漏洞。(暂不公开)

7.2全屏店招1px白边

问题描述：当显示器的分辨率为1920*xxx时，店招会有1px白边。如图：

解决方案：全屏背景中的空白区域宽度小于店招宽度即可。举个栗子：店招区宽度为950，则全屏背景中的空白区为949即可。

1px真相：简单点来讲就是#hd的宽度不等于全屏背景的宽度。

什么？不等于？

对，你没有听错，二者在大多数情况下都是不等于的。如果你想知道事情的真相，就得使用文章开头讲的审查元素。

审查元素状态下我们可以发现这个#hd没有设置宽度，学过div的都知道，一个块对象在不设置宽度时默认是自动宽度，也可以理解为宽度自适应浏览器。这样一来，这个#hd就不等于1920px了，但是由于背景设置的是水平居中，所以在小于1920px的屏幕下，两者还是完全吻合的，不存在1px白边问题。

但为什么在1920px像素下就会有白边呢？难道分辨率中的1920px不等于图片的1920px吗？严格来讲答案是：浏览器的1920px不等于图片的1920px！不要忘记了浏览器滚动条这个可有可无的条件。当电脑设置了1920分辨率后，浏览器右侧无滚动条时的宽度才是1920px；而淘宝店铺中这一条件却极少出现，因为首页只有一屏的店铺肯定不是卖产品的，多为无人打理或实验店铺。

7.3全屏代码框架

现在讲究的都是高端大气上档次，至于如何才能达到老板心中想要的大气效果呢？那你就让它足够大，足够突出，足够吸引眼球不就完了。可是，问题来了......

问题描述：默认情况下，自定义模块内容宽度最大为190px/750px/990px，无法实现正宗的全屏。

解决方案：使用全屏框架/开通旺铺css修改系统样式/设计师模板/模块漏洞......　相关文章：纯css实现超宽图片全屏居中（兼容淘宝店铺）

正宗全屏代码框架

<div style="height:(H-h)px;" data-title="全屏代码框架" >
　<div class="A" style="position:absolute;top:auto;left:0;margin-left:50%;width:auto;border:0;padding:0;background-color:transparent;">
　　<div class="A" style="position:absolute;top:-hpx;left:-960px;width:auto;height:Hpx;border:0;padding:0;background-color:transparent;">
　　　<div style="width:1920px;margin:0" >
　　　　<!--自定义代码区-->
　　　　<!--此代码可解决任意自定义模块下边距问题，中间最多可插入一个系统模块。需要注意的是：当店铺为淘宝C店基础版时，店招下的第一个模块无法清除此模块与店招之间间距，解决方法见5.1店招下10px问题-->
　　　</div>
　　</div>
　</div>
</div>

代码说明：H：自定义内容的高度；h：模块下边距数值，当店铺为淘宝C店基础版时，h为20；当店铺为淘宝C店专业版或天猫B店时，h为10；A：可用绝对定位样式。例如：淘宝C店使用footer-more-trigger等，天猫B店使用sn-simple-logo等。（使用时记得修改系统属性）

适用范围：此全屏框架代码仅适用于淘宝C店专业版首页、天猫B店首页、天猫B店自定义页面，淘宝二级页面不支持，淘宝C店基础版首页需要做修改。如果不会修改代码，可以使用网站中的相关软件“万能全屏代码框架生成器”免费生成即可。

7.4自定义页面全屏

问题描述：天猫自定义页面可以使用全屏代码框架来实现全屏，但淘宝C店却不行。

解决方案：页面背景设置/开通旺铺css修改系统样式/淘宝bug漏洞......

方案一：页面背景设置。这种方案是最简洁有效的了，只需要从后台上传背景图即可。虽操作简单，但却有限制啊！图片不能大于200kb，所以要控制背景图了，不要太花。色彩越多，最后保存时就越大。
方案二：修改系统样式。适用于已开通旺铺CSS的壕级别商家。代码如下：

修改自定义页面系统样式

div{overflow:visible;}　//①
*{overflow:visible;}　　//②　

代码说明：①和②都能实现最终效果。其实原理很简单，跟前面的7.1全屏店招一样，都是通过修改系统属性。严格来说，这里应该修改的样式为：#bd{overflow:visible;}，但是由于后台写不了id的，所以只能这样泛指。此代码有一个缺点：即页面会显示水平滚动条，原因你懂滴。

方案三：当下最新漏洞达到任意页面全屏，并且支持自定义css的哦！本站导航上面的“在线生成”中已经制作有成品，壕可以前来感受下效果。

7.5天猫B店页尾全屏且无水平滚动条

问题描述：虽能你们的天猫B店页尾能全屏，但却有一个致命点！那就是→水平滚动条，十分不美观。如图十九： 

解决方案：更换全屏代码。

天猫B店页尾全屏

<div style="height:Hpx;" data-title="天猫B店页尾全屏">
 
　<div class="sn-simple-logo" style="left:0;top:auto;width:100%;Hpx;background:url(图片链接) 50% 0px no-repeat;" >　</div>
 
</div>

代码说明：替换掉图片链接即可，放入天猫店铺后不会有水平滚动条出现。如果不会修改代码的话，可以使用本站的相关软件“全屏海报+多链接”免费在线生成即可。生成教程如图二十： 

7.6淘宝C店页尾全屏

问题描述：正常情况下，C店的页尾只有950px，即使里面添加了全屏代码也是无法全屏的。

解决方案：不要页尾，bd中最下面一个模块当作页尾同时配合7.3中的全屏代码框架即可。来看一张效果图，图二十一： 

7.7淘宝C店详情页百变全屏背景

问题描述：正常情况下，详情页主区1140以外内容均为白色，不好看。如图二十二： 

解决方案：使用下面专用代码。相关文章：C店详情页百变全屏背景固定

C店详情页百变全屏背景

 
<div style="height:0px;" data-title="C店详情页百变全屏背景">
 
　<div class="footer-more-trigger most-footer " style="position:absolute;left:-485px;top:-730px;margin-left:50%;width:auto;border:0px;padding:0px;height:100000px;background-color:transparent;">
 
　　<div style="width:1920px;height:100%;margin:0px auto;background:url(背景图片链接) 50% 0px repeat-y fixed;" >　</div>
 
　</div>
 
</div>

代码说明：替换掉图片链接即可，放入淘宝店铺左侧第一个自定义模块中即可。不同的产品可在后台新建不同的宝贝详情页，勾选相对应宝贝即可实现百变效果。来看下效果截图，如图二十三： 如果不会修改代码的话，可以使用本站的相关软件“全屏海报+多链接”免费在线生成即可。教程图请参见图十九。

C店详情页百变全屏固定背景(2015.4.2号更新)

<div class="www-yilingsj-com-zxsc" style="height:0px;" data-title="【C店详情页百变全屏背景固定】">
<div class="footer-more-trigger most-footer cloud-footer" style=" position:absolute;top:0;border:0px;padding:0px;left:0;height:100000px;display:block;width:0;background:transparent;overflow:visible;z-index:1;">
<div class="footer-more-trigger most-footer cloud-footer" style="margin:0px auto;width:390px;height:100%;background:url(http://img04.taobaocdn.com/imgextra/i4/759415648/TB2qGVmapXXXXbAXXXXXXXXXXXX_!!759415648.png) repeat-y 50% 0px fixed;left:-390px;background-color:transparent;overflow:visible;display:block;border:0;padding:0;z-index:1;" data-title="左侧" >		</div>
<div class="footer-more-trigger most-footer cloud-footer" style="margin:0px auto;width:390px;height:100%;background:url(http://img04.taobaocdn.com/imgextra/i4/759415648/TB2qGVmapXXXXbAXXXXXXXXXXXX_!!759415648.png) repeat-y 50% 0px fixed;left:1140px;background-color:transparent;overflow:visible;display:block;border:0;padding:0;z-index:1;" data-title="右侧">		</div>
</div>
</div>

上面的这个代码是最新版，之前的在详情页会被屏蔽成【-_-】并且会遮挡系统的推荐内容，更新的代码已经解决了上面2个问题，可放心使用了。

7.8全屏固定背景

问题描述：通常情况下，从后台设置的背景虽能全屏但无法固定不动，并且页尾最下面会有背景，十分不协调、不好看。如图二十四： 

解决方案：添加fixed属性。

全屏固定背景

<div style="height:0">
　<div class="A" style="position:absolute;margin-left:50%;left:0;top:auto;width:auto;height:0;border:0;padding:0;background-color:transparent">
　　<div class="A" style="position:absolute;left:-960px;top:-hpx;height:99999px;width:1920px;border:0;padding:0;background:url(背景图片链接) repeat-y center 0 fixed;background-color:transparent">
　　</div>
　</div>
</div>

代码说明：代码中的黄色高亮部分需要根据不同店铺进行修改，参数值请对照7.3中的代码说明。背景链接需要替换掉，一切修改完毕后，在需要做全屏背景的那个页面最上面新建一个自定义内容区,粘贴内容，保存发布即可。此时我们再来看下页尾下面吧，如图二十五： 怎么样，恢复了默认的白色，比先前的要好看吧。

这里需要注意一下，如果店铺使用的是设计师模板，可能出现部分店铺使用全屏代码失效的情况，原因是：设计师写的css对模板做了限制。

7.9视差滚动特效

类似7.8的代码，添加多个固定背景即可实现。建议使用相关软件“视差滚动特效”生成，比较快捷方便。

8.自定义搜索框

问题描述：很多人想给自己店铺的导航上面添加一个自定义搜索框，如图二十六： 但是却不会写代码。其实代码很简单，代码如下：

自定义搜索框

<div class="A" style="position:absolute;left:766px;right:0px;border:0px;padding:0px;top:111px;width:140px;height:23px;line-height:23px;z-index:97;background:url(搜索框背景图链接) 0 0 no-repeat;background-color:transparent" data-title="淘宝店内搜索框">
　<form action="店铺首页链接/search.htm" method="post" name="SearchForm" target="_self" >
　　<input type="text" name="keyword" class="ylsj-s-text" style="float:left;position:relative;width:105px;height:23px;line-height:23px;color:#FFF;border:0;background-color:transparent;outline:none;text-indent:3px;">
　　<input type="submit" value="搜索" class="ylsj-s-but" style="float:left;position:relative;cursor:pointer;width:35px;height:23px;line-height:23px;font-size:0;border:0;background-color:transparent;outline:none;">
　</form>
</div>

代码说明：黄色高亮的A在前面已提及过，此处略。注意上面代码中的高亮文字部分，如果不会修改的话，可以使用全站的相关软件“店内搜索框”在线免费生成即可。

9.关注代码

9.1关注代码带数字

天猫关注(带数字)

<div data-title="天猫关注(带数字)">
　<a class="follow-btn j_CollectBrand" data-brandid="id" href="#" ><span>关注</span></a>
　<em class="j_CollectBrandNum" data-brandid="id">0</em>
</div>

9.2关注代码可取消

天猫关注(数字时时更新且可取消关注)

<div data-title="天猫关注(数字时时更新且可取消关注)">
　<em class="j_CollectBrandNum" data-brandid="id">0</em>人 关注</p>
　<a class="ui-brand-btn j_CollectBrand" data-brandid="id" ><span>已关注</span></a>
</div>

代码说明：两种代码中的红色高亮部分均表示店铺的关注id，注意此关注仅适用于天猫旗舰店，相关文章：2种版本的天猫关注且数字同步变化代码

10.您不能使用他人图片空间中的图片

问题描述：当店铺中有他人图片空间中的图片链接时，正常情况下是无法保存并且会有系统提示的。如图二十七： 

解决方案：data-ks-lazyload/上传自己空间。 相关文章：2种方法解决淘宝店铺中提示不能使用他人图片的问题

10.1延迟加载技术data-ks-lazyload

data-ks-lazyload

<img data-ks-lazyload="他人图片空间中的图片地址">

10.2上传自己空间

11.收藏代码

11.1店铺收藏代码

问题描述：有些人想给图片上添加一个店铺收藏代码，目的是提高店铺收藏率。由于不会写代码，所以，苦逼了。

解决方案：具体如图二十八： 

11.2单个宝贝收藏代码

问题描述：除了上面的店铺收藏外，还有人想制作单个宝贝的收藏代码。

单个宝贝收藏代码框架

<a href="http://favorite.taobao.com/popup/add_collection.htm?id=A&itemtype=1"><img src="图片链接" style="border:0;vertical-align:top;"></a>

代码说明：此处的黄色高亮A表示宝贝id号。相关文章：制作天猫淘宝店铺中单个宝贝收藏代码

12.加入购物车代码

问题描述：有些人看到别人店铺中有加入购物车功能，对用户体验度比较友好，于是想给自己店铺也添加此功能但却不知道代码......

解决方案：给超链接添加J_CartPluginTrigger样式即可。

加入购物车代码框架

<a class="J_CartPluginTrigger" href="宝贝链接"><!--自定义内容--> </a>

最终效果图如图二十九：相关文章：制作淘宝天猫店铺中自定义购物车代码，也可使用全站的相关软件生成代码。

13.分享代码

分享组件框架

<div data-sharebtn='{
type:"",//必填，选择分享的类型，可选项item(商品),shop(店铺),webpage(自定义)
key:"",//必填，type为item时key填itemid，type为shop时填shopid，type为webpage时填希望用户点回的链接
title:"",//type为webpage时必填，表示页面标题，type为item/shop时可以不填
comment:"",//默认文案
pic:"",//分享带的图片，不填写则取商品图片/店铺logo
client_id:68,//不可修改，保持默认即可
skinType:1,//按钮样式：1为默认样式、2为纯文字、3为自定义样式
isShowFriend:false//是否默认展开好友树，默认false
}' class="sns-widget">
<!--将代码复制到dw中，修改完参数后再清除掉所有注释（//后面为注释内容），代码间不要有换行，否则不会有效果！-->
</div>

效果图如图三十：相关文章：制作淘宝天猫店铺中宝贝分享代码

14.喜欢代码

喜欢组件框架

<div data-like='{
type:2,//必填，选择喜欢的类型，2（商品），3（网页），4（店铺）
key:"",//必填，type为2时key填itemid，type为3时填网页链接地址，type为4时填shopid，长度不允许超过60个字符
skinType:1,//样式类型：1为橙色，2为蓝色
text:"喜欢"//默认文字
}' class="sns-widget">
喜欢<!--将代码复制到dw中，修改完参数后再清除掉所有注释（//后面为注释内容），代码间不要有换行，否则不会有效果！-->
</div>

效果图如图三十一：相关文章：制作淘宝天猫店铺中宝贝喜欢赞代码

15.店铺留言板代码

淘宝店铺留言版代码框架（精简版）

<div class="sns-widget" data-comment='{"isAutoHeight":false, "param":{"target_key":"112837831","type_id":"1100035","rec_user_id":"759415648","view":"detail_list","title":"艺灵设计留言版块", "moreurl":"http://shop112837831.taobao.com/" },"paramList":{"view":"list_trunPage"}}' style="width:100%;height:70%;overflow-y:auto;" data-title="艺灵留言版块"></div>

相关文章：淘宝店铺留言板制作教程

16.滤镜代码失效问题

问题描述：在做css3鼠标滑过遮罩特效时，遮罩层通常为半透明背景色。虽然代码在-webkit浏览器下正常，但在ie下却失效。

解决方案：不要使用简写filter:alpha(opacity=xx)而使用完整写法。

ie滤镜完整写法

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=?)

代码说明：将上面代码中黄色高亮的?替换成整数即可，数值范围是0~100。相关文章：淘宝店中滤镜失效问题

17.Widget规范

轮播特效、弹出层特效、倒计时特效、手风琴特效等一系列js特效全在这个里面，链接地址：http://open.taobao.com/doc/detail.htm?id=102084。
相关文章：淘宝Widget库中弹出层特效的深入讲解
淘宝Widget库中轮播特效从入门到精通

18.图片空隙问题(以下内容为2015.2.28号新增)

18.1垂直方向上有空隙

问题描述：图片与图片间有空隙，具体应用场合：table做的导航、宝贝详情中的图片，如图： 

解决方案：使用vertical-align:top;、float:left;都可以。

CSS样式(壕级别)

img{vertical-align:top;}//代码放到css入口中

当然了，毕竟大多数人都不是壕，也不会最新的破解之术，只能使用最原始老套的方法了。给所有的img标签都添加行内样式：style="vertical-align:top;"。

个人不建议使用浮动来解决这个问题，因为使用浮动的话需要清除浮动。相关软件参见上图十。

18.2水平方向上有空隙

问题描述：如图： 

解决方案：代码保持紧凑，去除掉img之间的空格或换行br代码。

18.3table中的图片在垂直方向上有空隙(京东)

解决方案:除了添加18.1中的代码外，将table中的height属性去掉，让其自适应。

京东店铺中出现这一现象的原因与延迟加载技术有关。去掉table的高度可以有效防止td平分当前窗口的高度。

19.倒计时特效失效问题

问题描述：调用官方的Countdown组件后在店铺中失效。

解决方案一：检查结束时间endTime的值是否已过期或格式有误；解决方案二：让每个span中的值不为空。

20.代码过滤问题

问题描述：店铺中写的一些代码在保存后神奇的消失了，其实是被系统过滤掉了！下面列举一些常见且不被重视的例子吧。

20.1css样式过滤

CSS入口

margin;//4个方位的负值全被过滤(入口中取值会被保留)
position;//仅值为fixed;absolute时被过滤(入口中的absolute会被保留)
z-index;//取值范围[0,99]，超过99的只显示最大值
!important;//过滤
css2选择符;//仅保留:hover伪类
css3属性;//css3中动画等高级属性全被过滤，仅保留简单的transition(过渡)和transform(2D变换)
省略n万字......

行内样式

margin;//4个方位的负值全被过滤
position;//仅值为fixed;absolute时被过滤
z-index;//取值范围[0,99]，超过99的只显示最大值(仅店铺后台会被保留)
!important;//过滤，(仅店铺后台会被保留)
省略n万字......

20.2html标签过滤

内联元素(2014年3月份开始?)

span;//内容为空时被过滤
em;//内容为空时被过滤
a;//内容为空时被过滤(添加一个样式即可解决问题)
省略n万字......

解决方案：给内联元素添加内容，如空格等字符。如有必要可通过设置font-size:0;text-indent:-9999px;等属性隐藏文本内容。现在你该知道19中的倒计时失效的原因了吧。

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/code/2015-01-21/246.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。