艺灵设计

全部文章
×

淘宝店铺模块间10px问题详解

作者:艺灵设计 - 来源:http://www.yilingsj.com - 发布时间:2014-07-14 22:32:59 - 阅: - 评:0 - 积分:0

虽然说店招下10px已经是一个老掉牙的问题,但仍不乏初次接触淘宝店铺装修的小白搞不明白到底是怎么回事。为此,艺灵决定有必要写一篇详细的教程帖。如果一味的靠别人提供代码来解决问题,那是不可行的,知道原理才是关键!

还是先来让问题重现吧,放一张截图:店招与banner间有10px的空白
图中圈中的地方正是那传说中让不少小白纠结的10px,去除的方法很简单,只需要在店招处设置下即可。如下图:(注意:此图只适合专业版;基础版没有这项功能,可以升级成专业版)
[专业版]店铺店招下10px问题解决方法
下面来分析这10px产生的原因。

看页面源码可知,这10px是系统模块的下边距大小,如图:
[专业版]店铺中系统默认设置下边距10px
因此我们每新建一个模块时都会有10px的距离。虽然是为了布局好看吧,但很多小白都不能理解,都跟艺灵一样有强迫症,1px都不爽更何况是10px了。

虽然店招处的10px系统提供了现成的按钮,但模块间的10px系统却并未提供现成的按钮操作。也就意味着,系统是强制让模块间有这10px的间距,但这在会些基础代码的来说:那都不是事!之前艺灵曾发布的一文淘宝店铺装修经验分享中简单的介绍了2种方法。

事实上,解决此问题也无外乎两种方案。
方案一:margin-top:-10px
方案二:top:-10px
需要注意的是:如果直接将方案一的代码margin-top:-10px写在“自定义内容区”中会被系统过滤掉!那么该如何解决呢?当然是用方案二喽!可能很多初级新手还是不明白,不过也没关系,继续往下看吧。

我们将方案二的代码写到自定义内容区中,此时不用担心被屏蔽,也不用担心需要购买旺铺css服务。(咳咳,有关破解旺铺css的文章请点击:破解)下面附上完整代码框架。

去除模块下边距代码框架

  1. <!--淘宝c店版-->
  2. <div class="www-yilingsj-com-zxsc" style="height:(H-h)px;" data-title="【万能全屏代码框架】">
  3.  <div class="footer-more-trigger most-footer cloud-footer" style="position:absolute;left:50%;top:auto;width:0;height:inherit;border:0;padding:0;background-color:transparent;display:block;overflow:visible;">
  4.   <div class="footer-more-trigger most-footer cloud-footer " style="position:absolute;left:-960px;top:-hpx;width:1920px;height:inherit;border:0px;padding:0px;display:block;overflow:hidden;background-color:transparent;">
  5.    <div class="clearfix " style="width:1920px;height:Hpx;overflow:hidden;">
  6.    <!--你的代码放这里面-->
  7.     <!--注释说明:
  8.     H表示内容高度;
  9.     h表示模块下边距值;
  10.     (H-h)表示外面框架高度,必须要写,否则你在后台中找不对对应模块!!!
  11.     -->
  12.    </div>
  13.   </div>
  14.  </div>
  15. </div>

好了,这样就完成了。

刚在整理时发现部分店铺已经抽了,淘宝大姨妈又提前来了么???

无论是10px还是多少,只要先知道问题所在,那一切问题就迎刃而解了。最后附一张京东的,京东的比较人性化,可写css,可设置下边距。京东模块间10px解决方案

2014-11-21号更新

忘记说淘宝基础版的解决方法了,不得不说淘宝基础版是个硬伤,唯一的解决方法就是背景填充

淘宝C店基础版的解决方法

  1. body{background-color:#FDC6C6;background-image:url(http://img02.taobaocdn.com/imgextra/i2/759415648/TB2k_JAaVXXXXX6XXXXXXXXXXXX_!!759415648.png);background-position:0 115px;background-repeat:repeat-x;}

红色代码为需要替换的图片链接,替换后放到导航里面就可以了。什么?你不会放?我就知道以前的文章你都没仔细看!如下图: css样式操作步骤 这里做图片时需要注意一下:高度设置为160px;因为淘宝默认店招是150px;下方会空10px;这就是我们为什么要设置成160px的原因了。下面10px自己在ps里面处理下,适合自己店铺的就行了。

2015-07-10号更新

考虑到很多新手并不会修改代码,艺灵已将这些功能做进了软件中,点击导航上面的在线生成后可使用相关软件生成相关代码。
万能全屏代码(免费)
淘宝基础版全屏店招(免费)

转载声明:
  若亲想转载本文到其它平台,请务必保留本文出处!
本文链接:http://www.yilingsj.com/code/2014-07-14/174.html

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

亲,扫个码支持一下艺灵呗~
如果您觉得本文的内容对您有所帮助,您可以用支付宝打赏下艺灵哦!

Tag: 淘宝店铺 基础版 模块下边距 10px间距 店招10px 淘宝天猫京东网店装修 footer-more-trigger 页头下边距 破解淘宝css权限

上一篇: 网购安全防骗篇之识破虚假销量   下一篇: 淘宝全屏海报+多链接代码生成器使用说明

评论区