打造个性化淘宝导航栏,装修css全解

1、淘宝导航装修css全解（整理）首先来让我们看看一个案例，也是我按照以下css寸导航栏部分进行编辑的最终效果。地址：图示：采用的是彷win8的图形界面风格，没有花一分钱，个人觉得还是不错的! 这是我在导航栏添加的CSS.skin-box-bdbackground:none;border:0px ;.menu-listbackground:none;border:0px ;.linkbackground:none;border:0px ;.menubackground:none;border:0px ;.all-catsbackground:none;border:0px ;.skin-box-b

2、d .allcats .titlecolor:#D37DF1;.menu-list .menu .titlecolor:#D37DF1;fon t-size:20px;.all-cats .link .titlecolor:#D37DF1;font-size:20px;.menu-list .me nu-hover .li nkbackgro un d:#FFFFFF;.sk in-box-bd .popup-c ontent .cats-tree .cat-hd-hover .cat -n amecolor:#FFFFFF;.popup-c onten tbackgro un d:#FFFF

3、FF;.me nu-list .me nu backgro un d:#260930;marg in:0 ;paddi ng:0px10px;.popup-c ontent .cats-tree .cat-hd-hoverbackgro un d:#D37DF1;.p opup-c ontent .cats-tree .sn d-pop-i nn erbackgro un d:#D37DF1;.popup-co ntent .cats-treemarg in:0 0 20px 0;-L D也"口寻;航栏通呆拆董色董光笔加重区城复拔靈一、首先我们进入到店铺的装修页面，将鼠标放在导航上面

4、会出现“编辑”字 样，单击，如图选择“显示设置”选项卡耗设苴豆耘ST w- « uar m m rwJL 宰妊舍自动给:超匮择常埼一毎加前境：忙却色禹HEW诃hOiHtmwg苗昭（tb出对電复褊加1.修改导航分类下面的背景色，代码如下:.skin-box-bdin kbackgro und:#000000;耳阮1显示快萱果砒旨谜皐砒捧潮剧）0帼：rpag fttmtant，曲恥阳的如4伽iM匱1SM.sl<jn-buM-bd lit ikjtxdCk 申cxjnd, fOOOOOO；）效果如下斷有分类T首页公司介绍话備动在默认是黑色的，如果你要别的颜色，只要修改 #000000

5、就可以了，颜色对照表地 址RGB颜色查询对照表因为兼容性问題，功能只能在IE浏览器中运行MR颜色对艇複FFFFFFFFFFFOFFFFEO#FFFFOO#FFFAFA#FFFAF0#FFFACDfrFFFSDCFFFfieFitFFFSEE#FFF0F5>FFEFDB#FFEFD5FFECBbfrFFEBCDFFE7BAFFE4E1FFE4C4FFE4B5#FFE1FF#FFDEAD廿FFDA旳frFFD700#FFD390FFCICI"j# FTC 125frFFCOCBfrFFBBFF#FFB9CF#FFB6CL#FFB5 C5#f-FFAEB9#FFp.b4FFFASOU

6、#F泪M#FF8C69H FFSCOOFF33FAF92AB#FF9247#FF7F5O:#FF7 F二斗#FF7256如果你想要更加个性，而不想只要简单的纯色块的话，可以自己做图片，然后连 接上去，代码如下：.skin-box-bdinkbackground:url（图片链接）;效果如下将“图片连接”换成你的图片的连接就可以了， 一般都是自己做好然后上传到淘 宝图片空间，然后链接就可以了！在图片空间点击对应图片下方的“链接”按钮可以直接复制图片链接，替换到 代码里就可以了！2修改整个导航的背景色【其实只修改了有分类之外的部分（前面我们已经修改 好了分类背景），还有最右边那部分没改到，后面会有

7、修改那里的代码，一步步 跟着来就没错了！】代码如下：.ski n-box-bd .men u-listbackgrou nd:#000000;效果如下菌XL氓夏.遥有一小址檢色址央闸卞崖的代码!修改颜色的方法同上修改成图片的代码如下:.skin-box-bd .me nu-listbackgro un d:url(图片链接）；3. 修改最右边留下的一小块，2里提到的，代码如下:.sk in-box-bdbackgrou nd:#000000;效果如下二 惟帀1窘視加0 r店博诵莎补上77! /修改颜色的方法同上修改成图片的代码如下：这样做你的导航完成的差不多了，但是发布之后你会发现字体的背景色

8、块有问题， 只有文字下方才有色块，比如“首页”，只有“首页”两个字下面有颜色， 其它 有些四个字的就四个字有，这样很影响美观！所以我们还要加上两条代码4. 字外:.skin-box-bd .me nu-list .me nu-selectedin kbackgro und:#000000;.skin-box-bdbackground:url（图片链接）;5. 字里:.skin-box-bd .me nu-list .me nu-selectedink .titlebackgro und: 0；#00000字外+字里=全部!这样就完整了好了，以上就是我的淘宝店里的导航里用的所有代码，下面再给大家

9、一些别的 代码！导Stx叱址二曹显示役直弟歧会包动甥鈕it挥霜竦一旅加rttSR，tfconient .t$hop-piKrrThitJorfca*<fi, it勿董星菲iv5t:ri boxt!d .Inlf'PwckQrcwnd r #000000j H.ri bax bd ,m&nusrtMCQroun止 iTOOODOO;) Q.dcri'baji-bd b ack ground: KJOODOO； Q.sldn btut-bd .menu-list .mmMEiected . HtfhKicgraLnri: fOOCnaoi) Q.fkri-bQi-bd

10、 .menu-Hst .rnerRj-seiected .Ink . frtl&backixjnd;fOOQDOC总二、下面红色部分为可以修改的，颜色代码大家很熟悉了，字号就是字体的大 小，在网页中，字体大小一般是14到20左右，根据自己的需要设定吧，直接 填写数字就OK了！1.导航背景色代码（除去“所有分类”）如下：.menu-listin kbackgro und:#0000002.导航栏文字（除去“所有分类”）如下：.menu-list .menu .titlecolor:#颜色代码；font-size: 字号 px;d类*首页公司介绍店铺动态3.“所有分类”的背景色代码如下：.

11、all-cats .li nkbackgrou nd:#000000;4.“所有分类”的文字代码如下：.all-catsink .titlecolor:#颜色代码;font-size:字号 px;上羁 F"*JE亠風” .JF_1 亞比二 _ 丄所有分类r最新代码，解决字体改大后导航右侧消失的情况！ 代码如下：.all-catsink .titlefont-size: 字号px;.all-cats .link background: #3BAFFF ;margin:0;padding:0px 3px;字号最大为21,继续变大右侧导航将消失！该代码还不是很完善，我们会继续研究！5.二级

12、分类文字代码如下：.popup-content .cats-tree .fst-cat .cat-namefont-size:字号 px;color: #颜色代码;font-weight:bold/bolder/normal;原来效果>节能灯>开关插座>Q4曲廊系现囉頂灯支架>Q理俞?.專A首灯>Q8金屈吾凫打貝8比灯>修改后效果所宵分类首页所有宝贝>节能灯>>T开关插述>播吸顶灯Lt支架>灯筒灯>6. 二级分类背景代码如下：.popup-co nten tbackgrou nd: #000000;7.三级分类文字代码（除

13、去“所有宝贝”分类）如下字号px;color :#颜色代.popup-c ontent .cats-tree .sn d-pop-i nn erfo nt-size:码;fon t-weight:bold/bolder/normal;原来效果修改后效果U型螺旋型分离式（插管）E14灯头E27灯头E40灯头ES标准系列GN紧谍系列G24dL灯头G24H-2灯头G24q-1灯头G24q-2灯头还"war8.三级分类文字代码（包括"所有宝贝”分类字体大小）这样就无法改变字体颜色，我们 会继续完善该代码！如下.popup-content .cats-tree .snd-pop-in

14、nerfont-size:字号 px;color: #颜色;孑分类首页公司介绍店铺五亍宝贝>按销量g灯>按新品r>按价格e插座>9.三级分类背景代码:#000000;.popup-c ontent .cats-tree .sn d-pop-i nn erbackgro und:10. 一级导航分类（除去“所有宝贝”分类）分隔线颜色代码如下:.men u-list .men uborder-color:#000000;公因介绍一级导航“所有宝贝”分类 分隔线颜色代码如下:.all-catsin kborder-color:#000000;11. 一级导航分类的宽度修改代码

15、如下：.menu-list .menubackground: #颜色;margin:0;padding:0px增加的宽度 px;12. 鼠标滑过一级分类导航文字变换背景色代码如下:.menu-list .me nu-hoveri nkbackgro und:#00000Qh公司介貂-fl14.鼠标滑过一级分类导航文字变换颜色代码如下:.menu-list .me nu-hoveri nk .titlecolor:#FFFFFf15.鼠标滑过二级分类导航文字变换背景色代码如下:#000000.popup-c ontent .cats-tree .cat-hd-hoverbackgro und:亶

16、架5筒灯>灯具16.鼠标滑过二级分类导航文字变换颜色代码如下:.skin-box-bd .popup-c ontent .cats-tree .cat-hd-hover .cat -n amecolor: #ff0000 ; 所有分类T首更>按耶1节啟>按亲1會灯>1#土糅席1_17. 鼠标滑过三级分类导航文字变换背景色代码如下:#000000;.popup-c ontent .cats-tree .sn d-cat-hd-hoverbackgro und:18. 二级分类上加空间代码如下：50px 0;.popup-c ontent .cats-treemargi n

17、:0 0图片连接）；19. 修改“所有宝贝”右边小图标代码如下: .all-cats .li nk .popup-ic on backgro un d:url(所有分类所有宝贝节能灯20. 修改二级分类右侧图标代码如下（有三级分类才会显示）：.popup-content .cats-tree .fst-cat-iconbackground:url（图片连接）;台灯节能好光源类插管光源类湄类支架简灯|汁曰22.在三级分类前加上小块白色代码如下：.popup-c ontent .cats-tree .sn d-cat-ic on display:block ;height: 3px;width:

18、3px;A>f囁譴型p-E27 加1 >>匸匚;住霁对1好了，我简单的导航修改技巧就到这里了， 以上效果都是用白色或黑色做给大家 看，是为了大家能更好的看清楚效果，如果上面有些看到是全白的，那是因为字 体颜色和背景颜色一样才变成全白的，修改了背景大家再修改字体颜色就可以了！ 希望大家都可以做出自己喜欢的导航！、关于店招和导航两侧的修改!这里修改好，跟导航和店招结合在一起会更加完美!修改方式如下：在店铺装修页面的左上方有个“装修”，将鼠标放在上面会出现 下拉菜单，选择“样式菜单”页面骨理7店棉单击左侧的“背景设置”0样式编辑选择崟设置的數由：円有贞直逢择配色詩昌诗骨口头饅萱贝匱设萱皿诀育眉色；| /显示点击这里保存页头背凤圄：上怪窗片 拥餘丈洱祸式GF.JPG,PHG3CAd>200kJll*J取消面品分类这里有两个选项卡，分别是“页头设置”和“页面设置”这擇養设置的熨面:所有贝面页头设置页面设置<留意这里页头背量色：/显示保存取消页具背豎團：上恰图片删除文件格式GFJPG.PNG支f蚊出2皿脱内所谓页头，其实就是导航以上（包