天猫淘宝2013旺铺自定义导航 淘宝装修 如何使用CSS样式自定义导航菜单 淘宝运营精英QQ交流群：16661666 您想了解如何自定义淘宝天猫旺铺2013导航吗？ 您只需要记住一些代码，就可以轻松让您的商店变得独一无二。 进入商店专业化页面并编辑导航。 在显示设置中放入以下代码，只能修改。 一般只需要修改绿色部分即可。 如果你不知道颜色代码，可以在PS中找到。 导航栏背景 color.skin-box-bd .menu-list{背景：无重复滚动 0 0 #00ad08;} 首页/商店动态背景 color.skin-box-bd .menu-list .link{背景：无重复滚动0 0 #00ad08;} 首页/商店动态右 line.skin-box-bd .menu-list .menu{border-right:1px #006205solid;} 首页/商店动态文本 color.skin-box-bd . menu- list .menu .title{color:#ff0000} 所有类别背景 color.all-cats .link{background: none 重复滚动 0 0 #00ad08;} 所有类别右 line.all-cats .link{border-right: 1px # 006205 Solid;} 所有类别文字 color.skin-box-bd .all-cats .title{color:#ff0000} 补充内容——————– ————————————————– ————————————————– — ————— 1.修改导航分类下的背景颜色，代码如下： .skin-box-bd .link{background:#000000;} 修改导航类别下的图片，代码如下： .skin-box-bd .link{background:url(图片链接);} 2.修改整个navigation的背景颜色.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(image link);} 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:#color code ;font-size:font size px;} 最新代码解决了字体改大后导航右侧消失的问题~代码如下： .all-cats .link .title{font-size:字体大小px;}.all-cats .link {background: #3BAFFF; 保证金：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; 颜色：#颜色代码； font-weight：bold/bolder/normal;} 8、三级分类文字代码（包括“全宝贝”分类字体大小）不能改变字体颜色。 我们会继续完善代码~如下。 popup-content .cats-tree .snd-pop-inner{font-size:字体大小px;color:#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:#color;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 ;} 23.激活项目的文本背景颜色（丑，所以没有），文本颜色（选择白色）.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:白色;} 24.激活项目 项目背景色（项目框）选择 Purple.skin-box-bd .menu-list .menu-selected .link{background:purple;} 补充内容—— ——— —————————————– ——— ————————– 隐藏导航，所有类别的导航： .all-cats{display: block;overflow:hidden;width: 0;height:0;} 更改后所有类别将被隐藏。
但如果导航栏使用其他颜色，则会与原始模板颜色不同。 然后就可以添加一行： .skin-box-bd{width:200px;} 想知道淘宝天猫旺铺2013如何自定义导航吗？ 您只需要记住一些代码即可使您的商店独一无二。 进入商店专业化页面并编辑导航。 在显示设置中放入以下代码，只能修改。 一般只需要修改绿色部分即可。 如果你不知道颜色代码，可以在PS中找到。 导航栏背景 color.skin-box-bd .menu-list{背景：无重复滚动 0 0 #00ad08;} 首页/商店动态背景 color.skin-box-bd .menu-list .link{背景：无重复滚动0 0 #00ad08;} 首页/商店动态右 line.skin-box-bd .menu-list .menu{border-right:1px #006205solid;} 首页/商店动态文本 color.skin-box-bd . menu- list .menu .title{color:#ff0000} 所有类别背景 color.all-cats .link{background: none 重复滚动 0 0 #00ad08;} 所有类别右 line.all-cats .link{border-right: 1px # 006205 Solid;} 所有类别文字 color.skin-box-bd .all-cats .title{color:#ff0000} 补充内容——————– ————————————————– ————————————————– — ————— 1.修改导航分类下的背景颜色，代码如下： .skin-box-bd .link{background:#000000;} 修改导航类别下的图片，代码如下： .skin-box-bd .link{background:url(图片链接);} 2.修改整个navigation的背景颜色.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(image link);} 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:#color code ;font-size:font size px;} 最新代码解决了字体改大后导航右侧消失的问题~代码如下： .all-cats .link .title{font-size:字体大小px;}.all-cats .link {background: #3BAFFF; 保证金：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; 颜色：#颜色代码； font-weight：bold/bolder/normal;} 8、三级分类文字代码（包括“全宝贝”分类字体大小）不能改变字体颜色。 我们会继续完善代码~如下。 popup-content .cats-tree .snd-pop-inner{font-size:字体大小px;color:#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:#color;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 ;} 23.激活项目的文本背景颜色（丑，所以没有），文本颜色（选择白色）.skin-box-bd .menu-list .menu-selected .link .title{background:none;color:白色;} 24.激活项目 项目背景色（项目框）选择 Purple.skin-box-bd .menu-list .menu-selected .link{background:purple;} 补充内容—— ——— —————————————– ——— ————————– 隐藏导航，所有类别的导航： .all-cats{display: block;overflow:hidden;width: 0;height:0;} 更改后所有类别将被隐藏。 但如果导航栏使用其他颜色，则会与原始模板颜色不同。 然后你可以添加一行：.skin-box-bd{width:200px;}
暂无评论内容