淘寶大氣時(shí)尚通欄頁(yè)頭CSS導(dǎo)航代碼及使用教程

老y

第一步：頁(yè)頭背景設(shè)置與安裝方法

點(diǎn)擊下載需要的素材--

--將素材下載并保存到您的電腦桌面。

登陸淘寶網(wǎng)站，進(jìn)入賣家中心--店鋪裝修--頂部“裝修“--下拉”樣式管理“--選擇背景設(shè)置，如下圖：

進(jìn)入頁(yè)頭設(shè)置頁(yè)面，頁(yè)頭背景色不做設(shè)置，下面的頁(yè)頭背景圖上傳剛才下載保存到桌面的頁(yè)頭背景素材，上傳后背景顯示選擇橫向平鋪，背景對(duì)齊選擇居中。
背景設(shè)置上方有個(gè)頁(yè)頭下邊距10像素的選項(xiàng)，一般選擇關(guān)閉即可取消頁(yè)頭與頁(yè)面的間隔，如果選擇開啟會(huì)有10像素的間隔。
所有的設(shè)置好了以后注意點(diǎn)擊保存，然后返回裝修頁(yè)面。
第二步：店招安裝（我們使用自定義店招）

復(fù)制下面的店招自定義代碼：

• <div style="width:950px;height:120px;">
•     <div style="width:950px;text-align:center;height:85px;padding-top:10px;">
•         <div style="float:left;width:760px;">
•             <h1 style="line-height:60px;font-size:38px;">
•                 <a href="#" style="font-family:微軟雅黑;color:white;text-shadow:2px 2px 0 #444;">淘寶店鋪名字</a></h1>
•             <h2 style="color:white;font-size:14px;text-shadow:1px 1px 0 #555;">
•                 ———————— 淘寶店鋪簡(jiǎn)單介紹，簡(jiǎn)單寫一下即可 ————————</h2>
•         </div>
•     </div>
•     <div style="width:950px;height:22px;clear:both;overflow:hidden;">
•         <div style="position:relative;padding-left:25px;width:350px;background:url() no-repeat 5px 5px;float:right;height:22px;overflow:hidden;">
•             <div class="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;">
•                 <ul class="bbs-taobaoux-com" style="width:999999px;left:-573.994px;">
•                     <li class="-_-switchable-panel-internal539" style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
•                         <a href="第一個(gè)公告鏈接" style="color:yellow;" target="_blank">第一個(gè)公告內(nèi)容</a></li>
•                     <li class="-_-switchable-panel-internal539" style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
•                         <a href="第三個(gè)公告鏈接" style="color:yellow;" target="_blank">第二個(gè)公告內(nèi)容</a></li>
•                     <li class="-_-switchable-panel-internal539" style="line-height:20px;width:580px;display:block;height:20px;font-size:12px;overflow:hidden;text-decoration:none;float:left;">
•                         <a href="第三個(gè)公告鏈接" style="color:yellow;" target="_blank">第三個(gè)公告內(nèi)容</a></li>
•                 </ul>
•             </div>
•         </div>
•     </div>
• </div>
  

注意：不要復(fù)制代碼前面的數(shù)字。如果直接復(fù)制不好用，可以在此處下載店招自定義代碼 1-131231213P2.rar (876 Bytes, 下載次數(shù): 517)

2014-1-1 22:09 上傳

點(diǎn)擊文件名下載附件

。需要修改的內(nèi)容我們都已經(jīng)在代碼里標(biāo)明，您直接修改代碼即可。

改好了代碼以后，復(fù)制下改完的代碼，在首頁(yè)裝修頁(yè)面店招區(qū)域，選擇編輯--自定義店招--在自定義編輯器里選擇源碼按鈕，將代碼粘貼進(jìn)去，然后底部高度設(shè)置為120。如下圖所示：

安裝完了以后注意點(diǎn)擊保存按鈕。
第三步：安裝導(dǎo)航CSS代碼

下面的代碼就是本次需要安裝的核心代碼導(dǎo)航CSS代碼：

• .menu-list .menu{border-color:white;border:none;background:none;}
• .all-cats{background:none;max-width:200px;}
• .skin-box-bd .menu-list{width:700px;margin-left:50px;}
• .skin-box-bd .menu-list,.skin-box-bd{float:left;background:none;}
• .skin-box-bd .menu-list .link{background:none;}
• .all-cats .link{background:none;}
• .popup-content,.popup-content .cats-tree .snd-pop-inner{background:black;opacity:0.9;}
• .menu-list .menu .title{color:#FFFFFF;}
• .all-cats .link .title{color:#FFFFFF;margin:0 0 0 60px;font-family:microsoft yahei;font-weight:bold;font-size:16px;}
• .popup-content .cat-name{color:#FFFFFF;}
• .popup-content .cats-tree .snd-pop-inner .cat-name,.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a{color:#FFFFFF;}
• .menu-list .menu-hover .link{background:none;}.all-cats-hover .link{background:none;}
• .popup-content .cats-tree .cat-hd-hover{background:#FF0000;}
• .popup-content .cats-tree .snd-cat-hd-hover{background:#FF0000;}
• .menu-popup-cats .sub-cat-hover{background:#FF0000;}
• .menu-list .menu-hover .title{color:#FFFF00;}.all-cats-hover .link .title{color:#FFFF00;}
• .popup-content .cat-hd-hover .cat-name{color:#FFFFFF;}
• .popup-content .cats-tree .snd-cat-hd-hover .cat-name,.popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a:hover{color:#FFFFFF;}
• .menu-popup-cats .sub-cat-hover .cat-name{color:#FFFFFF;}
• .skin-box-bd .menu-list .menu-selected .link .title{background:none;color:#FFFF00;}
• .skin-box-bd .menu-list .menu-selected .link{background:none;}
• .all-cats .link{border-color:white;border:none;}.menu-list .menu{border-color:white;border:none;}
• .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;}
• .skin-box-bd .popup-content .cats-tree .fst-cat .cat-name{padding-left:20px;text-align:center;height:40px;line-height:40px;}
• .popup-content .cats-tree .has-children .fst-cat-icon{margin-top:15px;}.popup-content .cats-tree .snd-pop-inner{padding:0;}
• .skin-box-bd .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a,.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:1px solid #666;}
  

   注意不要復(fù)制前面的數(shù)字，您也可以直接在此處下載本代碼 1-131231214912.rar (622 Bytes, 下載次數(shù): 511)

2014-1-1 22:11 上傳

點(diǎn)擊文件名下載附件

。

復(fù)制上面或者下載文件里的代碼，在裝修頁(yè)面鼠標(biāo)放在導(dǎo)航區(qū)域出現(xiàn)編輯按鈕，點(diǎn)擊編輯，彈出導(dǎo)航設(shè)置對(duì)話框，這里您可以設(shè)置需要在導(dǎo)航里顯示的分類或者頁(yè)面。

然后點(diǎn)擊顯示設(shè)置，彈出一個(gè)空白的框，將上面復(fù)制的代碼直接粘貼進(jìn)去就可以了。最后注意保存。

最后裝修效果：

瀟灑哥

基礎(chǔ)版 可以設(shè)置通欄店招嗎 我看到有人寫代碼說(shuō)可以  但是自己穿上去 是背景圖的

愛(ài)C深

請(qǐng)問(wèn)：公告鏈接是什么意思？