淘宝店铺导航栏CSS代码之分步详解

  1. /* 第一部分、静态背景颜色 */
  2. /* 1、首页/店铺动态/其它导航类目的背景色,这里设为红色 */
  3. .skin-box-bd .menu-list .link{background:red;}
  4. /* 2、所有分类的背景色(最左边的),一样设为红色 */
  5. .all-cats .link{background:red;}
  6. /* 到这里,发觉右边的颜色还没有变呢,好的,接着下一步 */
  7. /* 3、导航条整个分类段背景色,还是要设为红色,整体布局好看些 */
  8. .skin-box-bd .menu-list{background:red;}
  9. /* 注意观察,最右边还有一丝地方没有变 */
  10. /* 4、导航条背景色(是最底层了吧),修补导航右侧缺口,再设为红色 */
  11. .skin-box-bd{background:red;}
  12. /* 小结:有点成功感了!换换其它颜色试试看吧 */
  13. /* 背景色最好搭配页头背景图,才能整体大气美观 */
  14.  
  15. /* 第二部分、分隔线、静态文字的颜色 */
  16. /* 5、首页等分类的右边的分隔线颜色,设为白色 */
  17. .menu-list .menu{border-color:white;}
  18. /* 6、所有分类的右边的分隔线颜色,设为白色 */
  19. .all-cats .link{border-color:white;}
  20. /* 7、首页/店铺动态/其它导航类目的文字颜色 */
  21. .menu-list .menu .title{color:yellow;}
  22. /* 8、所有分类的文字颜色(最左边那个),*/
  23. .all-cats .link .title{color:yellow;}
  24. /* 小结:其实原来默认文字的颜色也挺好的 */
  25.  
  26. /* 第三部分、分类下的颜色 */
  27. /* 9、二级分类的背景色,设为灰色 */
  28. .popup-content{background:gray;}
  29. /* 10、三级分类的背景色,我设为深灰色 */
  30. .popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
  31. /* 11、二级分类的文字颜色,设为黄色 */
  32. .popup-content .cat-name{color:yellow;}
  33. /* 12、三级分类的文字颜色。(如果后面要鼠标滑过变色<21.22>,这句要写) */
  34. .popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
  35. /* 小结:上面这句不写,和二级分类颜色是一样的 */
  36.  
  37. /* 第四部分、鼠标滑过变背景色 */
  38. /* 13、鼠标滑过首页/店铺动态/其它导航类目变换背景色,这设为蓝色 */
  39. .menu-list .menu-hover .link{background:blue;}
  40. /* 14、鼠标滑过所有分类(最左边那个)变换背景色,这同样设为蓝色 */
  41. .all-cats-hover .link{background:blue;}
  42. /* 15、鼠标滑过所有分类下的二级分类变换背景色,这设为蓝色 */
  43. .popup-content .cats-tree .cat-hd-hover{background:blue;}
  44. /* 16、鼠标滑过所有分类下的三级分类变换背景色,这设为深蓝色 */
  45. .popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
  46. /* 17、鼠标滑过导航类目下的宝贝分类变换背景色,这设为蓝色 */
  47. .menu-popup-cats .sub-cat-hover{background:blue;}
  48. /* 小结:这个所有分类,与首页后面的,是要分开设计的 */
  49.  
  50. /* 第五部分、鼠标滑过变文字颜色 */
  51. /* 18、鼠标滑过首页/店铺动态/其它导航类目变换文字颜色,这设为红色 */
  52. .menu-list .menu-hover .title{color:red;}
  53. /* 19、鼠标滑过所有分类(最左边那个)变换文字颜色,这同样设为红色 */
  54. .all-cats-hover .link .title{color:red;}
  55. /* 20、鼠标滑过导航类目下的宝贝分类变换文字颜色,这设为红色 */
  56. .menu-popup-cats .sub-cat-hover .cat-name{color:red;}
  57. /* 21、鼠标滑过所有分类下的二级分类变换文字颜色,这设为红色 */
  58.  .popup-content .cat-hd-hover .cat-name{color:red;}
  59. /* 22、鼠标滑过所有分类下的三级分类变换文字颜色,这设为红色 */
  60.  .popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
  61. /* 小结:这部分还是默认白色的好看 */
  62.  
  63. /* 第六部分、导航项目激活状态 */
  64. /* 23、激活项目的文字背景色(难看,所以none)、文字颜色(选白色) */
  65. .skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
  66. /* 24、激活项目的项目背景色(项目框),选紫色 */
  67. .skin-box-bd .menu-list .menu-selected .link{background:purple;}
  68. /* 小结:最多人忽视这部分,其实也是很多人想知道的 */
  69.  
  70. /* 总结:如果可以的话,搞个傻瓜式的编辑器,就不简单了吗 */

 

 

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

1:颜色代码可以是英文单词,如white(白)、black(黑)、red(红),

     也可以是白色#ffffff、黑色#000000等等表示。

2:背景色也可用图片,如:{background:url(图片地址);}

发布者

虚妄的存在感

我尊重你的存在感,但我鄙视你虚妄的存在感。