纯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 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...
随机推荐
- 谈谈.NET架构师面试及如何设计面试题
上星期:应老东家的要求,帮其面试.NET架构师. 于是:老东家进行了一星期的简历收集: 终于:在一堆简历里,精挑细选了四个: 约了:周末上午下午各两个. 面试者年龄:在30-35岁左右,差不多10年. ...
- FPGA学习笔记(七)——FSM(Finite State Machine,有限状态机)设计
FPGA设计中,最重要的设计思想就是状态机的设计思想!状态机的本质就是对具有逻辑顺序和时序规律的事件的一种描述方法,它有三个要素:状态.输入.输出:状态也叫做状态变量(比如可以用电机的不同转速作为状态 ...
- python 小练习题做起来
1# 有两个磁盘文件A和B,各存放一行字母,要求把这两个文件中的信息合并# (按字母顺序排列), 输出到一个新文件C中.with open('a') as f1: a=f1.read()with op ...
- 实战经验丨CTF中文件包含的技巧总结
站在巨人的肩头才会看见更远的世界,这是一篇技术牛人对CTF比赛中文件包含的内容总结,主要是对一些包含点的原理和特征进行归纳分析,并结合实际的例子来讲解如何绕过,全面细致,通俗易懂,掌握这个新技能定会让 ...
- 死磕 java集合之ConcurrentLinkedQueue源码分析
问题 (1)ConcurrentLinkedQueue是阻塞队列吗? (2)ConcurrentLinkedQueue如何保证并发安全? (3)ConcurrentLinkedQueue能用于线程池吗 ...
- [翻译 EF Core in Action 1.9] 掀开EF Core的引擎盖看看EF Core内部是如何工作的
Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...
- ajax调用WebAPI添加数据
//获取账号名 var Name = document.getElementById("Text1").value;//获取密码 var Pass = document.getEl ...
- 新手学习WEB前端流程以及学习中常见的误区
学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...
- 如何给自己的app添加分享到有道云笔记这样的功能
文章同步自http://javaexception.com/archives/34 如何给自己的app添加分享到有道云笔记这样的功能 问题: 在之前的一个开源笔记类项目Leanote中,有个用户反馈想 ...
- 【error】Gradle sync failed: Unable to start the daemon process.【已解决】
---恢复内容开始--- 在克隆GIT项目后,Android Studio 报错: Gradle sync failed: Unable to start the daemon process. Th ...