9年網站建設經驗,寧波地區著名的網站建設公司!24小時咨詢熱線:137 3217 3747
   寧波總部  |  臺州  |  溫州  |  紹興
您的位置南粤36选7: >> 網站建設 >> 寧波網站建設 網絡營銷  |   寧波網站建設  |   網站優化  |   寧波網頁設計  |   我們觀點  |  
淘寶店鋪設計之導航CSS代碼使用修改技巧
作者://www.aeipo.com  來源:寧波網絡公司/寧波網站建設——三樂設計  發布時間:2013-08-08  閱讀次數:4973 【關閉本頁】

1.修改導航分類下面的背景色,代碼如下:

.skin-box-bd .link{background:#000000;}

修改導航分類下面的圖片,代碼如下:

.skin-box-bd .link{background:url(圖片鏈接);}


2.修改整個導航的背景色

.skin-box-bd .menu-list{background:#000000;}

改整個導航背景為圖片

.skin-box-bd .menu-list{background:url(圖片鏈接);}


3.修改最右邊留下的一小塊,2里提到的,代碼如下:

.skin-box-bd{background:#000000;}

修改成圖片的代碼如下:

.skin-box-bd{background:url(圖片鏈接);}


4.字外加色:

.skin-box-bd .menu-list .menu-selected .link{background:#000000;}


5.字里加色

.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}

字外+字里=全部!

----------------------------------------------------------------------------------------

1.導航背景色代碼(除去“所有分類”)如下

.menu-list .link{background:#000000;}


2.導航欄文字(除去“所有分類”)如下

.menu-list .menu .title{color:#顏色代碼;font-size:字號px;}


3.“所有分類”的背景色代碼如下:

.all-cats .link{background:#000000;}


4.“所有分類”的文字代碼如下:

.all-cats .link .title{color:#顏色代碼;font-size:字號px;}


最新代碼,解決字體改大后導航右側消失的情況!
代碼如下:
.all-cats .link .title{font-size:字號px;}.all-cats .link {background:#3BAFFF;margin:0;padding:0px 3px;}
  字號最大為21,繼續變大右側導航將消失!該代碼還不是很完善,我們會繼續研究!


5.二級分類文字代碼如下:

.popup-content .cats-tree .fst-cat .cat-name{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}


6.二級分類背景代碼如下:

.popup-content{background:#000000;}


7.三級分類文字代碼(除去“所有寶貝”分類)如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號px;color:#顏色代碼;font-weight:bold/bolder/normal;}


8.三級分類文字代碼(包括“所有寶貝”分類字體大?。┱庋臀薹ǜ謀渥痔逖丈?,我們會繼續完善該代碼!如下
.popup-content .cats-tree .snd-pop-inner{font-size:字號px;color:#顏色;} 


9.三級分類背景代碼:

.popup-content .cats-tree .snd-pop-inner{background:#000000;}


10.一級導航分類(除去“所有寶貝”分類)分隔線顏色代碼如下:

.menu-list .menu{border-color:#000000;}


11.一級導航“所有寶貝”分類分隔線顏色代碼如下:

.all-cats .link{border-color:#000000;}


12.一級導航分類的寬度修改代碼如下:

.menu-list .menu{background:#顏色;margin:0;padding:0px 增加的寬度px;}


13.鼠標滑過一級分類導航文字變換背景色代碼如下:

.menu-list .menu-hover .link{background:#000000;}


14.鼠標滑過一級分類導航文字變換顏色代碼如下:

.menu-list .menu-hover .link .title{color:#FFFFFF;}


15.鼠標滑過二級分類導航文字變換背景色代碼如下:

.popup-content .cats-tree .cat-hd-hover{background:#000000;}


16.鼠標滑過二級分類導航文字變換顏色代碼如下:

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}


17.鼠標滑過三級分類導航文字變換背景色代碼如下:

.popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}


18.二級分類上加空間代碼如下:

.popup-content .cats-tree{margin:0 0 50px 0;}



19.修改“所有寶貝”右邊小圖標代碼如下:

.all-cats .link .popup-icon{background:url(圖片連接);}


20.修改二級分類右側圖標代碼如下(有三級分類才會顯示):

.popup-content .cats-tree .fst-cat-icon{background:url(圖片連接);}


22.在三級分類前加上小塊白色代碼如下:

.popup-content .cats-tree .snd-cat-icon{display:block;height:3px;width:3px;}


四、最后還有一個發布不顯示效果的解決方法!

導航修改好代碼之后,預覽有效果,但是發布之后還是顯示原來的效果,沒有任何變化!

解決的方法是在你修改好代碼之后,預覽有效果了,之后就關閉“店鋪裝修”頁面,之后重新打開再點“發布”就會顯示效果了!

如果你不知道哪個是“店鋪裝修”頁面,那就直接關閉瀏覽器,重新進“店鋪裝修”那個點“發布”就OK咯!


 

隱藏導航上,所有分類的導航: .all-cats{display:block;overflow:hidden;width:0;height:0;}
這個改完 所有分類是會被隱藏。但是如果你導航條用了其他顏色,導致和原來模版顏色不一樣。那么可以添加一行: .skin-box-bd{width:200px;}
責任編輯:南粤36选7      

上一篇:一點手機網站設計的經驗之談  [2013-10-29] 下一篇:三樂設計網絡公司管理員淺談服務器.NET偽靜態設置  [2013-03-25]

  相關文章
  asp生成靜態html技術之二 [2012-12-06]   網頁設計師,程序員都能用到的js判斷文本,單… [2012-12-12]
  寧波某獵頭網站策劃方案 [2012-12-17]   網站建設中JS單選,多選框,文本框控制 [2012-12-19]
  三樂設計網絡公司管理員淺談服務器.NET偽靜… [2013-03-25]   一點手機網站設計的經驗之談 [2013-10-29]
  手機網站綁定微信接口代碼asp版,php版 [2013-12-04]   微信接口完整代碼php版 [2013-12-04]
  程序員考慮的WampServer修改默認web根目錄實… [2013-12-06]
  網絡營銷  
  設計當中的OPP卡頭袋的設計…
  2014年1月21日大量網站域名…
  2014年1月百度更新新版首頁…
  寧波網站建設淺談微信5.0正…
  微信公眾平臺開發api消息接…
  360搜索之360百科服務啟用…
  雅虎新版主頁支持主流各大…
  寧波網站建設  
  程序員考慮的WampServer修…
  微信接口完整代碼php版
  手機網站綁定微信接口代碼…
  一點手機網站設計的經驗之…
  淘寶店鋪設計之導航CSS代碼…
  三樂設計網絡公司管理員淺…
  網站建設中JS單選,多選框…
  網站優化  
  淺談寧波網站建設中的微信…
  優化網站必須設計404錯誤頁…
  揭秘最新百度更新規律
  SEO排名步驟
  體驗SEO內部優化結構的方法…
  揭秘網站天天被收錄的3大招…
  企業網站中適合應用h1,h2,…
  寧波網頁設計  
  怎么解決手機網站微信內置…
  手機網站建設時如何判斷微…
  設計師的福音快速瀏覽全球…
  寧波某家俬網上商城網站設…
  浙江大學寧波理工學院文明…
  工商銀行滿意度有獎調查問…
  清潔機器人iRobot網站設計…
{ganrao}