一:编写教材的目的
经常会在我的代码群里,有一些群友会问,我店铺的导航消失了,或者店铺自定义模块消失了,怎么显示出来?
二:产生的原因
在说实现方法前,有必要说一下,产生的原因。因为在使用别人代码的时候,别人代码中存在一些隐藏的代码,所以会出现隐藏的效果。这里米色从两种情况来分析,导航和自定义模块
三:店铺导航隐藏
这个相对来说比较简单,因为一般情况下,都是因为给导航添加 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楼的位置就没有了)
上面解决的办法都一样,装修页面审查元素解决。这里就不多啰嗦了。以前录过一个视频教程,有兴趣可以看看,复制下面地址在浏览器打开
五:如何避免这样的问题呢
- 导航:不要随便使用导航隐藏的代码,如果需要导航隐藏,可以将店招模块高度设置成150,导航自然就不会显示了。有同志要说了。我不希望店招是150,又想让导航隐藏怎么办?那没办法,你只能给导航添加隐藏代码,前提是你要知道怎么把隐藏导航显示出来。
- 自定义模块:建议不是最终装修的时候,测试阶段,不要让自定义模块标题隐藏,就让标题显示,这样就算因为代码原因内容消失了,自定义模块 还是可以在标题部分点击编辑,编辑里面的代码。
六:那些原因会造成高度为0,而将内容隐藏
- 当元素添加绝对定位或者固定定位,那么因为内容不再布局里了,所以高度自然就没有了。
- 给元素添加了浮动样式,那么它的父级元素 高度会变成0
- 淘宝平台,如果自定义模块里面,只是添加了弹出层组件代码,那么模块也会隐藏。
点击加载更多