纯CSS打造淘宝导航菜单栏
店铺装修-PC端-基础页-首页-装修页面:编辑“菜单”模块-显示设置,粘贴如下CSS:
/* 导航条背景色*/
.skin-box-bd .menu-list{background: none repeat scroll 0 0 #3F7FCE;}
/*首页/店铺动态背景色*/
.skin-box-bd .menu-list .link{
background: none repeat scroll 0 0 #3F7FCE;
color: #C2D5ED;
font-family: 微软雅黑,黑体;
font-weight: bold;
font-size: small;}
/*首页/店铺动态右边线*/
.skin-box-bd .menu-list .menu{
border-width: 0 1px 0 0;
border-color: #3871B7;
border-style: solid;
background: #3F7FCE;
font-size: 14px;}
.skin-box-bd .menu-list .menu-hover .link{background: none repeat scroll 0 0 #3487ed;} /*首页/店铺动态文字颜色*/
.skin-box-bd .menu-list .menu .link .title{color:#fff}
.skin-box-bd .menu-list .menu-selected .link .title{background: none repeat scroll 0 0 #3F7FCE;}
.skin-box-bd .menu-list .menu-hover .link .title{background: none repeat scroll 0 0 #3487ed;} /*下拉菜单图标*/
.skin-box-bd .menu-list .menu .link .popup-icon{
height: 12px;
width: 12px;
background: url(//gdp.alicdn.com/tps/i1/T18WsRFcpdXXXPXsT8-51-381.gif) -14px -179px no-repeat;
}
.skin-box-bd .menu-list .menu-hover .link .popup-icon{
height: 12px;
width: 12px;
background: url(//gdp.alicdn.com/tps/i1/T18WsRFcpdXXXPXsT8-51-381.gif) -14px -199px no-repeat;
}
/*二级菜单*/
.menu-popup-cats .sub-cat{background: none repeat scroll 0 0 #2c5990;}
.menu-popup-cats .sub-cat-hover{background: none repeat scroll 0 0 #3487ed;color: #FFF;}
.menu-popup-cats li.sub-cat-hover::before{content: '%3e';} /*所有分类背景色*/
.skin-box-bd .all-cats .link{background: none repeat scroll 0 0 #ff4400;padding: 0 15px;}
/*所有分类文字颜色*/
.skin-box-bd .all-cats .title{
color: #f5f5f5;
font-family: 微软雅黑,黑体;
font-weight: bold;
font-size: small;
} /*所有分类-下拉菜单图标*/
.skin-box-bd .all-cats .link .popup-icon {
height: 12px;
width: 12px;
background: url(//gdp.alicdn.com/tps/i1/T18WsRFcpdXXXPXsT8-51-381.gif) 0 -220px no-repeat;
}
.skin-box-bd .all-cats-hover .link .popup-icon {
height: 12px;
width: 12px;
background: url(//gdp.alicdn.com/tps/i1/T18WsRFcpdXXXPXsT8-51-381.gif) 0 -240px no-repeat;
}
/*所有分类-二级菜单*/
.skin-box-bd .popup-content .cats-tree .fst-cat{background: none repeat scroll 0 0 #2c5990;}
.skin-box-bd .popup-content .cats-tree .cat-hd-hover{background: none repeat scroll 0 0 #3487ed;color: #FFF;}
/*所有分类-三级菜单*/
.skin-box-bd .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd a{ background: none repeat scroll 0 0 #2c5990;color: #C2D5ED; }
.skin-box-bd .popup-content .cats-tree .fst-cat .snd-pop .snd-cat-hd-hover a{background: none repeat scroll 0 0 #3487ed;color: #FFF;}
自定义导航示例:https://hotshop.bbs.taobao.com/detail.html?postId=7000589
进入CSS导航在线生成工具页面(http://taobaokaidian.com/tool/dhcss/ 如果不能点击打开,请复制网址到时浏览器中打开),
想了解更多样式,可以来这里学习css : http://www.w3cschool.cn/css_intro.html
纯CSS打造淘宝导航菜单栏的更多相关文章
- Expression构建DataTable to Entity 映射委托 sqlserver 数据库里面金额类型为什么不建议用float,实例告诉你为什么不能。 sql server 多行数据合并成一列 C# 字符串大写转小写,小写转大写,数字保留,其他除外 从0开始用U盘制作启动盘装Windows10系统(联想R720笔记本)并永久激活方法 纯CSS打造淘宝导航菜单栏 C# Winform
Expression构建DataTable to Entity 映射委托 1 namespace Echofool.Utility.Common { 2 using System; 3 using ...
- 【CSS Demo】纯 CSS 打造 Flow-Steps 导航
low-Steps 导航效果常用于需要表示执行步骤的交互页面,效果如下: 步骤一 步骤二 步骤三 通常使用图片来实现 Flow-Steps 效果,但此方法的灵活性不足,当内容变化较大时就可能需要重 ...
- 三角形变形记之纯css实现的分布导航条效果
三角形变形记,用纯css实现的分布导航条效果 <style type="text/css"> ul,li { list-style-type:none; font-si ...
- 一款纯css实现的漂亮导航
今天给大家分享一款纯css实现的漂亮导航.之前为大家分享过jquery实现的个人中心导航菜单,今天这款也是适合放在个人中心.还带来图标,效果不错.一起看下效果图: 在线预览 源码下载 实现的代码. ...
- 纯CSS打造BiliBili样式博客主题
前言 一直以来,我都在思考如何减少不必要的JS代码,仅通过CSS来实现博客园主题美化.CSS有很多魔法代码,例如:before,iconfont,order,等等,利用好这些技巧,也能实现很好美化效果 ...
- 纯CSS打造银色MacBook Air(完整版)
上一篇:<selection伪元素小解> ::selection{ background:blue; color:red; }p{font-size:14px;} 作者主页:myvin 博 ...
- 纯CSS打造可折叠树状菜单
1:Html代码 <li> <label for="subsubfolder1">下级</label> <input id="s ...
- 纯CSS打造Flow-Steps导航
几个要点: 1.三角箭头效果是用border实现的,详细的可以google下CSS 三角 2.IE6下不支持border-color:transparent(透明),解决方法是先将其设置为一个不常用的 ...
- HTML5 CSS3专题 纯CSS打造相冊效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
随机推荐
- 深入理解Java虚拟机 第三章 垃圾收集器 笔记
1.1 垃圾收集器 垃圾收集器是内存回收的具体实现.以下讨论的收集器是基于JDK1.7Update14之后的HotSpot虚拟机.这个虚拟机包含的所有收集器有: 上图展示了7种作用于不同分代的收集 ...
- 计算机17-1,2作业D
D.环形矩阵 Description 给定一个整数m,按m形成一个环形矩阵.如m=5,则环形矩阵为: 1 1 1 1 1 1 1 1 1 1 2 2 ...
- Spring Boot之WebSocket
一.项目说明 1.项目地址:https://github.com/hqzmss/test01-springboot-websocket.git 2.IDE:IntelliJ IDEA 2018.1.1 ...
- 对图片进行索引,存入数据库sqlite3中,实现快速搜索打开
对图片进行索引,存入数据库中,实现快速搜索打开 这个任务分为两步: 第一步:建立索引 import os import shutil import sqlite3 # 扫描函数,需扫描路径目录处 ...
- Shell中去除字符串前后空格的方法
[root@local ~]# echo " A BC " A BC [root@local ~]# eval echo " A BC " A BC 或者 [r ...
- 如何使用FluentMigrator进行数据库迁移
标题:如何使用FluentMigrator进行数据库迁移 地址:https://www.cnblogs.com/lwqlun/p/10649949.html 作者: Lamond Lu FluentM ...
- 前端ArcGIS学习之路-引言
本系列主要关注ArcGIS Server以及ArcGIS API for Javascript,由于我本人是从前端方面向GIS方面学习,希望能够给更多需要了解GIS的程序员同学更多的参考.另外本系列会 ...
- 数据结构与算法(十):红黑树与TreeMap详细解析
本文目录 一.为什么要创建红黑树这种数据结构 在上篇我们了解了AVL树,既然已经有了AVL这种平衡的二叉排序树,为什么还要有红黑树呢? AVL树通过定义我们知道要求树中每一个结点的左右子树高度差的绝对 ...
- docker(4)docker的网络,自定义网桥
Docker 的网络 运行 ifconfig 找到 docker0 : 虚拟网卡默认网卡名称为docker0 查看docker 的网桥: 我这里默认们没有进行安装 网桥管理设备:进行安装一下: yum ...
- c# 多种方法调整屏幕亮度
Github: https://github.com/CHNMaxGor/AjustScreenBrightness 方法一: 使用网上常说的 Gdi32.dll 下的 SetDeviceGammaR ...