：编写教材的目的

经常会在我的代码群里（群号：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; 删掉即可。点击确定，隐藏的导航就显示了。

四：自定义模块隐藏

这个原因的复杂并且多样了。米色主要总结有以下几个原因

1. 使用了别人的代码，而别人代码里面的样式中 存在 隐藏的代码，一般是 display:none; 按照上面导航的方法，找到这个自定义模块里面的代码，查看哪里存在，找到了，按照上面的方法，样式前面对勾去掉，将自定义模块显示。不过这种情况很少出现

2. 在测试调用官方样式的时候，官方默认样式中存在了，隐藏的代码。跟上面方法一样，审查元素 找到代码检查。

3. 自定义模块代码中使用了定位或者浮动。为什么呢？因为定位样式中除了相对定位外，其他两种定位 都会让内容默认的位置消失（举例就是添加了绝对定位或者固定定位的元素，相当于从它以前的位置搬到了二楼，那么以前1楼的位置就没有了）

上面解决的办法都一样，装修页面审查元素解决。这里就不多啰嗦了。以前录过一个视频教程，有兴趣可以看看，复制下面地址在浏览器打开

http://www.mgsns.com/thread-46-1-1.html

五：如何避免这样的问题呢

1. 导航：不要随便使用导航隐藏的代码，如果需要导航隐藏，可以将店招模块高度设置成150，导航自然就不会显示了。有同志要说了。我不希望店招是150，又想让导航隐藏怎么办？那没办法，你只能给导航添加隐藏代码，前提是你要知道怎么把隐藏导航显示出来。

2. 自定义模块：建议不是最终装修的时候，测试阶段，不要让自定义模块标题隐藏，就让标题显示，这样就算因为代码原因内容消失了，自定义模块 还是可以在标题部分点击编辑，编辑里面的代码。

六：那些原因会造成高度为0，而将内容隐藏

1. 当元素添加绝对定位或者固定定位，那么因为内容不再布局里了，所以高度自然就没有了。

2. 给元素添加了浮动样式，那么它的父级元素 高度会变成0

3. 淘宝平台，如果自定义模块里面，只是添加了弹出层组件代码，那么模块也会隐藏。

时间有限 ，目前只能想到这些，如果有其他的原因，会在代码群里交流。

铺装修其中比较关键的应该算是店招和导航了吧。米色思索了半天，也没确定好该如何对这篇教程的内容分块。为了方便就按照终端划分吧。

一：PC电脑端

1. 店招：默认尺寸为950px*120px 一般我们会使用自定义店招，注意一般情况下，可点击的内容部分，最好放自定义模块里面，因为超过950范围 不能点击，用其他方法去掉溢出隐藏。

2. 店招导航背景：如果是专业版，智能版可直接在装修页面页头设置里面添加背景图。如果是基础版店铺，只能通过固定背景或者导航条背景来实现（这个教程我也发过，关注米色查看）

3. 导航：默认尺寸950px*30px 很多人不喜欢用默认导航，而选择自定义导航。其实如果会代码，使用默认导航条修改成你想要的效果更好。因为淘宝默认是允许我们在导航模块里面编写CSS代码来修改导航条样式效果。用默认导航条做的导航效果更炫酷。

二：手机移动端

店招：没什么好说的，在装修后台，我们只能替换店铺店招背景图，建议尺寸750px*254px

因为手机端太过简单，这里就不啰嗦了。重点说下电脑端店招和自定义导航的事情。

一：店招

默认的尺寸，只是淘宝建议的尺寸（宽度为950像素，高度建议不超过120像素，否则导航显示可能异常）

很多朋友经常问，怎么在店铺实现全屏店招。其实这里的全屏需要分2种情况：

1. 店招950px以外部分可以点击。（这个默认淘宝是不允许的，除非购买模板或者用其他破解方法实现）

2. 店招950px范围以内可以点击（一般我们主要是做这种）

其实全屏店招很简单，比如你设计好了 一个店招效果。你把不需要变动或者点击的部分，单独存储为页头背景，店招+导航（一般1920px*150px）

然后把需要点击和变动的部分，再单独做出来，放自定义店招里面。

原理跟PS图层一样，背景层 上面是店招内容层。一上一下，两层。

注意店铺店招和导航的尺寸不是固定就那么大，你可以随意设置高度，甚至是你只用店招模块或者导航模块都可以。

二：店铺自定义导航

这里说的自定义导航是相对于默认导航来说的。因为有些人不懂代码，修改不了默认导航，所以只能通过自定义导航来实现效果了。（注意：自定义导航代码，只能放店招模块里面）

关于自定义导航有下面几个问题：

1-店铺默认情况下，店招里面的内容，如果超过店招模块的范围会自动隐藏不显示

换句话说就是你自定义做好的导航效果，放店招模块后，超过950px区域就会隐藏不显示。

自定义导航，一般包含2部分

1-导航条（如果不懂代码编写的话，可以使用PS+DW来制作导航条）

2-鼠标经过弹出的二级分类

要想实现鼠标经过导航条上面的分类弹出二级分类，我们就需要用到淘宝WIDGET组件，弹出层。

首先我们来一个简单的弹出层代码来试试效果

<div class="miseu" style="height:120px; width:200px;">米色：自定义导航</div>

<div class="J_TWidget hidden" data-widget-type="Popup" data-widget-config="{

'trigger':'.miseu',

'align':{

'node':'.miseu',

'offset':[0,0],

'points':['bc','tc']

}

}">

<div style="background-color:#0CF; height: 200px; width: 190px;">

米色君被导航弹出了

</div>

</div>

当我们把上面代码全部放进自定义店招，源码模式下的话会发现，弹出的内容，没有显示，为什么呢？因为弹出的内容在店招的950px区域外，所以隐藏起来了看不到。

那么怎么才能显示出来呢？

我们只需要做一个简单的操作即可，就是把上面【自定义导航】代码放店招自定义里面。将弹出内容部分代码，放导航下面的另一个自定义模块里面。就会发现鼠标经过导航弹出的内容就显示了。

但是需要注意，尽量不要把弹出内容部分的代码，单独放到一个自定义模块里面，不然到时候会发现自定义模块消失看不到了，怎么解决呢？

很简单，把弹出的代码，放到一个已经有内容的自定义模块，源码模式上面就可以

如果需要其他页面也弹出来，就需要在其他页面再把弹出内容代码放进去自定义模块

2-自定义店招的优劣对比

【店铺默认导航】：

优势：可以通过CSS代码，将导航条修改成任意你想要的效果。并且还能做CSS特效。还不需要那么麻烦手动添加分类，自动就会显示店铺分类。并且所有页面都可以弹出来。

劣势：需要一定代码基础，才能修改导航实现想要的效果

【自定义导航】：

优势：导航条自定义成都更高，比如想在导航条上面做一个搜索框等。相对修改默认导航，某种意义说这个对代码要求更低点

劣势：没办法所有页面都弹出。（不过也不需要担心，进入装修页面，将弹出部分的代码，放到详情页的一个自定义模块里面即可）。而且店铺没有CSS权限的话，很难实现CSS特效。

至于是想用默认导航还是自定义导航，看个人情况选择即可。

因为内容比较多，详细的装修方法没有说，只是说了一些有点重要的技巧，以后有空再发布一些详细的装修教程。大家关注公众号，及时获取教程。