大小:1,407.3M 语言: 中文
类型:小说阅读 系统:macOS





快趣吧淘宝导航css代码生成器就是现在操作十分的简单的导航css代码生成工具。不但能调导航条的文字颜色,而且还拥有颜色提取器,从而更快速的生成所需要的代码!MY LITTLE PONY魔法公主大冒险游戏下载-MY LITTLE PONY(魔法公主大冒险)3.5.0苹果版
导航栏CSS代码使用教程
第一部分、静态背景颜色
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:purple;}
小结:最多人忽视这部分,其实也是很多人想知道的
2、这样就可以生成代码

1、快趣吧淘宝CSS装修代码生成器由快趣吧淘宝店铺装修论坛开发,并免费提供给淘宝店家。
2、本软件适用于淘宝店铺装修之导航条的css代码生成。
3、七彩生活,由你做主。本软件可完美自定义设计,小到一条线的色彩,让您不再受制于淘宝限制。
4、即使预览功能,完全模块化、自动化。可设置任意色彩,且所见既所得,可即时预览修改任何地方的效果。
热门评论
最新评论