淘宝美工论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 2735|回复: 11
收起左侧

淘宝导航样式CSS代码,最全的代码自藏

[复制链接]
  • TA的每日心情
    不爽
    2015-6-22 11:24
  • 签到天数: 20 天

    连续签到: 1 天

    [LV.4]初窥堂奥

    16

    主题

    61

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31196

    发表于 2015-11-6 01:03:45 | 显示全部楼层 |阅读模式
    * 1、首页/店铺动态/其它导航类目的背景色,这里设为红色 *
    .skin-box-bd .menu-list .link{background:red;}
    /* 2、所有分类的背景色(最左边的),一样设为红色 *
    .all-cats .link{background:red;}
    /* 到这里,发觉右边的颜色还没有变呢,好的,接着下一步 *
    /* 3、导航条整个分类段背景色,还是要设为红色,整体布局好看些 *
    .skin-box-bd .menu-list{background:red;}
    /* 注意观察,最右边还有一丝地方没有变 *
    /* 4、导航条背景色(是最底层了吧),修补导航右侧缺口,再设为红色 *
    .skin-box-bd{background:red;}
    /* 小结:有点成功感了!换换其它颜色试试看吧 *
    /* 背景色最好搭配页头背景图,才能整体大气美观 *


    /* 第二部分、分隔线、静态文字的颜色 *
    /* 5、首页等分类的右边的分隔线颜色,设为白色 *
    .menu-list .menu{border-color:white;}
    /* 6、所有分类的右边的分隔线颜色,设为白色 *
    .all-cats .link{border-color:white;}
    /* 7、首页/店铺动态/其它导航类目的文字颜色 *
    .menu-list .menu .title{color:yellow;}
    /* 8、所有分类的文字颜色(最左边那个),*
    .all-cats .link .title{color:yellow;}
    /* 小结:其实原来默认文字的颜色也挺好的 *

    /* 第三部分、分类下的颜色 *
    /* 9、二级分类的背景色,设为灰色 *
    .popup-content{background:gray;}
    /* 10、三级分类的背景色,我设为深灰色 *
    .popup-content .cats-tree .snd-pop-inner{background:#504f4f;}
    /* 11、二级分类的文字颜色,设为黄色 *
    .popup-content .cat-name{color:yellow;}
    /* 12、三级分类的文字颜色。(如果后面要鼠标滑过变色<21.22>,这句要写) *
    .popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;}
    /* 小结:上面这句不写,和二级分类颜色是一样的 *

    /* 第四部分、鼠标滑过变背景色 *
    /* 13、鼠标滑过首页/店铺动态/其它导航类目变换背景色,这设为蓝色 *
    .menu-list .menu-hover .link{background:blue;}
    /* 14、鼠标滑过所有分类(最左边那个)变换背景色,这同样设为蓝色 *
    .all-cats-hover .link{background:blue;}
    /* 15、鼠标滑过所有分类下的二级分类变换背景色,这设为蓝色 *
    .popup-content .cats-tree .cat-hd-hover{background:blue;}
    /* 16、鼠标滑过所有分类下的三级分类变换背景色,这设为深蓝色 *
    .popup-content .cats-tree .snd-cat-hd-hover{background:#160595;}
    /* 17、鼠标滑过导航类目下的宝贝分类变换背景色,这设为蓝色 *
    .menu-popup-cats .sub-cat-hover{background:blue;}
    /* 小结:这个所有分类,与首页后面的,是要分开设计的 *

    /* 第五部分、鼠标滑过变文字颜色 *
    /* 18、鼠标滑过首页/店铺动态/其它导航类目变换文字颜色,这设为红色 *
    .menu-list .menu-hover .title{color:red;}
    /* 19、鼠标滑过所有分类(最左边那个)变换文字颜色,这同样设为红色 *
    .all-cats-hover .link .title{color:red;}
    /* 20、鼠标滑过导航类目下的宝贝分类变换文字颜色,这设为红色 *
    .menu-popup-cats .sub-cat-hover .cat-name{color:red;}
    /* 21、鼠标滑过所有分类下的二级分类变换文字颜色,这设为红色 *
      .popup-content .cat-hd-hover .cat-name{color:red;}
    /* 22、鼠标滑过所有分类下的三级分类变换文字颜色,这设为红色 *
      .popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:red;}
    /* 小结:这部分还是默认白色的好看 *

    /* 第六部分、导航项目激活状态 *
    /* 23、激活项目的文字背景色(难看,所以none)、文字颜色(选白色) *
    .skin-box-bd .menu-list .menu-selected .link .title{background:none;color:white;}
    /* 24、激活项目的项目背景色(项目框),选紫色 *
    .skin-box-bd .menu-list .menu-selected .link{background: urple;}

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    思考
    2016-9-7 16:50
  • 签到天数: 137 天

    连续签到: 1 天

    [LV.7]炉火纯青

    16

    主题

    350

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    19791

    最佳新人热心会员

    发表于 2015-11-6 08:10:00 | 显示全部楼层
    看不懂额........................

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2016-6-26 18:33
  • 签到天数: 150 天

    连续签到: 1 天

    [LV.7]炉火纯青

    9

    主题

    177

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    37635

    最佳新人热心会员

    发表于 2015-11-6 09:05:37 | 显示全部楼层
    地板哎!我勒个去
  • TA的每日心情

    2016-4-18 11:52
  • 签到天数: 11 天

    连续签到: 1 天

    [LV.3]武林新秀

    28

    主题

    160

    帖子

    1万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    12957

    发表于 2015-11-6 09:05:40 | 显示全部楼层
    可能我对代码不太熟悉吧,看不懂

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    抱抱
    2016-11-16 17:20
  • 签到天数: 281 天

    连续签到: 1 天

    [LV.8]自成一派

    32

    主题

    2817

    帖子

    4万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    45070

    最佳新人热心会员

    QQ
    发表于 2015-11-6 09:11:05 | 显示全部楼层
    先收了,呆会再去研究,谢谢分享啊!
    最好的我遇见最美的你,可是我们却隔了一整个青春!http://shop111472591.taobao.com
  • TA的每日心情
    加油
    2016-2-13 18:29
  • 签到天数: 49 天

    连续签到: 1 天

    [LV.5]略有小成

    5

    主题

    343

    帖子

    3万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    31947

    发表于 2015-11-6 09:26:06 | 显示全部楼层
    先感谢分享再看
    风太大,你说什么听不见
  • TA的每日心情
    抱抱
    2016-9-5 23:23
  • 签到天数: 2 天

    连续签到: 1 天

    [LV.1]初学乍练

    0

    主题

    7

    帖子

    3280

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3280

    发表于 2015-11-7 14:44:19 | 显示全部楼层
    支持一个

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

  • TA的每日心情
    加油
    2016-9-28 11:04
  • 签到天数: 88 天

    连续签到: 1 天

    [LV.6]渐入佳境

    16

    主题

    616

    帖子

    2万

    积分

    中级会员

    阅读权限: 30

    Rank: 3Rank: 3

    积分
    21384

    最佳新人热心会员

    QQ
    发表于 2015-11-10 14:54:24 | 显示全部楼层
                                                       喔
    哒哒哒
  • TA的每日心情
    加油
    2016-4-11 18:38
  • 签到天数: 31 天

    连续签到: 1 天

    [LV.5]略有小成

    1

    主题

    46

    帖子

    3605

    积分

    注册会员

    阅读权限: 20

    Rank: 2

    积分
    3605

    发表于 2015-11-18 12:54:50 | 显示全部楼层
    谢谢分享

    《论坛帮助文档》有什么问题来这里看看吧,这里有你想知道的内容!


    淘宝美工论坛-汇聚淘宝美工高端人才,建设淘宝美工人才基地。请认准论坛唯一网址:www.taobaoux.com

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|Archiver|手机版|粤公网安备44060502000322号|淘宝美工论坛 ( 桂ICP备12007265号-8 )  

    GMT+8, 2016-12-11 08:27 , Processed in 0.127350 second(s), 21 queries , Gzip On, Memcache On.

    Powered by Discuz! X3.2

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表