`
ordinary
  • 浏览: 79436 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

淘宝导航css相关说明

 
阅读更多

 

 

      

 #设置背景颜色 

.skin-box-bd{background:url(http://img02.taobaocdn.com/imgextra/i2/1758944073/TB2ARZhapXXXXabXpXXXXXXXXXX_!!1758944073.jpg_620x10000.jpg);}

#修改分类之外的导航

.skin-box-bd .menu-list{background:none repeat scroll 0 0 #CE243F;}

#菜单文字之外 

.skin-box-bd .menu-list .menu-selected .link{background:#000000;}

     #菜单文字 

.skin-box-bd .menu-list .menu-selected .link .title{background:#000000;}

     #导航背景颜色

     .menu-list .link{background:#000000;}

 

     #导航栏文字

     .menu-list .menu .title{color:#颜色代码;font-size:字号px;}

 

     #分类颜色

     .all-cats .link{background:#000000;}

      #分类文字

     .all-cats .link .title{color:#颜色代码;font-size:字号px;}

      #二级栏效果

     .popup-content .cats-tree .fst-cat .cat-name{font-size:字号px;color:#颜色代码;font-weight:bold/bolder/normal;}

      #二级分类背景

     .popup-content{background:#000000;}

      #三级分类文字代码

     .popup-content .cats-tree .snd-pop-inner{font-size:字号px;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:#000000;}

      #一级导航分类

     .menu-list .menu{border-color:#000000;}

      #一级导航“所有宝贝”分类分隔线

     .all-cats .link{border-color:#000000;}

      #一级导航分类的宽度

     .menu-list .menu{background:#颜色;margin:0;padding:0px 增加的宽度px;}

      #鼠标滑过一级分类导航文字变换背景色代码

     .menu-list .menu-hover .link{background:#000000;}

      #鼠标滑过一级分类导航文字变换颜色

     .menu-list .menu-hover .link .title{color:#FFFFFF;}

      #鼠标滑过二级分类导航文字变换背景色

     .popup-content .cats-tree .cat-hd-hover{background:#000000;}

      #鼠标滑过二级分类导航文字变换颜色

     .skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#ff0000;}

      #鼠标滑过三级分类导航文字变换背景色代码

     .popup-content .cats-tree .snd-cat-hd-hover{background:#000000;}

      #二级分类上加空间代码

     .popup-content .cats-tree{margin:0 0 50px 0;}

      #修改“所有宝贝”右边小图标

     .all-cats .link .popup-icon{background:url(图片连接);}

 

 

 

 

我的配置:

 

 

.skin-box-bd{background:url(http://img02.taobaocdn.com/imgextra/i2/1758944073/TB2ARZhapXXXXabXpXXXXXXXXXX_!!1758944073.jpg_620x10000.jpg);}

.skin-box-bd .menu-list{background:url(http://img02.taobaocdn.com/imgextra/i2/1758944073/TB2ARZhapXXXXabXpXXXXXXXXXX_!!1758944073.jpg_620x10000.jpg);}

 

.menu-list .link{background:url(http://img02.taobaocdn.com/imgextra/i2/1758944073/TB2ARZhapXXXXabXpXXXXXXXXXX_!!1758944073.jpg_620x10000.jpg);}

 

.menu-list .menu .title{color:#000000;font-family:微软雅黑;font-size:16px;}

 

 

.all-cats .link{background:url(http://img02.taobaocdn.com/imgextra/i2/1758944073/TB2ARZhapXXXXabXpXXXXXXXXXX_!!1758944073.jpg_620x10000.jpg);}

 

.all-cats .link .title{color:#000000;font-family:微软雅黑;font-size:16px;}

 

.popup-content .cats-tree .fst-cat .cat-name{font-family:微软雅黑;font-size:16px;color:#000000;}

 

.popup-content{background:#FFFFFF}

.popup-content .cats-tree .snd-pop-inner{font-family:微软雅黑;font-size:16px;color:#000000;}

 

.popup-content .cats-tree .snd-pop-inner a {font-family:微软雅黑;font-size:16px;color:#000000;} 

 

.popup-content .cats-tree .snd-pop-inner{background:url(http://img02.taobaocdn.com/imgextra/i2/1758944073/TB2ARZhapXXXXabXpXXXXXXXXXX_!!1758944073.jpg_620x10000.jpg);}

 

 

.popup-content .cats-tree .cat-hd-hover{background:#FFFFFF;}

 

.menu-list .menu{border-color:#000000;}

.all-cats .link{border-color:#000000;}

 

 

 

 

.skin-box-bd .menu-list .menu-selected .link{background:#FFF0F5;}

.skin-box-bd .menu-list .menu-selected .link .title{background:#FFF0F5;}

 

.menu-list .menu-hover .link{background:url(http://img02.taobaocdn.com/imgextra/i2/1758944073/TB2ARZhapXXXXabXpXXXXXXXXXX_!!1758944073.jpg_620x10000.jpg);}

 

.menu-list .menu-hover .link .title{color:#000000;}

 

.popup-content .cats-tree .cat-hd-hover{background:#FFF0F5;}

 

.skin-box-bd .popup-content .cats-tree .cat-hd-hover .cat-name{color:#000000;}

 

.popup-content .cats-tree .snd-cat-hd-hover{background:#FFF0F5;}

 

分享到:
评论

相关推荐

    淘宝新旺铺 导航定定义 CSS 20130308版.7z

    在提供的压缩包文件中,“安装说明.txt”应该是指导用户如何将这个导航定义CSS应用到淘宝新旺铺的步骤文档。通常,这样的说明会包含如何解压文件、上传CSS文件到指定位置、更新店铺设置等操作。而“新旺铺 导航定...

    新旺铺2012导航栏CSS自定义代码工具

    商家可以通过提供的“新旺铺导航.txt”文件获取相关说明和示例代码,按照指导逐步进行设置。 总的来说,这款工具为电商店铺提供了强大的导航栏定制能力,使得店铺能够在众多同类竞争者中脱颖而出。通过精心设计的...

    打造个性化淘宝导航栏_装修css全解.docx

    详细请看文件里的说明,谢谢。

    Jquery仿淘宝顶部导航菜单

    总的来说,"Jquery仿淘宝顶部导航菜单"项目是通过jQuery和CSS来实现一个动态、交互性强的网页导航菜单,它借鉴了淘宝网的用户体验设计,为用户提供了一个清晰、直观的网站导航工具。通过学习和实践这个项目,开发者...

    作业5:制作淘宝女装分类页面.7z

    在本项目"作业5:制作淘宝女装分类页面.7z"中,我们主要涉及的是网页设计与开发领域,特别是利用CSS技术来构建一个完整的电商页面。这个课后练习旨在帮助学习者掌握如何创建一个功能齐全的女装分类页面,提供用户...

    新旺铺 导航定定义 CSS 图片 字体版

    在这个"新旺铺 导航定义 CSS 图片 字体版"中,重点涉及了CSS(层叠样式表)、图片和字体在店铺装修中的应用,这些都是网页设计和店铺美化不可或缺的元素。 首先,CSS(Cascading Style Sheets)是一种用于描述HTML...

    CSS3淘宝右侧固定导航特效代码

    【CSS3淘宝右侧固定导航特效代码】是一种利用CSS3特性实现的网页设计技术,主要应用于电商网站,如淘宝,以提供用户在浏览页面时始终可见的便捷导航。这个特效使得导航条固定在屏幕右侧,即使在滚动页面时也能保持在...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...

    仿淘宝网首页导航条效果.rar

    本示例“仿淘宝网首页导航条效果”旨在重现淘宝网首页的导航菜单样式和交互,利用JavaScript(JS)实现动态特效,提升用户体验。在这个项目中,我们将探讨以下几个关键知识点: 1. **HTML 结构**: - 导航条通常由...

    基于html + css + js完成淘宝网首页效果

    1. **导航栏的下拉菜单**:当用户悬停在顶部导航的某个分类上时,会弹出相关的子菜单。 2. **轮播图**:首页通常有商品轮播展示,使用JavaScript可以实现自动切换和手动点击切换的功能。 3. **搜索框**:实现关键词...

    CSS 天猫商城购物网站菜单特效.rar

    CSS JS实现的天猫购物网站的主菜单导航特效,一个强大的多级菜单特效,虽然现在天猫网站已经找不到这款菜单的影子了,但是当时这种菜单形式还是很流行的,鼠标放上后,向右伸出大面积的导航菜单,淘宝网貌似也是这种...

    仿京东商城H5主页面源代码,html、css、js 下载

    【描述】"仿京东商城H5主页面源代码,html、css、js"说明了这个项目主要由三部分组成:HTML负责结构,CSS负责样式,JavaScript则用于增加交互性。HTML(HyperText Markup Language)是网页的基础,它定义了网页的...

    淘宝装修代码生成器

    在淘宝旺铺装修中,CSS代码扮演了至关重要的角色,因为它使得店主能够自由调整店铺的各个部分,如店招、导航栏、商品展示区等,让店铺看起来更专业且有特色。 "淘宝装修代码生成器"支持旺铺专业版,这意味着它不仅...

    Taobao网站下拉导航地图代码

    这个项目是模仿淘宝网的下拉导航菜单,目的是帮助开发者理解如何使用HTML、CSS和JavaScript来实现类似功能。 【描述】提到的"Taobao网站下拉导航地图代码"暗示了这是一个实现动态下拉效果的导航结构,这种效果在...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...

    2014淘宝首页html模板是一款仿制淘宝首页的源代码html文件,近乎完美,浮动导航弹出 .rar

    对于这个模板,其浮动导航可能采用了CSS(Cascading Style Sheets)来实现。CSS允许开发者控制页面的样式、布局和视觉效果。浮动导航通常是一个始终显示在屏幕边缘的菜单,即使当用户滚动页面时也会保持可见。这可以...

    仿淘宝网首页导航条效果特效代码

    5. **定位功能**:淘宝导航条中的“当前所在位置”指示,能让用户明确知道他们在网站的哪个部分,增强了导航的可理解性。 6. **JavaScript和CSS3**:实现这些特效通常会用到JavaScript和CSS3技术。JavaScript负责...

    zblog 单页淘宝客模板_淘宝客建站源码

     采用zblog修改的模板,简单方便,直接解压上传到空间即可使用,页面简单,适合SEO,导航,次导航,最新文章列表,随机文章列表全部都有,网站采用扁平结构,非常适用淘宝客类小站,所有文章都在根目录下。...

    淘宝客单页程序 超好用

    淘宝客是指通过推广淘宝联盟的商品链接来赚取佣金的网络营销者。这个程序将排行榜模板与减肥文章小偷功能相结合,创造了一种能够吸引用户并提高搜索引擎排名的工具。 首先,"淘宝客单页"是网页设计的一种形式,它...

Global site tag (gtag.js) - Google Analytics