如何設定店鋪導航條顏色

  現在有很多人註冊成為了淘寶網的店家,然而裝修的問題讓這些新手店主十分頭疼。在裝修過程中該如何設定店鋪的導航條顏色呢。下面讓大家好好學習一下設定的方法。

  導航條的作用:

  導航條是網頁設計中不可缺少的部分,它是指通過一定的技術手段,為網站的訪問者提供一定的途徑,使其可以方便地訪問到所需的內容,是人們瀏覽網站時可以快速從一個頁面轉到另一個頁面的快速通道。利用導航條,我們就可以快速找到我們想要瀏覽的頁面。

  導航條的目的是讓網站的層次結構以一種有條理的方式清晰展示,並引導使用者毫不費力地找到並管理資訊,讓使用者在瀏覽網站過程中不至迷失。

  設定導航條顏色的方法:

  1、進入賣家中心,點選“店鋪裝修”,即可進入裝修介面。將滑鼠放置導航條位置,即可出現編輯按鈕,點選“編輯”


 

  2、進入編輯介面後,會出現兩個選項,“導航設定”和“顯示設定”,“導航設定”就是如下圖所示新增或刪除導航條的內容,或者將某一項上移或下移。在此重點講解一下“顯示設定”


 

  3、導航條的“顯示設定”是通過一些固定的程式碼來實現設定的。在此我們設定一個導航條的導航條背景色為綠色,首頁/店鋪動態背景色為白色,首頁/店鋪動態右邊線為墨綠色,首頁/店鋪動態文字顏色藍紫色,所有分類背景色牡丹紅,所有分類右邊線青銅色,所有分類文字顏色黃色。當然這個搭配肯定不會美觀的,只是舉這麼個例子。給位可以根據自己的喜好和美觀來搭配顏色。規定好顏色之後,就可以把以下程式碼編輯到“顯示設定”的輸入框內。點選“確認”即可完成設定。其中/* */內的文字為註釋文字,不影響程式碼內容。


 

  /* 導航條背景色*/

  .skin-box-bd .menu-list{background: none repeat scroll 0 0 #00ad08;}

  /*首頁/店鋪動態背景色*/

  .skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #FFFFFF;}

  /*首頁/店鋪動態右邊線*/

  .skin-box-bd .menu-list .menu{ #006205 solid;}

  /*首頁/店鋪動態文字顏色*/

  .skin-box-bd .menu-list .menu .title{color: #9F5F9F}

  /*所有分類背景色*/

  .all-cats .link{background: none repeat scroll 0 0 #FF00FF;}

  /*所有分類右邊線*/

  .all-cats .link{ #8C7853 solid;}

  /*所有分類文字顏色*/

  .skin-box-bd .all-cats .title{color: #FFFF00}

  附:顏色程式碼

  1 白顏色 #FFFFFF 2 紅顏色 #FF0000 3 綠顏色 #00FF00

  4 藍顏色 #0000FF 5 牡丹紅 #FF00FF 6 青顏色 #00FFFF

  7 黃顏色 #FFFF00 8 黑顏色 #000000 9 海顏藍 #70DB93

  10 巧克力色 #5C3317 11 藍紫色 #9F5F9F 12 黃銅色 #B5A642

  13 亮金色 #D9D919 14 棕色 #A67D3D 15 青銅色 #8C7853

  16 2號青銅色 #A67D3D 17 士官服藍色 #5F9F9F 18 冷銅色 #D98719

  19 銅色 #B87333 20 珊瑚紅 #FF7F00 21 紫藍色 #42426F

  22 深棕 #5C4033 23 深綠 #2F4F2F 24 深銅綠色 #4A766E

  25 深橄欖綠 #4F4F2F 26 深蘭花色 #9932CD 27 深紫色 #871F78

  28 深石板藍 #6B238E 29 深鉛灰色 #2F4F4F 30 深棕褐色 #97694F

  32 深綠松石色 #7093DB 33 暗木色 #855E42 34 淡灰色 #545454

  35 土灰玫瑰紅色#856363 36 長石色 #D19275 37 火磚色 #8E2323

  38 森林綠 #238E23 39 金色 #CD7F32 40 鮮黃色 #DBDB70

  41 灰色 #C0C0C0 42 銅綠色 #527F76 43 青黃色 #93DB70

  44 獵人綠 #215E21 45 印度紅 #4E2F2F 46 土黃色 #9F9F5F

  47 淺藍色 #C0D9D9 48 淺灰色 #A8A8A8 49 淺鋼藍色 #8F8FBD

  59 淺木色 #E9C2A6 60 石灰綠色 #32CD32 61 桔黃色 #E47833

  62 褐紅色 #8E236B 63 中海藍色 #32CD99 64 中藍色 #3232CD

  65 中森林綠 #6B8E23 66 中鮮黃色 #EAEAAE 67 中蘭花色 #9370DB

  68 中海綠色 #426F42 69 中石板藍色 #7F00FF 70 中春綠色 #7FFF00

  71 中綠松石色 #70DBDB 72 中紫紅色 #DB7093 73 中木色 #A68064

  74 深藏青色 #2F2F4F 75 海軍藍 #23238E 76 霓虹籃 #4D4DFF

  77 霓虹粉紅 #FF6EC7 78 新深藏青色 #00009C 79 新棕褐色 #EBC79E

  80 暗金黃色 #CFB53B 81 橙色 #FF7F00 82 橙紅色 #FF2400

  83 淡紫色 #DB70DB 84 淺綠色 #8FBC8F 85 粉紅色 #BC8F8F

  86 李子色 #EAADEA 87 石英色 #D9D9F3 88 豔藍色 #5959AB

  89 鮭魚色 #6F4242 90 猩紅色 #BC1717 91 海綠色 #238E68

  92 半甜巧克力色#6B4226 93 赭色 #8E6B23 94 銀色 #E6E8FA

  95 天藍 #3299CC 96 石板藍 #007FFF 97 豔粉紅色 #FF1CAE

  98 春綠色 #00FF7F 99 鋼藍色 #236B8E 100 亮天藍色 #38B0DE

  101 棕褐色 #DB9370 102 紫紅色 #D8BFD8 103 石板藍色 #ADEAEA

  104 濃深棕色 #5C4033 105 淡淺灰色 #CDCDCD 106 紫羅蘭色 #4F2F4F

  107 紫羅蘭紅色 #CC3299 108 麥黃色 #D8D8BF 109 黃綠色 #99CC

  以上就是設定導航條顏色的方法了。