淘宝美工:淘宝店铺导航颜色装修代码有哪些?

淘宝首页想要装修的漂亮,需要用到一些代码,现在可以借住一些在线代码制作的网站,也可以自己用DW写代码。下面给大家介绍导航装修的简单的代码。

修改导航背景色

  • 01

    静态背景颜色 代码:.skin-box-bd .menu-list .link{background:white;} 用来设置【首页 】等其它导航类目中的背景色。颜色代码可以用英文单词表示,如white(白),也可以用十六进制表示,如白色为#ffffff等表示。另外背景色也可用图片,代码为{background:url(图片地址);}。 在默认的导航条中最左边的一项为【 所有分类】的背景色 代码:.all-cats .link{background:red;} 导航条整个分类段背景色 代码:.skin-box-bd .menu-list{background:white;} 【导航条背景色】修补导航右侧缺口(分类不多时,右侧可能会空着时的缺口) 代码:.skin-box-bd{background:red;} 我这个颜色用的很丑,主要是为了好区分,哈哈。

    修改分割线颜色

    • 01

      【所有分类】的右边的分隔线颜色 代码:.all-cats .link{border-color:black;} “首页”等分类右边的分隔线颜色 代码:.menu-list .menu{border-color:black;}

      修改文字颜色

      • 01

        【首页】等其它导航类目的文字颜色 代码:.menu-list .menu .title{color:yellow;} 【所有分类】的文字颜色 代码:.all-cats .link .title{color:yellow;} 【二级分类】的背景色 代码:.popup-content{background:gray;} 【三级分类】的背景色 代码:.popup-content .cats-tree .snd-pop-inner{background:#504f4f;} 【二级分类】的文字颜色 代码:.popup-content .cat-name{color:yellow;} 【三级分类】的文字颜色。 代码:.popup-content .cats-tree .snd-pop-inner .cat-name{color:yellow;} (如果不写这句代码,那三级分类和二级分类颜色是一样的。)

        修改鼠标滑过变背景色

        • 01

          鼠标滑过【首页】等其它导航类目变换背景色 代码:.menu-list .menu-hover .link{background:green;} 鼠标滑过【所有分类】变换背景色 代码:.all-cats-hover .link{background:green;} 鼠标滑过【所有分类下的二级分类】变换背景色 代码:.popup-content .cats-tree .cat-hd-hover{background:green;} 鼠标滑过【所有分类下的三级分类】变换背景色 代码:.popup-content .cats-tree .snd-cat-hd-hover{background:green;} 鼠标滑过【导航类目下的宝贝分类】变换背景色 代码:.menu-popup-cats .sub-cat-hover{background:green;}

          鼠标滑过变文字颜色

          • 01

            鼠标滑过【首页】等其它导航类目变换文字颜色 代码:.menu-list .menu-hover .title{color:blue;} 鼠标滑过【所有分类】变换文字颜色 代码:.all-cats-hover .link .title{color:blue;} 鼠标滑过【导航类目下的宝贝分类】变换文字颜色 代码:.menu-popup-cats .sub-cat-hover .cat-name{color:blue;} 鼠标滑过【所有分类下的二级分类】变换文字颜色 代码:.popup-content .cat-hd-hover .cat-name{color:blue;} 鼠标滑过【所有分类下的三级分类】变换文字颜色 代码:.popup-content .cats-tree .snd-cat-hd-hover .cat-name{color:blue;}

          (0)

          相关推荐

          • 如何制作淘宝店铺导航条

            淘宝店铺导航条可以让到店铺的顾客更方便的找到他们所需要的,减少顾客的时间,提高他们的购物目的性,促进交易完成.那么如何制作淘宝店铺导航条?淘宝学堂图文解说,一学就会非常简单实用!今天给新手朋友们介绍一 ...

          • 淘宝美工:如何获取淘宝店铺优惠券链接地址?

            淘宝美工经常会需要用到一些链接地址,用来制作海报和页面,比如优惠券链接,那么如何获取淘宝店铺优惠券链接地址了?很简单,向下看. 操作方法 01 打开电脑上的浏览器,点开淘宝首页,登入淘宝店铺帐号. 0 ...

          • 如何在淘宝店铺导航条加入自定义页面

            如何在淘宝店铺导航条加入自定义页面呢?比如公司介绍.这个很简单,大家跟我一起来. 操作方法 01 输入账号及密码登陆淘宝店铺. 02 点击卖家中心,在左侧店铺管理下有个店铺装修,点击进去. 03 鼠标 ...

          • 淘宝导航栏css代码

            淘宝店铺的不断升级,对于新旺铺开放的功能也逐渐放宽了,对于导航栏的设计,很多朋友也是在不断的琢磨着.今天就和大家分享淘宝导航栏css代码,直接在淘宝店铺导航设置中加入代码就可以用了. 操作方法 01 ...

          • 淘宝导航条自定义代码

            淘宝导航条自定义代码 操作方法 01 .skin-box-bd .menu-list .menu .title{font-family:字体;font-size:字体大小;font-weight:no ...

          • 淘宝美工兼职怎么做

            淘宝美工是淘宝网店网站页面的美化工作者的统称.周边工作有网店设计(平面设计).P图(图片处理).是淘宝网店页面编辑美化工作者的统称.主要设计主图.详情页等.而近来随着同学开始自主创业淘宝,或者是兼职淘 ...

          • 淘宝中如何设置店铺名称和店铺标志

            在淘宝中开店,店铺名称和标志logo首先是需要必须设置的,也是非常重要的.那么开店后究竟在哪里设置呢?或者说已经开了很久的店铺想要更换店铺名称和标志在哪里更改呢?接下来一步步跟随小编看教程哦 操作方法 ...

          • 淘宝美工怎么自学?

            美工自学如何着手? 网购成为了我们生活中的购物方式一种,网店的竞争日益激烈,美工在淘宝行业中是最为关键的一环,能不能留住客户,往往取决于店铺的装修给客户的心理感觉.淘宝美工前景发展好,那么淘宝美工怎么 ...

          • 如何做淘宝美工,快捷工具1.4

            操作方法 01 淘宝美工快捷工具V1.4 · 前言:为了方便淘宝美工快捷高效的工作,特作此软件,后续更多功能将会陆续开发.希望大家支持本软件的制作! 更新日志 淘宝美工快捷工具V1.4(2013.6. ...