當我們還是初次接觸淘寶的時候，什么都還不是不懂的，更別說要裝修店鋪了。這些都是直接給錢別人做的，一來是要給密碼別人不安全，二是感覺被深深的宰了。這里廣州淘寶美工培訓就讓你省下那點冤枉錢，手把手教你怎么裝修店招和導航。詳細看以下的教程：
登陸淘寶網站，進入賣家中心--店鋪裝修--頂部“裝修“--下拉”樣式管理“--選擇背景設置，如下圖：
一、怎么安裝自定義店招？
進入頁頭設置頁面，頁頭背景色不做設置，下面的頁頭背景圖上傳剛才下載保存到桌面的頁頭背景素材，上傳后背景顯示選擇橫向平鋪，背景對齊選擇居中。
背景設置上方有個頁頭下邊距10像素的選項，一般選擇關閉即可取消頁頭與頁面的間隔，如果選擇開啟會有10像素的間隔。
所有的設置好了以后注意點擊保存，然后返回裝修頁面。
復制下面的店招自定義代碼：
1. <divstyle="width:950px;height:120px;">
2. <divstyle="width:950px;text-align:center;height:85px;padding-top:10px;">
3. <divstyle="float:left;width:760px;">
4. <h1style="line-height:60px;font-size:38px;">
5. <ahref="#"style="font-family:微軟雅黑;color:white;text-shadow:2px2px0#444;">淘寶店鋪名字</a></h1>
6. <h2style="color:white;font-size:14px;text-shadow:1px1px0#555;">
7. ————————淘寶店鋪簡單介紹，簡單寫一下即可————————</h2>
8. </div>
9. </div>
10. <divstyle="width:950px;height:22px;clear:both;overflow:hidden;">
11. <divstyle="position:relative;padding-left:25px;width:350px;background:url(http://img01.taobaocdn.com/imgextra/i1/1015393481/T2eIoKXnpXXXXXXXXX-1015393481.gif)no-repeat5px5px;float:right;height:22px;overflow:hidden;">
12. <divclass="J_TWidget"data-widget-config="{contentCls:bbs-taobaoux-com,hasTriggers:false,effect:scrollx,easing:easeOutStrong,interval:5,duration:1}"data-widget-type="Slide"style="position:relative;">
13. <ulclass="bbs-taobaoux-com"style="width:999999px;left:-573.994px;">
14. <liclass="-_-switchable-panel-internal539"style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
15. <ahref="第一個公告鏈接"style="color:yellow;"target="_blank">第一個公告內容</a></li>
16. <liclass="-_-switchable-panel-internal539"style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
17. <ahref="第三個公告鏈接"style="color:yellow;"target="_blank">第二個公告內容</a></li>
18. <liclass="-_-switchable-panel-internal539"style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
19. <ahref="第三個公告鏈接"style="color:yellow;"target="_blank">第三個公告內容</a></li>
20. </ul>
21. </div>
22. </div>
23. </div>
24. </div>
注意：不要復制代碼前面的數字。需要修改的內容我們都已經在代碼里標明，您直接修改代碼即可。
改好了代碼以后，復制下改完的代碼，在首頁裝修頁面店招區域，選擇編輯--自定義店招--在自定義編輯器里選擇源碼按鈕，將代碼粘貼進去，然后底部高度設置為120。如下圖所示：
安裝完了以后注意點擊保存按鈕。
二、怎么安裝自定義導航？
下面的代碼就是本次需要安裝的導航CSS代碼：
1. .menu-list.menu{border-color:white;border:none;background:none;}
2. .all-cats{background:none;max-width:200px;}
3. .skin-box-bd.menu-list{width:700px;margin-left:50px;}
4. .skin-box-bd.menu-list,.skin-box-bd{float:left;background:none;}
5. .skin-box-bd.menu-list.link{background:none;}
6. .all-cats.link{background:none;}
7. .popup-content,.popup-content.cats-tree.snd-pop-inner{background:black;opacity:0.9;}
8. .menu-list.menu.title{color:#FFFFFF;}
9. .all-cats.link.title{color:#FFFFFF;margin:00060px;font-family:microsoftyahei;font-weight:bold;font-size:16px;}
10. .popup-content.cat-name{color:#FFFFFF;}
11. .popup-content.cats-tree.snd-pop-inner.cat-name,.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda{color:#FFFFFF;}
12. .menu-list.menu-hover.link{background:none;}.all-cats-hover.link{background:none;}
13. .popup-content.cats-tree.cat-hd-hover{background:#FF0000;}
14. .popup-content.cats-tree.snd-cat-hd-hover{background:#FF0000;}
15. .menu-popup-cats.sub-cat-hover{background:#FF0000;}
16. .menu-list.menu-hover.title{color:#FFFF00;}.all-cats-hover.link.title{color:#FFFF00;}
17. .popup-content.cat-hd-hover.cat-name{color:#FFFFFF;}
18. .popup-content.cats-tree.snd-cat-hd-hover.cat-name,.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda:hover{color:#FFFFFF;}
19. .menu-popup-cats.sub-cat-hover.cat-name{color:#FFFFFF;}
20. .skin-box-bd.menu-list.menu-selected.link.title{background:none;color:#FFFF00;}
21. .skin-box-bd.menu-list.menu-selected.link{background:none;}
22. .all-cats.link{border-color:white;border:none;}.menu-list.menu{border-color:white;border:none;}
23. .skin-box-bd.all-cats-popup{width:200px;}.skin-box-bd.popup-content.cats-tree.fst-cat{width:200px;text-align:center;height:40px;line-height:40px;}
24. .skin-box-bd.popup-content.cats-tree.fst-cat.cat-name{padding-left:20px;text-align:center;height:40px;line-height:40px;}
25. .popup-content.cats-tree.has-children.fst-cat-icon{margin-top:15px;}.popup-content.cats-tree.snd-pop-inner{padding:0;}
26. .skin-box-bd.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda,.popup-content.cats-tree.snd-cat-hd,.popup-content.cats-tree.snd-cat-hd,.popup-content.cats-tree.fst-cat-hd{text-align:left;height:40px;line-height:40px;border-bottom:1pxsolid#666;}
復制上面或者下載文件里的代碼，在裝修頁面鼠標放在導航區域出現編輯按鈕，點擊編輯，彈出導航設置對話框，這里您可以設置需要在導航里顯示的分類或者頁面。
然后點擊顯示設置，彈出一個空白的框，將上面復制的代碼直接粘貼進去就可以了。最后注意保存。
最后裝修效果：
這樣是不是很簡單阿?呵呵，只要用心去搞的話，是比較容易的。所以各位同學都要在課上學好每一點內容，最后廣州淘寶美工培訓希望大家都能有一個好的發展。
登陸淘寶網站，進入賣家中心--店鋪裝修--頂部“裝修“--下拉”樣式管理“--選擇背景設置，如下圖：
一、怎么安裝自定義店招？
進入頁頭設置頁面，頁頭背景色不做設置，下面的頁頭背景圖上傳剛才下載保存到桌面的頁頭背景素材，上傳后背景顯示選擇橫向平鋪，背景對齊選擇居中。
背景設置上方有個頁頭下邊距10像素的選項，一般選擇關閉即可取消頁頭與頁面的間隔，如果選擇開啟會有10像素的間隔。
所有的設置好了以后注意點擊保存，然后返回裝修頁面。
復制下面的店招自定義代碼：
1. <divstyle="width:950px;height:120px;">
2. <divstyle="width:950px;text-align:center;height:85px;padding-top:10px;">
3. <divstyle="float:left;width:760px;">
4. <h1style="line-height:60px;font-size:38px;">
5. <ahref="#"style="font-family:微軟雅黑;color:white;text-shadow:2px2px0#444;">淘寶店鋪名字</a></h1>
6. <h2style="color:white;font-size:14px;text-shadow:1px1px0#555;">
7. ————————淘寶店鋪簡單介紹，簡單寫一下即可————————</h2>
8. </div>
9. </div>
10. <divstyle="width:950px;height:22px;clear:both;overflow:hidden;">
11. <divstyle="position:relative;padding-left:25px;width:350px;background:url(http://img01.taobaocdn.com/imgextra/i1/1015393481/T2eIoKXnpXXXXXXXXX-1015393481.gif)no-repeat5px5px;float:right;height:22px;overflow:hidden;">
12. <divclass="J_TWidget"data-widget-config="{contentCls:bbs-taobaoux-com,hasTriggers:false,effect:scrollx,easing:easeOutStrong,interval:5,duration:1}"data-widget-type="Slide"style="position:relative;">
13. <ulclass="bbs-taobaoux-com"style="width:999999px;left:-573.994px;">
14. <liclass="-_-switchable-panel-internal539"style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
15. <ahref="第一個公告鏈接"style="color:yellow;"target="_blank">第一個公告內容</a></li>
16. <liclass="-_-switchable-panel-internal539"style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
17. <ahref="第三個公告鏈接"style="color:yellow;"target="_blank">第二個公告內容</a></li>
18. <liclass="-_-switchable-panel-internal539"style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
19. <ahref="第三個公告鏈接"style="color:yellow;"target="_blank">第三個公告內容</a></li>
20. </ul>
21. </div>
22. </div>
23. </div>
24. </div>
注意：不要復制代碼前面的數字。需要修改的內容我們都已經在代碼里標明，您直接修改代碼即可。
改好了代碼以后，復制下改完的代碼，在首頁裝修頁面店招區域，選擇編輯--自定義店招--在自定義編輯器里選擇源碼按鈕，將代碼粘貼進去，然后底部高度設置為120。如下圖所示：
安裝完了以后注意點擊保存按鈕。
二、怎么安裝自定義導航？
下面的代碼就是本次需要安裝的導航CSS代碼：
1. .menu-list.menu{border-color:white;border:none;background:none;}
2. .all-cats{background:none;max-width:200px;}
3. .skin-box-bd.menu-list{width:700px;margin-left:50px;}
4. .skin-box-bd.menu-list,.skin-box-bd{float:left;background:none;}
5. .skin-box-bd.menu-list.link{background:none;}
6. .all-cats.link{background:none;}
7. .popup-content,.popup-content.cats-tree.snd-pop-inner{background:black;opacity:0.9;}
8. .menu-list.menu.title{color:#FFFFFF;}
9. .all-cats.link.title{color:#FFFFFF;margin:00060px;font-family:microsoftyahei;font-weight:bold;font-size:16px;}
10. .popup-content.cat-name{color:#FFFFFF;}
11. .popup-content.cats-tree.snd-pop-inner.cat-name,.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda{color:#FFFFFF;}
12. .menu-list.menu-hover.link{background:none;}.all-cats-hover.link{background:none;}
13. .popup-content.cats-tree.cat-hd-hover{background:#FF0000;}
14. .popup-content.cats-tree.snd-cat-hd-hover{background:#FF0000;}
15. .menu-popup-cats.sub-cat-hover{background:#FF0000;}
16. .menu-list.menu-hover.title{color:#FFFF00;}.all-cats-hover.link.title{color:#FFFF00;}
17. .popup-content.cat-hd-hover.cat-name{color:#FFFFFF;}
18. .popup-content.cats-tree.snd-cat-hd-hover.cat-name,.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda:hover{color:#FFFFFF;}
19. .menu-popup-cats.sub-cat-hover.cat-name{color:#FFFFFF;}
20. .skin-box-bd.menu-list.menu-selected.link.title{background:none;color:#FFFF00;}
21. .skin-box-bd.menu-list.menu-selected.link{background:none;}
22. .all-cats.link{border-color:white;border:none;}.menu-list.menu{border-color:white;border:none;}
23. .skin-box-bd.all-cats-popup{width:200px;}.skin-box-bd.popup-content.cats-tree.fst-cat{width:200px;text-align:center;height:40px;line-height:40px;}
24. .skin-box-bd.popup-content.cats-tree.fst-cat.cat-name{padding-left:20px;text-align:center;height:40px;line-height:40px;}
25. .popup-content.cats-tree.has-children.fst-cat-icon{margin-top:15px;}.popup-content.cats-tree.snd-pop-inner{padding:0;}
26. .skin-box-bd.popup-content.cats-tree.fst-cat.snd-pop.snd-cat-hda,.popup-content.cats-tree.snd-cat-hd,.popup-content.cats-tree.snd-cat-hd,.popup-content.cats-tree.fst-cat-hd{text-align:left;height:40px;line-height:40px;border-bottom:1pxsolid#666;}
復制上面或者下載文件里的代碼，在裝修頁面鼠標放在導航區域出現編輯按鈕，點擊編輯，彈出導航設置對話框，這里您可以設置需要在導航里顯示的分類或者頁面。
然后點擊顯示設置，彈出一個空白的框，將上面復制的代碼直接粘貼進去就可以了。最后注意保存。
最后裝修效果：
這樣是不是很簡單阿?呵呵，只要用心去搞的話，是比較容易的。所以各位同學都要在課上學好每一點內容，最后廣州淘寶美工培訓希望大家都能有一個好的發展。
樂發網超市批發網提供超市貨源信息,超市采購進貨渠道。超市進貨網提供成都食品批發,日用百貨批發信息、微信淘寶網店超市采購信息和超市加盟信息.打造國內超市采購商與批發市場供應廠商搭建網上批發市場平臺,是全國批發市場行業中電子商務權威性網站。
本文來源： 如何安裝自定義店招和導航？
