：編寫教材的目的

經(jīng)常會在我的代碼群里（群號：101527468），有一些群友會問，我店鋪的導航消失了，或者店鋪自定義模塊消失了，怎么顯示出來？

二：產(chǎn)生的原因

在說實現(xiàn)方法前，有必要說一下，產(chǎn)生的原因。因為在使用別人代碼的時候，別人代碼中存在一些隱藏的代碼，所以會出現(xiàn)隱藏的效果。這里米色從兩種情況來分析，導航和自定義模塊

三：店鋪導航隱藏

這個相對來說比較簡單，因為一般情況下，都是因為給導航添加 display:none; 造成的。

那么如何解決呢？

很簡單，運用好瀏覽器審查元素工具，工具是用來調(diào)試代碼用的，可以臨時修改頁面樣式查看效果，但是不會修改到源代碼

具體如何解決，跟著操作一步步做：

1-進入店鋪裝修頁面

2-鼠標放在店招上面，右鍵 - 審查元素

3-找到代碼中class名為 J_PageToDesignContainer 的div

4-然后依次往下找，找到代碼里面有導航兩個字的DIV為止

5- 然后繼續(xù)往下找。一直找到 class 名為 skin-box-bd 的DIV位置，然后鼠標點擊這個DIV，會看到右邊 .skin-box-bd 里面有個 display:none; 的樣式。鼠標點擊這個樣式前面的 對勾。會發(fā)現(xiàn)隱藏的導航顯示了

6-最后鼠標經(jīng)過導航，會看到編輯按鈕。點擊編輯，會彈出下面截圖，找到 顯示設(shè)置，在CSS里面找到 .skin-box-bd {display:none;} 的樣式，刪掉。這個時候有同學可能要問，如果這個樣式里面還有其他的怎么辦。那你只需要把 display:none; 刪掉即可。點擊確定，隱藏的導航就顯示了。

四：自定義模塊隱藏

這個原因的復雜并且多樣了。米色主要總結(jié)有以下幾個原因

1. 使用了別人的代碼，而別人代碼里面的樣式中 存在 隱藏的代碼，一般是 display:none; 按照上面導航的方法，找到這個自定義模塊里面的代碼，查看哪里存在，找到了，按照上面的方法，樣式前面對勾去掉，將自定義模塊顯示。不過這種情況很少出現(xiàn)

2. 在測試調(diào)用官方樣式的時候，官方默認樣式中存在了，隱藏的代碼。跟上面方法一樣，審查元素 找到代碼檢查。

3. 自定義模塊代碼中使用了定位或者浮動。為什么呢？因為定位樣式中除了相對定位外，其他兩種定位 都會讓內(nèi)容默認的位置消失（舉例就是添加了絕對定位或者固定定位的元素，相當于從它以前的位置搬到了二樓，那么以前1樓的位置就沒有了）

上面解決的辦法都一樣，裝修頁面審查元素解決。這里就不多啰嗦了。以前錄過一個視頻教程，有興趣可以看看，復制下面地址在瀏覽器打開

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

五：如何避免這樣的問題呢

1. 導航：不要隨便使用導航隱藏的代碼，如果需要導航隱藏，可以將店招模塊高度設(shè)置成150，導航自然就不會顯示了。有同志要說了。我不希望店招是150，又想讓導航隱藏怎么辦？那沒辦法，你只能給導航添加隱藏代碼，前提是你要知道怎么把隱藏導航顯示出來。

2. 自定義模塊：建議不是最終裝修的時候，測試階段，不要讓自定義模塊標題隱藏，就讓標題顯示，這樣就算因為代碼原因內(nèi)容消失了，自定義模塊 還是可以在標題部分點擊編輯，編輯里面的代碼。

六：那些原因會造成高度為0，而將內(nèi)容隱藏

1. 當元素添加絕對定位或者固定定位，那么因為內(nèi)容不再布局里了，所以高度自然就沒有了。

2. 給元素添加了浮動樣式，那么它的父級元素 高度會變成0

3. 淘寶平臺，如果自定義模塊里面，只是添加了彈出層組件代碼，那么模塊也會隱藏。

時間有限 ，目前只能想到這些，如果有其他的原因，會在代碼群里交流。

鋪裝修其中比較關(guān)鍵的應(yīng)該算是店招和導航了吧。米色思索了半天，也沒確定好該如何對這篇教程的內(nèi)容分塊。為了方便就按照終端劃分吧。

一：PC電腦端

1. 店招：默認尺寸為950px*120px 一般我們會使用自定義店招，注意一般情況下，可點擊的內(nèi)容部分，最好放自定義模塊里面，因為超過950范圍 不能點擊，用其他方法去掉溢出隱藏。

2. 店招導航背景：如果是專業(yè)版，智能版可直接在裝修頁面頁頭設(shè)置里面添加背景圖。如果是基礎(chǔ)版店鋪，只能通過固定背景或者導航條背景來實現(xiàn)（這個教程我也發(fā)過，關(guān)注米色查看）

3. 導航：默認尺寸950px*30px 很多人不喜歡用默認導航，而選擇自定義導航。其實如果會代碼，使用默認導航條修改成你想要的效果更好。因為淘寶默認是允許我們在導航模塊里面編寫CSS代碼來修改導航條樣式效果。用默認導航條做的導航效果更炫酷。

二：手機移動端

店招：沒什么好說的，在裝修后臺，我們只能替換店鋪店招背景圖，建議尺寸750px*254px

因為手機端太過簡單，這里就不啰嗦了。重點說下電腦端店招和自定義導航的事情。

一：店招

默認的尺寸，只是淘寶建議的尺寸（寬度為950像素，高度建議不超過120像素，否則導航顯示可能異常）

很多朋友經(jīng)常問，怎么在店鋪實現(xiàn)全屏店招。其實這里的全屏需要分2種情況：

1. 店招950px以外部分可以點擊。（這個默認淘寶是不允許的，除非購買模板或者用其他破解方法實現(xiàn)）

2. 店招950px范圍以內(nèi)可以點擊（一般我們主要是做這種）

其實全屏店招很簡單，比如你設(shè)計好了 一個店招效果。你把不需要變動或者點擊的部分，單獨存儲為頁頭背景，店招+導航（一般1920px*150px）

然后把需要點擊和變動的部分，再單獨做出來，放自定義店招里面。

原理跟PS圖層一樣，背景層 上面是店招內(nèi)容層。一上一下，兩層。

注意店鋪店招和導航的尺寸不是固定就那么大，你可以隨意設(shè)置高度，甚至是你只用店招模塊或者導航模塊都可以。

二：店鋪自定義導航

這里說的自定義導航是相對于默認導航來說的。因為有些人不懂代碼，修改不了默認導航，所以只能通過自定義導航來實現(xiàn)效果了。（注意：自定義導航代碼，只能放店招模塊里面）

關(guān)于自定義導航有下面幾個問題：

1-店鋪默認情況下，店招里面的內(nèi)容，如果超過店招模塊的范圍會自動隱藏不顯示

換句話說就是你自定義做好的導航效果，放店招模塊后，超過950px區(qū)域就會隱藏不顯示。

自定義導航，一般包含2部分

1-導航條（如果不懂代碼編寫的話，可以使用PS+DW來制作導航條）

2-鼠標經(jīng)過彈出的二級分類

要想實現(xiàn)鼠標經(jīng)過導航條上面的分類彈出二級分類，我們就需要用到淘寶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>

當我們把上面代碼全部放進自定義店招，源碼模式下的話會發(fā)現(xiàn)，彈出的內(nèi)容，沒有顯示，為什么呢？因為彈出的內(nèi)容在店招的950px區(qū)域外，所以隱藏起來了看不到。

那么怎么才能顯示出來呢？

我們只需要做一個簡單的操作即可，就是把上面【自定義導航】代碼放店招自定義里面。將彈出內(nèi)容部分代碼，放導航下面的另一個自定義模塊里面。就會發(fā)現(xiàn)鼠標經(jīng)過導航彈出的內(nèi)容就顯示了。

但是需要注意，盡量不要把彈出內(nèi)容部分的代碼，單獨放到一個自定義模塊里面，不然到時候會發(fā)現(xiàn)自定義模塊消失看不到了，怎么解決呢？

很簡單，把彈出的代碼，放到一個已經(jīng)有內(nèi)容的自定義模塊，源碼模式上面就可以

如果需要其他頁面也彈出來，就需要在其他頁面再把彈出內(nèi)容代碼放進去自定義模塊

2-自定義店招的優(yōu)劣對比

【店鋪默認導航】：

優(yōu)勢：可以通過CSS代碼，將導航條修改成任意你想要的效果。并且還能做CSS特效。還不需要那么麻煩手動添加分類，自動就會顯示店鋪分類。并且所有頁面都可以彈出來。

劣勢：需要一定代碼基礎(chǔ)，才能修改導航實現(xiàn)想要的效果

【自定義導航】：

優(yōu)勢：導航條自定義成都更高，比如想在導航條上面做一個搜索框等。相對修改默認導航，某種意義說這個對代碼要求更低點

劣勢：沒辦法所有頁面都彈出。（不過也不需要擔心，進入裝修頁面，將彈出部分的代碼，放到詳情頁的一個自定義模塊里面即可）。而且店鋪沒有CSS權(quán)限的話，很難實現(xiàn)CSS特效。

至于是想用默認導航還是自定義導航，看個人情況選擇即可。

因為內(nèi)容比較多，詳細的裝修方法沒有說，只是說了一些有點重要的技巧，以后有空再發(fā)布一些詳細的裝修教程。大家關(guān)注公眾號，及時獲取教程。