- 1、本文档共34页,可阅读全部内容。
- 2、有哪些信誉好的足球投注网站(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
2016新编【原创】2012淘宝新旺铺导航栏装修代码图文详解.doc
第一部分:导航条背景色的设置
(该处我们全部用黑色和红色)
前言:
一:用纯色填充
①修改导航的背景色.skin-box-bd .link{background:#000000;}
如果想让“所有分类”和“首页”的背景色不同
1、首页/店铺动态/其它导航类目的背景色,这里设为红色 */
.skin-box-bd .menu-list .link{background:red;}
2、所有分类的背景色(最左边的),设为红色
.all-cats .link{background:red;}
②修改整个导航的背景色
.skin-box-bd .menu-list{background:#000000;}
.skin-box-bd{background:#000000;}
二:用背景图填充
导航栏用背景图(以下三个代码要一起用)
①号代码
.skin-box-bd .link{background:url(图片地址);}
②号代码
.skin-box-bd .menu-list{background:url(图片地址);}
用③号代码修补一下
.skin-box-bd{background:url(图片地址);}
三张图片都是一样的哦,用同一张图片哦!
第二部分:静态文字和分隔线的设置
①“所有分类”以外文字的代码(即首页/店铺动态/其它导航类目的文字)
.menu-list .menu .title{color:#颜色代码;font-size:字号px;}.all-cats .link .title{color:#颜色代码;font-size:字号px;}
.menu-list .menu .title{font-family: 方正行黑简体;font-size: 18px;color: #00FF00;font-weight: bold;}
不过,字体是不可以乱搞的!
要选择网页常用的,比如宋体,仿宋,黑体,一般改个黑体就足够醒目的啦!
字号一般12到20之间。
要提醒一点,这里如果修改了颜色,那么“鼠标经过”就不会再变色了哦!不喜欢的可以把color: #XXXXXX干掉。
③所有分类后面的分隔线代码:.all-cats .link{border-color:#颜色代码}
首页等分类的右边的分隔线颜色,设为白色 */
.menu-list .menu{border-color:white;}
④二级分类文字代码:
.popup-content .cats-tree .fst-cat .cat-name{font-size:字号;color:#颜色代码;font-weight:bold/bolder/normal;}
(如果三级文字没代码,那么会和二级文字一样!)(这条代码仅修改所有分类下的二级类目文字颜色和字号等,不对后面的二级类目产生影响,如下图所示,这条代码对“风扇”下的类目不产生影响,风扇类目下二级类目依旧为默认字号)
如果需要其他导航的二级分类和所有分类下的二级分类一致,那么需要借用下面的代码
.popup-content .cat-name{font-size:字号;color:#颜色代码;font-weight:bold/bolder/normal;}
这样就一致了!
⑤二级分类背景代码:.popup-content{background:#颜色代码}
⑥第一种:三级分类文字代码(除去“所有宝贝”分类)如下.popup-content .cats-tree .snd-pop-inner .cat-name{ font-size:字号;color:#颜色代码;font-weight:bold/bolder/normal;}
第二种:三级分类文字代码(包括“所有宝贝”分类字体大小)这样就无法改变字体颜色!如下.popup-content?.cats-tree?.snd-pop-inner{font-size:字号px;color:#颜色;}?
⑦三级分类背景代码:.popup-content .cats-tree .snd-pop-inner{background:#颜色代码}
第三部分:互动部分的设置
(背景变换部分)
鼠标滑过首页/店铺动态/其它导航类目变换背景色,这设为黑色
.menu-list .menu-hover .link{background:#000000;}
②鼠标滑过所有分类(最左边那个)变换背景色,这同样设为黑色
.all-cats-hover .link{background:#000000;}
③鼠标滑过所有分类下的二级分类变换背景色,这设为黑色
.popup-content .cats-tree .cat-hd-hover{background:#000000;}
④鼠标滑过所有分类下
您可能关注的文档
- 【优质】单张纸胶印气垫橡皮布的使用与保养.doc
- 2015年计量真题.docx
- 婚庆部岗位职责(共篇)(精简版).doc
- 某房地产开发公司岗位绩效指标体系.doc
- 大学生智慧就业工程.doc
- 亩收益万的种植品种 中药材种植技术.doc
- 2016-2017年各地培育发展现代服务业集聚区的经验做法(总结).docx
- 砖砌体、抹灰施工合同.doc
- 目_ 录_内容提要_第一章地震灾后面临的主要公共卫生问.doc
- 架子鼓教学计划.doc
- 第十一章 电流和电路专题特训二 实物图与电路图的互画 教学设计 2024-2025学年鲁科版物理九年级上册.docx
- 人教版七年级上册信息技术6.3加工音频素材 教学设计.docx
- 5.1自然地理环境的整体性 说课教案 (1).docx
- 4.1 夯实法治基础 教学设计-2023-2024学年统编版九年级道德与法治上册.docx
- 3.1 光的色彩 颜色 电子教案 2023-2024学年苏科版为了八年级上学期.docx
- 小学体育与健康 四年级下册健康教育 教案.docx
- 2024-2025学年初中数学九年级下册北京课改版(2024)教学设计合集.docx
- 2024-2025学年初中科学七年级下册浙教版(2024)教学设计合集.docx
- 2024-2025学年小学信息技术(信息科技)六年级下册浙摄影版(2013)教学设计合集.docx
- 2024-2025学年小学美术二年级下册人美版(常锐伦、欧京海)教学设计合集.docx
文档评论(0)