教你轻松学会做天猫店铺全屏海报+全屏轮播海报
全屏海报效果如图 全屏轮播海报效果如图 咋们想先用PS设计好图片，好进入下一步骤海报图片海报轮播图片海报张左右箭头图片30*60各一张图片大小根据自己需求设置。 全屏海报代码：按小编注释的修改一下就可以用了。&div style=&height:600&& &div class=&sn-simple-logo& style=&left:50%;top:border:padding:0;&& &div class=&sn-simple-logo& style=&left:-960top:border:padding:0;&& &a href=&/*跳转链接*/& target=&_blank& style=&width:1920height:120display:&&&img src=&/*图片链接*/& width=&1920px& /*图片宽度*/height=&600px& /*图片高度*/border=&0& /&&/a& &/div& &/div&&/div& 全屏轮播代码：按小编注释的修改一下就可以用了。&div class=&J_TWidget& data-widget-config=&{&contentCls&:&taobaoux&}& data-widget-type=&Tabs& style=&height:600overflow:&& &div class=&taobaoux& style=&height:600&& &div class=&footer-more-trigger sn-simple-logo& style=&width:1920height:600top:padding:0border:left:50%;&& &div class=&footer-more-trigger sn-simple-logo& style=&width:1920height:600padding:0border:left:-50%;top:0;&& &div data-widget-config=&{&contentCls&: &taobaoux-com&,&navCls&: &bbs-taobaoux-com&,&effect&: &scrollx&,&easing&: &easeBothStrong&,&prevBtnCls&:&prev&,&nextBtnCls&:&next&,&autoplay&: true,&duration&:1,&interval&:4,&viewSize&:[1920],&circular&: true}& data-widget-type=&Carousel& class=&J_TWidget&& &div class=&J_TWidget& data-widget-config=&{&trigger&:&.uxux&,&align&:{&node&:&.uxux&,&offset&:[-500,0],&points&:[&cc&,&cc&]}}& data-widget-type=&Popup& style=&display:&& &div class=&prev& style=&cursor:&& &img src=&/*左箭头图片*/& width=&30& /& &/div& &/div& &div class=&J_TWidget& data-widget-config=&{&trigger&:&.uxux&,&align&:{&node&:&.uxux&,&offset&:[500,0],&points&:[&cc&,&cc&]}}& data-widget-type=&Popup& style=&display:&& &div class=&next& style=&cursor:&& &img src=&/*右箭头图片*/& width=&30& /& &/div& &/div& &div style=&height:600width:1920overflow:padding:0margin:0& class=&uxux&& &ul class=&taobaoux-com& style=&height:600width:1920padding:0margin:0&& &li style=&width:1920height:600padding:0margin:0&& &a target=&_blank& href=&/*海报1跳转地址*/&style=&padding:0margin:0&& &img src=&/*海报1网址*/& width=&1920px&/*宽度*/ height=&600px& /*高度*/border=&0px& /&&/a& &/li& &li style=&width:1920height:600padding:0margin:0&& &a target=&_blank& href=&/*海报2跳转地址*/&style=&padding:0margin:0&& &img src=&/*海报2网址*/& width=&1920px& height=&600px& border=&0px& /&&/a& &/li& &/ul& &/div& &div class=&footer-more-trigger sn-simple-logo& style=&width:1920height:50padding:0border:z-index:99;left:50%;&& &div class=&footer-more-trigger sn-simple-logo& style=&width:1920height:50padding:0border:left:-50%;top:555&& &ul class=&bbs-taobaoux-com& style=&width:950height:50margin:0text-align:&& &li style=&display:margin:0 5cursor:line-height:50&& &/li& &/ul& &/div& &/div& &/div& &/div& &/div& &/div& &ul class=&ks-switchable-nav& style=&display:&& &/ul&&/div& 天猫全屏轮播优化代码：按小编上面注释的修改一下就可以用了。&div class=&JiuLing& data-title=&& data-time=&& style=&height:600&&&div class=&sn-simple-logo& style=&left:right:width:990height:600top:padding:0;border:z-index:1;background: &&&div class=&sn-simple-logo& style=&left:-465top:0height:600width:1920border:padding:0;background: &&&div data-widget-config=&{ 'contentCls': 'macontent','navCls': 'ma_na','duration':1,'interval':4,'autoplay':true,'triggerType':'click','circular':true,'effect': 'scrollx','easing': 'easeOutStrong','prevBtnCls':'Mprev','nextBtnCls':'Mnext','autoplay': true,'viewSize':[1920],'activeTriggerCls': 'hidden' }& data-widget-type=&Carousel& class=&J_TWidget&&&div class=&J_TWidget Mprev& data-widget-config=&{ 'trigger':'.AB','align':{ 'node':'.AB','offset':[-510,0],'points':['cc','cc'] } }& data-widget-type=&Popup& style=&display:&&&div class=&Mprev& style=&font-size:100cursor:&&&img src=&&&&/div&&/div&&div class=&J_TWidget Mnext& data-widget-config=&{ 'trigger':'.AB','align':{ 'node':'.AB','offset':[510,0],'points':['cc','cc'] } }& data-widget-type=&Popup& style=&display:&&&div class=&Mnext& style=&font-size:100cursor:&&&img src=&&&&/div&&/div&&div class=&AB& style=&height:600width:1920overflow:padding:0margin:0border:0;background:&&&ul class=&macontent& style=&height:600width:1920padding:0margin:0&&&li class=&item&&&a target=&_blank& href=&&&&img src=&https://gdp.alicdn.com/imgextra/i1//TB2cny8aznyQeBjSszbXXbCxVXa_!!.jpg&&&/a&&/li&&li class=&item&&&a target=&_blank& href=&&&&img src=&https://gdp.alicdn.com/imgextra/i4//TB2vM00XFHzQeBjSZFuXXanUpXa_!!.jpg&&&/a&&/li&&/ul&&/div&&div class=&sn-simple-logo& style=&width:1920height:45left:top:bottom:0;padding:0border:background: display:&&&div class=&sn-simple-logo& style=&z-index: 99;width:1920height:45padding:0border:left:top:background:&&&ul class=&ma_na& style=&width:1920height:45margin:0text-align:border:color:#&&&li class=&hidden& style=&display:background:margin:0 5cursor:padding-top:10line-height:1.4;font-size:27&&●&/li&&li style=&display:background:margin:0 5cursor:padding-top:10line-height:1.4;font-size:27&&●&/li&&/ul&&/div&&div class=&sn-simple-logo& style=&z-index: 98;width:1920height:45padding:0border:left:top:background:background:&&&ul class=&ma_nb& style=&width:1920height:45margin:0text-align:border:color:#333333;&&&li style=&display:background:margin:0 5cursor:padding-top:10line-height:1.4;font-size:27&&●&/li&&li style=&display:background:margin:0 5cursor:padding-top:10line-height:1.4;font-size:27&&●&/li&&/ul&&/div&&/div&&/div&&/div&&/div&&/div&
进入天猫后台店铺装修 模块-自定义区，建立新自定义模块 编辑-点源码，把修改后的代码复制到编辑区并按确认就好了。
哪里可以购买 iPhone8？哪里价格又是最低？
关注公众号回复“苹果”，获取购买详情。
微信上搜索“南窗数码”，或扫描下方的二维码
“海报全屏”相关经验
海报全屏最新经验第4讲 详情页制作技巧及注意事项（下）
第4讲 详情页制作技巧及注意事项（下）
还可以输入200个字符
Copyright &
ibodao.com All Rights Reserved | 北京博导前程信息技术股份有限公司
京ICP备号-9
北京市海淀区上地东路35号颐泉汇大厦2号楼505室 | 010-
- IOS / Android -当前位置：>>>
很多刚开店的小卖家，看到别人家的店招是全屏的（）也就是占了整个屏目；
设计后的店招（宽度），手把手教你制作的全屏店招设计（淘宝专业版旺铺）；
有人说，这个是要买模板的吧，这根本不需要什么模板，又有人说要用什么代码吧，其实也不用什么代码，想知道怎么做的同学来跟我学习吧！
织梦好，好织梦
第一步：想做全屏店招，我们必须先了解下全屏店招的构成 如下图
我们店铺的店招其实只有中间950的区域，想做到全屏就要加一个的页头背景图 ， dedecms.com
放在红色的950的后面（也就是黑色的部份），如果我们把黑色部份换成红色，就是全屏了！
织梦好，好织梦
第二步，了解清楚了结构后，我们来开始做中间950的区域 （店招的高度是120PX）
新建一个的文件 dedecms.com
内容来自dedecms
我们要知道中间950的区域在哪里，所以画了一个950宽的选区 和大背景居中 如下图
本文来自织梦
绿色的图层可以删掉了，辅助线有了，就知道了950的区域了，记住不要移动辅助线了 dedecms.com
& &我们把重要内容设计在950的里面
说的好累 喝点水
第三步：给背景做一个渐变，这个过程大家可以自由发挥了，做出自己的个性
本文来自织梦
设计的过程 在这里就不详情说明了 如下图
这里要注意 一个完整的店招里有哪些东西（标志 口号 店名 产品 收藏等功能按钮）当然不是所有东西
必须全有，但最少店名是有的，还要让人看明白你是卖什么的！由于时间有限，这里就不详细展开来讲了
第四步:接下来，我要把中间950的部份裁切出来 进行切片 本文来自织梦
裁切的时候 一定要紧随辅助线来 ，不然裁切出来的可能不是950的宽了
copyright dedecms
用辅助线把这张图分成了3份，中间的收藏本店要做相关的连接，要单独切成一块了
切了。。。。很简单的哟
切然后 怎么保存 这一步很重要&
&& 织梦内容管理系统
保完后，我们来看下切好的图片
copyright dedecms
第五步，把切好的图片 上传到图片空间
织梦内容管理系统
第六步：这时候 我要利用DW软件了把图片转换成代码
内容来自dedecms
我们 这店招的每一块图片选中 换成图片空间里的地址（现在的图片是我们本地的）
记住这张图切成了三块，所以每一块都要换哟 切记 ，切记
淘宝图片空间的图片地地怎么获取？看图 织梦内容管理系统
把地址粘贴到这里哟
所有图片的地址全换了& 织梦好，好织梦
第六步：我们把&body&&&&/body&之间的代码全复制出来 粘贴到店招的自定义里
回到店铺装修中
选自定义，切记得要点源码哟
copyright dedecms
代码全复制进去了，哈哈，比有些人一张一张图的拆插入要快吧，一张一张拆插入会乱
然后再点源码&&查看下效果了
恩，不错是我们要的效果
第八步：给收藏按钮做连接了哟，不然只是一张没用的图片 本文来自织梦
收藏本店的连接怎么找呢，大家看清楚了哟
在收藏店铺上点右键 看到属性&&就打开哟
红色标记的就是收藏本店的连接地址了 全部复制哟&
内容来自dedecms
这里放收藏的连接哟&
做好 点确定&
内容来自dedecms
做好了 一定要记得保存哟!------
接下来就是要发布了 ，很多人 把这一步忘记了 结果是忙了半天 白做了!
辛苦了半天 好激动哟 看下效果吧
结果 没有全屏 哎 。。。。。 继续哟，快了 ，我们加一个页头背景就行。
点下收藏按钮 是OK的哟，如果没用 一定是收藏的地址错了 或复制的时候漏掉了一些。 织梦内容管理系统
第九步：加页头背景 实现全屏
内容来自dedecms
图片 限在200K内
不平铺 居中&&最后保存 不要忘记了 还要发布哟
看看我搞了一早上的战果哟 ~~~~~
成功 全屏 不花一毛钱 ！看完大家努力顶哟！ 内容来自dedecms
另一种全屏店招设计方法：~~
&&首先进入店铺装修页面，选择页头上的装修下拉栏里的样式管理，点击左边栏的样式编辑里的背景设置，这里一般默认为页头设置，（当然你也可能设置页面的背景颜色，改变整个页面的背景颜色）在页头设置里面有两个设置，分为页头背景色设置和页头背景图设置。
如果你做的招牌图片是纯色背景就选背景色设置，然后单击颜色框，弹出调色器，然后选择你所需要的颜色，在这里如果背景图设置那栏里有图片显示的话就要把它删除，不然它会覆盖在你设置的纯色背景上，然后保存，设置完成。如果做的招牌图片是背景图片就选背景图设置，上传你做的招牌背景图片，然后保存，设置完成。 本文来自织梦
文章关键词：
本网站素材资源仅供个人学习与参考，请勿用于商业用途，后果由使用者自己承担！！！
大家都在查看
这些是最新的现在位置： &
& 疯狂的美工导航下拉菜单代码生成器使用教程（不仅仅是可以使用在店招上哦）
疯狂的美工导航下拉菜单代码生成器使用教程（不仅仅是可以使用在店招上哦）
数据加载中...
如果是店招上用，天猫尺寸是990x150px C店是950x150px，1920背景单独做，传到后台样式管理——背景设置——页头背景那里
代码生成顺序：先生成菜单部分代码 再生成弹出区域的代码 顺序千万不能错 还有同一个模块不能多次生成，因为每次生成的代码ID都是不一样的！同时注意复制弹出部分代码按钮复制的代码装在店招海报下方，不能装在店招下第一个模块哦
此功能比较复杂建议操作前保存一份原始未编辑的代码）
温馨提示：导航下拉功能天猫要发布才有效果，预览没有效果
教程补充：其他页面安装下拉方法请看以下教程
猜你想看：
疯狂的美工手机客户端
手机看教程,学经验,看新闻
管理疯狂美工账号
请使用QQ扫一扫
阿里巴巴装修助手代码工具
疯狂的美工京东装修助手
常见问题/技术分享
微信扫一扫关注
疯狂的美工会员QQ群
会员1群(满):
会员2群(满):
会员3群(满):
会员4群(满):
会员5群(满):
会员6群(满):
会员7群(满):
会员8群(满):
会员9群(满):
会员10群(满):
会员11群(满):
会员12群(闲):
分享本页到
如果觉得我们软件不错您可以：
／产品相关
锋狂网络科技有限公司旗下
版权所有 Copyright(C)2013 - 2018
浙ICP备号-3淘宝天猫店铺装修问题与技巧性经验汇总
作者:艺灵设计 | 来源:http://www.yilingsj.com | 时间: 14:14:52 | 评:4 | 阅:6559 | 积分:0
站长于号开始接触淘宝，由于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查看下边距具体值(号临时更新此条)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.图片空隙问题(号新增)　18.1垂直方向上有空隙　18.2水平方向上有空隙　18.3table中的图片在垂直方向上有空隙(京东)19.倒计时特效失效问题20.代码过滤问题　20.1css样式过滤　20.2html标签过滤
1.会用浏览器
如果你想装修店铺，而又不会使用浏览器的“审查元素”功能，一遇到问题就开始挠头的话，即使你把头皮挠破，问题还是解决不了！因为你根本就没有找对方法！
有人开始不服了，某人说：“我本身就不是个淘宝美工，我用审查元素功能有个屁用啊！”
我要说：“你不做美工可以，有本事你别使用电脑浏览网页啊！”
······
只要你浏览网页，你就得用浏览器。至于学会这个“审查元素”功能有什么好处，这个要看你个人用到什么方面上了。废话不说了，进入正文。
下面简单的说下如何使用浏览器的“审查元素”功能。艺灵建议大家使用以下一系列浏览器中的任意一种：Chrome(谷歌)、Ff(火狐)、Opera(欧朋)、360极速、360安全、淘宝、搜狗等。如果浏览器自带双核，建议切换成“极速模式”。(这里列举的双核浏览器，建议更新到最新版本。)接下来以图文的方式，教新手如何将双核浏览器切换成极速模式。以360安全浏览器为基准进行演示，具体请看下图一：&切换完成后再教新手如何使用浏览器的“审查元素”功能，具体请看下图二：&
1.1趁热打铁
刚讲了审查元素的用法，下面我们来趁热打铁一下，举个栗子。上图：&上图所示的是某下载网站中dreamweaver cs6绿色版下载页面的截图。对于那些对下载网站不了解的小朋友来说，相当多的一部分人会毫不犹豫的点击红框中的链接，然后坐等下载完成。看似图中有好多渠道的链接，起码最少有7个吧。那么问题来了：问：箭头所指的区域内有几个渠道的下载链接。
答案即将公布，不要走开，广告过后，精彩回来！大葵花爸爸课堂上课了！......左手拿着教科书，右手拿着打火机，哪里不会点哪里！爷爷再也不用担心没人陪我玩啦！......不管是现在，还是在遥远的未来......广告完毕，精彩回来。想知道答案者请继续往下看真相↓&
真是不看不知道，一看吓一跳啊！骚年，学会使用审查元素吧，艺灵只能帮你到这儿了。最后唠叨一句：如果你的时间够充足的话，可以到本站导航上面的“资源下载”中下载视频，看里面具体案例应用。
2.熟悉店铺后台
说到装修店铺，不需要你把后台所有功能都吃透，但基本的一些功能必须要了解！群内有很多新手会问一些小儿科的问题，例如：店招下10px问题、全屏店招、二级页面全屏背景等等问题，（后面会一一讲到）其实这些问题都可以通过后台设置来解决。多么简单的事情，可在他们眼中却是难于登天。我在经过多次思考后总结出2点原因：
1.对后台不熟悉，80%的功能没有亲自测试使用过；
2.不看字！
上面列举的2点原因中第2点最为严重！基本上隔三差五的都会有这种新手来找我，归根结底还是不看字引起。下面来看一个6号的真实案例。我先来描述下问题吧。
号群内一网友在qq上面问我关于“淘宝店铺二级页面全屏背景”的问题。他当时发来一个链接，然后我把背景提取出来后发给了他。然后他可能不知道怎么操作，然后我又以之前的截图案例发给了他。其实我是知道他还会来找我的，结果真的又来了。啥也不多说，仔细看聊天记录，发现问题所在吧。有此类问题的需要注意，没有的话可以跳过看下面的内容了。图三：
类似这种的例子还有很多很多，艺灵就不一一列举了。下面我们来看下官方给出的淘宝C店专业版和基础版的区别，请看下图四：
如果想了解更多，可以点击淘宝官网地址：http://wangpu.taobao.com/wangpu/comparation.htm
下面我们到后台中看一看那些常用且常被忽视的地方。图五：&注意上面红框中的内容，“店招下10px问题”、“全屏店招背景”、“二级页面全屏背景”这些都可以在后台解决。当然，后台中还有其它的一些内容，这个就自己摸索吧。
下面一段内容于 号新增
唉，有些看官的店铺已经升级成了新版本，然后。。。。好多功能就不知道怎么改了，让我说什么好呢？！不就是个升级成新版本嘛，基础功能都还在的好不！如图：
功能自己再找吧。&(新增内容完毕)
另外再说两点经验。
经验一：代码需要放到新建的自定义页面测试，不要直接放到首页测试。
理由：如果你的店铺每日流量巨大的话，你这样直接在首页装修测试代码，用户进来时看到店铺零乱不堪，你觉得用户还有心情继续在你店铺看下去吗？
如何新建自定义页面？请看下图六：&
经验二：测试代码要发布不要预览。
理由一：自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:&来解决。
如果以上两种方法还不会操作的话，可以点击网站导航上面的“在线生成”，然后在右侧找到“”，鼠标猛戳进去，在上面的文本框中输入自己的代码后点击右侧的“生成代码”即可在下方生成新代码，复制代码到店铺中即可。如图十：&
4.超链接问题
4.1去超链接下划线
问题描述：超链接的默认状态下会有下划线。如图十一：&
解决方案：将超链接的text-decoration属性设置为none即可。
&a href=&链接自填& style=&text-decoration:none&&艺灵设计&/a&
4.2图片上任意地方添加超链接问题
通常情况下在一张图片上任意地方添加链接的话，大多新手都是用热点地图。除了用热点外，还可以使用透明超链接定位到图片上面。这种方法也是常常用到的，但真正会用并处理的很好的人并不多。因为正常情况下，绝对定位后内容为的超链接虽能在-webkit内核浏览器下可点击，但在ie浏览器中却失效。
问题描述：绝对定位后内容为空的超链接在ie中无法点击。如图十二：&
解决方案：给超链接设置background等相关属性即可。相关文章：。
&a href=&链接自填& class=&调用官方绝对定位类名& style=&position:left:top:display:inline-width:50height:20border: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店基础版的话，不用找了，后台中没有这个功能，只能用背景来掩饰，具体代码如下：
body{background-image:url(图片链接);background-position:50% 115background-repeat:repeat-x;}
代码说明：1.在ps中处理好图片，高度需要设置为160px。其中，150~160px这之间的10px内容为替补图案。
2.将图片上传到自己图片空间，然后替换掉图片链接即可。至于这段代码放哪里呢？当然是放店招里面了。如图十四：&相关文章：
5.2模块下10px/20px问题
问题描述：出于布局美观，淘宝将店铺模块统一设置了一定距离的下边距。如图十五：&
解决方案：绝对定位+负值。
.ylsj-mt10{margin-top:-10px}//代码放到css入口中
相对而言，屌丝店铺都没有购买旺铺css，因此这个方法也就不行了，需要另找他法。这时，我们可以利用绝对定位+负值。
&div style=&height:(H-h)& &　&div class=&A& style=&top:&&　　&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查看下边距具体值(号临时更新此条)
就在刚才，又有一个小伙伴进群求助这个下边距的问题了。虽然我的软件里面已经设置了此功能，但看似事情比想像的复杂。为什么呢？因为同是专业版，这个下边距还有两个不同的版本！什么？不会吧！我们还是用图来说话吧。不明觉厉的看官可以按照本文开篇目录1中的方法跟着艺灵一起来操作看个究竟。
有店铺的可以直接进入自己店铺首页，没店铺的可在淘宝中随便点一款产品然后进入店铺。进入后我们把鼠标放到导航下面的任意一张图片上(实际上是任意一个自定义模块上)开始操作。1.图片上右键--2.审查元素--3.向上查找父级skin-box
tb-module tshop-pbsm tshop-pbsm-shop-self-defined--4.看右侧显示的样式值。完整操作如下图：
上图是两个专业版店铺的对比图，从图中右侧可以看出一个是margin-bottom:
20一个是margin-bottom:
10，所以呢，在套代码时有必要看看自己店铺的下边距到底是多少哈。
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{background-image:url(图片链接);background-position:50% 115background-repeat:repeat-x;}
此代码的配套截图在5.1中已列出，忘记的请回滚到相关内容区。
方案三：修改系统属性，适用于已开通旺铺CSS的天猫店铺的壕级别卖家。代码如下：
.tshop-pbsm-shop-custom-banner{overflow:}//天猫店铺暂未过滤。原理：修改相关父级属性成position:static或overflow:均可
将以上代码放到店铺的css入口中保存即可实现正宗的全屏店招，因为宽度已突破990px限制。相关文章：
方案四：购买设计师模板。说明一下，不是所有的设计师模板都能突破950px/990px宽度。当然了，少数设计师模板中自带css入口，这种牛b模板不买实现是对不起射鸡师！！！
方案五：模块漏洞。后台中修改数据达到添加牛b模块的效果。相关文章：，
方案六：其它漏洞。(暂不公开)
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修改系统样式/设计师模板/模块漏洞......　相关文章：
&div style=&height:(H-h)& data-title=&全屏代码框架& &　&div class=&A& style=&position:top:left:0;margin-left:50%;width:border:0;padding:0;background-color:&&　　&div class=&A& style=&position:top:-hleft:-960width:height:Hborder:0;padding:0;background-color:&&　　　&div style=&width:1920margin: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:}　//①*{overflow:}　　//②　
代码说明：①和②都能实现最终效果。其实原理很简单，跟前面的7.1全屏店招一样，都是通过修改系统属性。严格来说，这里应该修改的样式为：#bd{overflow:}，但是由于后台写不了id的，所以只能这样泛指。此代码有一个缺点：即页面会显示水平滚动条，原因你懂滴。
方案三：当下最新漏洞达到任意页面全屏，并且支持自定义css的哦！本站导航上面的“在线生成”中已经制作有成品，壕可以前来感受下效果。
7.5天猫B店页尾全屏且无水平滚动条
问题描述：虽能你们的天猫B店页尾能全屏，但却有一个致命点！那就是→水平滚动条，十分不美观。如图十九：&
解决方案：更换全屏代码。
&div style=&height:H& data-title=&天猫B店页尾全屏&&　&div class=&sn-simple-logo& style=&left:0;top:width:100%;Hbackground:url(图片链接) 50% 0px no-& &　&/div&&/div&
代码说明：替换掉图片链接即可，放入天猫店铺后不会有水平滚动条出现。如果不会修改代码的话，可以使用本站的相关软件“全屏海报+多链接”免费在线生成即可。生成教程如图二十：&
7.6淘宝C店页尾全屏
问题描述：正常情况下，C店的页尾只有950px，即使里面添加了全屏代码也是无法全屏的。
解决方案：不要页尾，bd中最下面一个模块当作页尾同时配合7.3中的全屏代码框架即可。来看一张效果图，图二十一：&
7.7淘宝C店详情页百变全屏背景
问题描述：正常情况下，详情页主区1140以外内容均为白色，不好看。如图二十二：&
解决方案：使用下面专用代码。相关文章：
&div style=&height:0& data-title=&C店详情页百变全屏背景&&　&div class=&footer-more-trigger most-footer & style=&position:left:-485top:-730margin-left:50%;width:border:0padding:0height:100000background-color:&&　　&div style=&width:1920height:100%;margin:0background:url(背景图片链接) 50% 0px repeat-& &　&/div&　&/div&&/div&
代码说明：替换掉图片链接即可，放入淘宝店铺左侧第一个自定义模块中即可。不同的产品可在后台新建不同的宝贝详情页，勾选相对应宝贝即可实现百变效果。来看下效果截图，如图二十三：&如果不会修改代码的话，可以使用本站的相关软件“全屏海报+多链接”免费在线生成即可。教程图请参见图十九。
&div class=&www-yilingsj-com-zxsc& style=&height:0& data-title=&【C店详情页百变全屏背景固定】&&&div class=&footer-more-trigger most-footer cloud-footer& style=& position:top:0;border:0padding:0left:0;height:100000display:width:0;background:overflow:z-index:1;&&&div class=&footer-more-trigger most-footer cloud-footer& style=&margin:0width:390height:100%;background:url(http://img04.taobaocdn.com/imgextra/i4//TB2qGVmapXXXXbAXXXXXXXXXXXX_!!.png) repeat-y 50% 0left:-390background-color:overflow:display:border:0;padding:0;z-index:1;& data-title=&左侧& &
&/div&&div class=&footer-more-trigger most-footer cloud-footer& style=&margin:0width:390height:100%;background:url(http://img04.taobaocdn.com/imgextra/i4//TB2qGVmapXXXXbAXXXXXXXXXXXX_!!.png) repeat-y 50% 0left:1140background-color:overflow:display: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:margin-left:50%;left:0;top:width:height:0;border:0;padding:0;background-color:transparent&&　　&div class=&A& style=&position:left:-960top:-hheight:99999width:1920border:0;padding:0;background:url(背景图片链接) repeat-y center 0background-color:transparent&&　　&/div&　&/div&&/div&
代码说明：代码中的黄色高亮部分需要根据不同店铺进行修改，参数值请对照7.3中的代码说明。背景链接需要替换掉，一切修改完毕后，在需要做全屏背景的那个页面最上面新建一个自定义内容区,粘贴内容，保存发布即可。此时我们再来看下页尾下面吧，如图二十五：&怎么样，恢复了默认的白色，比先前的要好看吧。
这里需要注意一下，如果店铺使用的是设计师模板，可能出现部分店铺使用全屏代码失效的情况，原因是：设计师写的css对模板做了限制。
7.9视差滚动特效
类&#的代码，添加多个固定背景即可实现。建议使用相关软件“”生成，比较快捷方便。
8.自定义搜索框
问题描述：很多人想给自己店铺的导航上面添加一个自定义搜索框，如图二十六：&但是却不会写代码。其实代码很简单，代码如下：
&div class=&A& style=&position:left:766right:0border:0padding:0top:111width:140height:23line-height:23z-index:97;background:url(搜索框背景图链接) 0 0 no-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:position:width:105height:23line-height:23color:#FFF;border:0;background-color:outline:text-indent:3&&　　&input type=&submit& value=&搜索& class=&ylsj-s-but& style=&float:position:cursor:width:35height:23line-height:23font-size:0;border:0;background-color:outline:&&　&/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，注意此关注仅适用于天猫旗舰店，相关文章：
10.您不能使用他人图片空间中的图片
问题描述：当店铺中有他人图片空间中的图片链接时，正常情况下是无法保存并且会有系统提示的。如图二十七：&
解决方案：data-ks-lazyload/上传自己空间。 相关文章：
10.1延迟加载技术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:&&&/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:&&,//分享带的图片，不填写则取商品图片/店铺logoclient_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&:&&,&type_id&:&1100035&,&rec_user_id&:&&,&view&:&detail_list&,&title&:&艺灵设计留言版块&, &moreurl&:&http://shop.taobao.com/& },&paramList&:{&view&:&list_trunPage&}}' style=&width:100%;height:70%;overflow-y:& data-title=&艺灵留言版块&&&/div&
相关文章：
16.滤镜代码失效问题
问题描述：在做css3鼠标滑过遮罩特效时，遮罩层通常为半透明背景色。虽然代码在-webkit浏览器下正常，但在ie下却失效。
解决方案：不要使用简写filter:alpha(opacity=xx)而使用完整写法。
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=?)
代码说明：将上面代码中黄色高亮的?替换成整数即可，数值范围是0~100。相关文章：
17.Widget规范
轮播特效、弹出层特效、倒计时特效、手风琴特效等一系列js特效全在这个里面，链接地址：http://open.taobao.com/doc/detail.htm?id=102084。
相关文章：
18.图片空隙问题(以下内容为号新增)
18.1垂直方向上有空隙
问题描述：图片与图片间有空隙，具体应用场合：table做的导航、宝贝详情中的图片，如图：&
解决方案：使用vertical-align:、float:都可以。
img{vertical-align:}//代码放到css入口中
当然了，毕竟大多数人都不是壕，也不会最新的破解之术，只能使用最原始老套的方法了。给所有的img标签都添加行内样式：style=&vertical-align:&。
个人不建议使用浮动来解决这个问题，因为使用浮动的话需要清除浮动。相关软件参见上图十。
18.2水平方向上有空隙
问题描述：如图：&
解决方案：代码保持紧凑，去除掉img之间的空格或换行br代码。
18.3table中的图片在垂直方向上有空隙(京东)
解决方案:除了添加18.1中的代码外，将table中的height属性去掉，让其自适应。
京东店铺中出现这一现象的原因与有关。去掉table的高度可以有效防止td平分当前窗口的高度。
19.倒计时特效失效问题
问题描述：调用官方的Countdown组件后在店铺中失效。
解决方案一：检查结束时间endTime的值是否已过期或格式有误；解决方案二：让每个span中的值不为空。
20.代码过滤问题
问题描述：店铺中写的一些代码在保存后神奇的消失了，其实是被系统过滤掉了！下面列举一些常见且不被重视的例子吧。
20.1css样式过滤
//4个方位的负值全被过滤(入口中取值会被保留)//仅值为absolute时被过滤(入口中的absolute会被保留)z-//取值范围[0,99]，超过99的只显示最大值!//过滤css2选择符;//仅保留:hover伪类css3属性;//css3中动画等高级属性全被过滤，仅保留简单的transition(过渡)和transform(2D变换)省略n万字......
//4个方位的负值全被过滤//仅值为absolute时被过滤z-//取值范围[0,99]，超过99的只显示最大值(仅店铺后台会被保留)!//过滤，(仅店铺后台会被保留)省略n万字......
20.2html标签过滤
//内容为空时被过滤//内容为空时被过滤a;//内容为空时被过滤(添加一个样式即可解决问题)省略n万字......
解决方案：给内联元素添加内容，如空格等字符。如有必要可通过设置font-size:0;text-indent:-9999等属性隐藏文本内容。现在你该知道19中的倒计时失效的原因了吧。
转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：http://www.yilingsj.com/code//246.html
若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。
html中写一个天猫商城的购物模块界面
天猫首页自适应写法
position,z-index,float覆盖问题
【京东商城首页实战10】添加通栏背景图片及布局技巧
没有更多推荐了，}