全方位剖析淘宝店铺模块隐藏与显示的区别「全方位剖析淘宝店铺模块隐藏与显示」 _为什么淘宝导航没显示

一：编写教材的目的
经常会在我的代码群里（群号：101527468），有一些群友会问，我店铺的导航消失了，或者店铺自定义模块消失了，怎么显示出来？
二：产生的原因
在说实现方法前，有必要说一下，产生的原因。因为在使用别人代码的时候，别人代码中存在一些隐藏的代码，所以会出现隐藏的效果。这里米色从两种情况来分析，导航和自定义模块
三：店铺导航隐藏
这个相对来说比较简单，因为一般情况下，都是因为给导航添加 display:none; 造成的。

文章插图
那么如何解决呢？
很简单，运用好浏览器审查元素工具，工具是用来调试代码用的，可以临时修改页面样式查看效果，但是不会修改到源代码
具体如何解决，跟着操作一步步做：
1-进入店铺装修页面
2-鼠标放在店招上面，右键 - 审查元素
【全方位剖析淘宝店铺模块隐藏与显示的区别「全方位剖析淘宝店铺模块隐藏与显示」】

文章插图
3-找到代码中class名为 J_PageToDesignContainer 的div
4-然后依次往下找，找到代码里面有导航两个字的DIV为止

文章插图
5- 然后继续往下找。一直找到 class 名为 skin-box-bd 的DIV位置，然后鼠标点击这个DIV，会看到右边 .skin-box-bd 里面有个 display:none; 的样式。鼠标点击这个样式前面的对勾。会发现隐藏的导航显示了

文章插图
6-最后鼠标经过导航，会看到编辑按钮。点击编辑，会弹出下面截图，找到显示设置，在CSS里面找到 .skin-box-bd {display:none;} 的样式，删掉。这个时候有同学可能要问，如果这个样式里面还有其他的怎么办。那你只需要把 display:none; 删掉即可。点击确定，隐藏的导航就显示了。

文章插图
四：自定义模块隐藏
这个原因的复杂并且多样了。米色主要总结有以下几个原因
使用了别人的代码，而别人代码里面的样式中存在隐藏的代码，一般是 display:none; 按照上面导航的方法，找到这个自定义模块里面的代码，查看哪里存在，找到了，按照上面的方法，样式前面对勾去掉，将自定义模块显示。不过这种情况很少出现
在测试调用官方样式的时候，官方默认样式中存在了，隐藏的代码。跟上面方法一样，审查元素找到代码检查。
自定义模块代码中使用了定位或者浮动。为什么呢？因为定位样式中除了相对定位外，其他两种定位都会让内容默认的位置消失（举例就是添加了绝对定位或者固定定位的元素，相当于从它以前的位置搬到了二楼，那么以前1楼的位置就没有了）
上面解决的办法都一样，装修页面审查元素解决。这里就不多啰嗦了。以前录过一个视频教程，有兴趣可以看看，复制下面地址在浏览器打开
http://www.mgsns.com/thread-46-1-1.html
五：如何避免这样的问题呢
导航：不要随便使用导航隐藏的代码，如果需要导航隐藏，可以将店招模块高度设置成150，导航自然就不会显示了。有同志要说了。我不希望店招是150，又想让导航隐藏怎么办？那没办法，你只能给导航添加隐藏代码，前提是你要知道怎么把隐藏导航显示出来。