tshop-pbsm-shop-nav-ch结构和样式分析
html结构
<div id="content" class="eshop head-expand tb-shop">
<div id="hd">
<div class="layout grid-m J_TLayout">
<div class="col-main">
<div class="main-wrap J_TRegion" >
<div class="J_TModule "> <div class="skin-box tb-module tshop-pbsm tshop-pbsm-shop-nav-ch" style="display: block; visibility: visible;"> <s class="skin-box-tp"><b></b></s>
<div class="skin-box-bd">
<div class="all-cats popup-container all-cats-hover">
<div class="all-cats-trigger popup-trigger"> <a class="link " href="#" data-spm-anchor-id="0.0.0.0"> <span class="title"> 所有分类 </span> <i class="popup-icon"></i> </a> </div>
</div>
<ul class="menu-list">
<li class="menu" > <a class="link" href="#" rel="nofollow"><span class="title">首页</span></a> </li> <li class="menu "> <a class="link " href="#" rel="nofollow"> <span class="title">店铺动态</span> </a> </li> <!--无下级 -->
<li class="menu"><a class="link" href="#" rel="nofollow"><span class="title">导航标题</span> </a></li> <!--有下级 -->
<li class="menu popup-container menu-hover"><a class="link popup-trigger" href="#" rel="nofollow"><span class="title">春秋装</span> <i class="popup-icon cat-popup-i"></i></a></li> <li class="menu"> <a class="link " href="#" rel="nofollow"> <span class="title">导航标题</span> </a> </li>
<li class="menu"><a class="link" href="#" rel="nofollow"><span class="title">导航标题</span> </a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="bd" style="width:100%">
<div class="layout grid-s5m0 J_TLayout">
<div class="col-main">
<div class="main-wrap J_TRegion"> </div>
</div>
<div class="col-sub J_TRegion"> </div>
</div>
</div>
<div id="ft">
<div class="layout grid-m J_TLayout">
<div class="col-main">
<div class="main-wrap J_TRegion"> </div>
</div>
</div>
</div>
<div class="tshop-pbsm-shop-nav-ch">
<div class="skin-box-bd" style="width: 0px; height: 0px;">
<div class="popup-content all-cats-popup popup overlay ext-position popup-shown overlay-shown" style="visibility: visible; z-index: 100000000; left: 325px; top: 49px;">
<div class="contentbox">
<div class="popup-inner">
<ul class="J_TAllCatsTree cats-tree">
<li class="cat fst-cat">
<h4 class="cat-hd fst-cat-hd has-children"> <i class="cat-icon fst-cat-icon"></i> <a href="#" class="cat-name fst-cat-name">所有宝贝</a> </h4>
<div class="snd-pop">
<div class="snd-pop-inner">
<ul class="fst-cat-bd">
<li class="cat snd-cat">
<h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a href="#" class="by-label by-sale snd-cat-name" rel="nofollow">按销量</a> </h4>
<h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a href="#" class="by-label by-new snd-cat-name" rel="nofollow">按新品</a> </h4>
<h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a href="#" class="by-label by-price snd-cat-name" rel="nofollow">按价格</a> </h4>
</li>
</ul>
</div>
</div>
</li>
<li class="cat fst-cat">
<h4 class="cat-hd fst-cat-hd has-children"> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">春秋装</a> </h4>
<div class="snd-pop">
<div class="snd-pop-inner">
<ul class="fst-cat-bd">
<li class="cat snd-cat">
<h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#"> 纯棉外套 </a> </h4>
</li>
<li class="cat snd-cat">
<h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#"> 纯棉卫衣 </a> </h4>
</li>
<li class="cat snd-cat">
<h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#"> 弹力纯棉卫衣 </a> </h4>
</li>
</ul>
</div>
</div>
</li>
<li class="cat fst-cat">
<h4 class="cat-hd fst-cat-hd has-children cat-hd-hover"> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">小童夏装</a> </h4>
<div class="snd-pop ks-popup ks-overlay ks-ext-position ks-popup-shown ks-overlay-shown" style="visibility: visible; z-index: 100000000; left: 188px; top: 56px;">
<div class="ks-contentbox">
<div class="snd-pop-inner">
<ul class="fst-cat-bd">
<li class="cat snd-cat">
<h4 class="cat-hd snd-cat-hd snd-cat-hd-hover"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" style="color:#fff;" href="#" data-spm-anchor-id="0.0.0.0"> T恤短袖 </a> </h4>
</li>
<li class="cat snd-cat">
<h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#" data-spm-anchor-id="0.0.0.0"> 背心吊带 </a> </h4>
</li>
<li class="cat snd-cat">
<h4 class="cat-hd snd-cat-hd"> <i class="cat-icon snd-cat-icon"></i> <a class="cat-name snd-cat-name" href="#"> 夏裤 </a> </h4>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="cat fst-cat">
<h4 class="cat-hd fst-cat-hd has-children"> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">秋衣秋裤</a> </h4>
<li class="cat fst-cat">
<h4 class="cat-hd fst-cat-hd "> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">大童夏装</a> </h4>
</li>
<li class="cat fst-cat">
<h4 class="cat-hd fst-cat-hd "> <i class="cat-icon fst-cat-icon active-trigger"></i> <a class="cat-name fst-cat-name" href="#">夏季套装</a> </h4>
</li>
</ul>
</div>
</div>
</div>
<div class="popup-content">
<ul class="menu-popup-cats">
<li class="sub-cat"><a href="#" class="cat-name" rel="nofollow">纯棉外套</a></li>
<li class="sub-cat"><a href="#" class="cat-name" rel="nofollow">纯棉卫衣</a></li>
<li class="sub-cat"><a href="#" class="cat-name" rel="nofollow">弹力纯棉卫衣</a></li>
</ul>
</div>
<!--下拉 -->
<div class="popup-content popup overlay ext-position popup-shown overlay-shown" aria-disabled="false" style="visibility: visible; z-index: 100000000; left: 780.46875px; top: 49px;">
<div class="contentbox">
<ul class="menu-popup-cats">
<li class="sub-cat"><a href="#" class="cat-name" rel="nofollow" data-spm-anchor-id="0.0.0.0">背心吊带</a></li>
<li class="sub-cat sub-cat-hover"><a href="#" class="cat-name" rel="nofollow">T恤短袖</a></li>
<li class="sub-cat"><a href="#" class="cat-name" rel="nofollow">夏裤</a></li>
</ul>
</div>
</div> </div>
</div>
</div>
全局：
/*当只有一个导航时，分类上会多menu-select加背景黑，记得修改*/
.tshop-pbsm-shop-nav-ch .menu-list .menu-selected{background:none;}
.tshop-pbsm-shop-nav-ch .menu-list .menu-selected .link{background:none;border-bottom:none;} /*所有链接颜色*/
.tshop-pbsm-shop-nav-ch .skin-box-bd a{color:#fff;} /*去除所有下拉箭头*/
.tshop-pbsm-shop-nav-ch .all-cats .link .popup-icon,.tshop-pbsm-shop-nav-ch .menu-list .link .popup-icon{display:none;} /*去除所有下拉按钮和边框背景*/
.tshop-pbsm-shop-nav-ch .all-cats .link,.tshop-pbsm-shop-nav-ch .menu-list .link{background:none;border:none;}
.tshop-pbsm-shop-nav-ch .all-cats .link .popup-icon,.tshop-pbsm-shop-nav-ch .menu-list .link .popup-icon{display:none;} /*整行导航底边*/
.tshop-pbsm-shop-nav-ch .skin-box-bd{border-bottom:none;} /*整行导航背景和边框*/
.tshop-pbsm-shop-nav-ch .skin-box-bd{background: none;border:none;}
所有分类
/*所有分类 字体颜色+字号+粗细*/
.tshop-pbsm-shop-nav-ch .all-cats .link{color:red;font-weight:bold;} /*一级内容 边框*/
.tshop-pbsm-shop-nav-ch .popup-content{border: 1px solid red;background:#fff;} /*一级内容 宽*/
.tshop-pbsm-shop-nav-ch .all-cats-popup{width:188px;} /*一级菜单hover 字体颜色 宽度 高度*/
.tshop-pbsm-shop-nav-ch .popup-content .cats-tree .cat-hd-hover .fst-cat-name{color:#C4B39F;width:160px;height:28px;} /*一级菜单hover 背景*/
.tshop-pbsm-shop-nav-ch .popup-content .cats-tree .cat-hd-hover{background:none;}
/*二级内容 宽 背景 边框*/
.tshop-pbsm-shop-nav-ch .popup-content .cats-tree .snd-pop-inner{background:#fff;width:190px;} /*二级菜单图标 宽 高 margin 背景*/
.tshop-pbsm-shop-nav-ch .popup-content .cats-tree .snd-cat-icon{display:none;} /*二级菜单hover 字体颜色 宽 高*/
.tshop-pbsm-shop-nav-ch .popup-content .cats-tree a.snd-cat-name:hover{color:#C4B39F;width:140px;height:28px;} /*二级菜单hover 背景*/
.tshop-pbsm-shop-nav-ch .popup-content .cats-tree .snd-cat-hd:hover{background:red;}
普通导航
/*普通导航链接 字体颜色 字体大小 背景 边框*/
.tshop-pbsm-shop-nav-ch .menu-list .link{color:red;background:none;border:none;font-size:18px;} /*导航hover 背景*/
.tshop-pbsm-shop-nav-ch .menu-list .menu-hover .link{background:red;} /*内容hover 背景*/
.tshop-pbsm-shop-nav-ch .menu-popup-cats .sub-cat-hover{background:red;} /*内容hover 字体*/
.tshop-pbsm-shop-nav-ch .menu-popup-cats .sub-cat-hover a.cat-name{color:red;}
tshop-pbsm-shop-nav-ch结构和样式分析的更多相关文章
- C/S结构与B/S结构的特点分析
C/S结构与B/S结构的特点分析 为了区别于传统的C/S模式,才特意将其称为B/S模式.认识到这些结构的特征,对于系统的选型而言是很关键的. 1.系统的性能 在系统的性能方面,B/S占有优势的是其异地 ...
- ADB结构及代码分析【转】
本文转载自:http://blog.csdn.net/happylifer/article/details/7682563 最近因为需要,看了下adb的源代码,感觉这个作者很牛,设计的很好,于是稍微做 ...
- Uboot优美代码赏析1：目录结构和malkefile分析
Uboot优美代码赏析1:目录结构和malkefile分析 关于Uboot自己选的版本是目前最新的2011.06,官方网址为:http://www.denx.de/wiki/U-Boot/WebHom ...
- TOF与结构光技术分析
TOF与结构光技术分析 一．概述 结构光(Structuredlight),通常采用特定波长的不可见的激光作为光源,它发射出来的光带有编码信息,投射在物体上,通过一定算法来计算返回的编码图案的畸变来得 ...
- 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计
第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...
- SSRS报表服务随笔(rdl报表服务)-报表结构与样式
设计rdl报表,比设置HTML页面简单多了,Reporting报表分为页眉,页脚,主体三个部分 rdl文件实际是xml结构的文件,具体是什么语言呢,很抱歉,这点我还不能回复,在我看来,是由固定节点的x ...
- Javascript 笔记与总结（2-15）结构、样式、行为分离
[例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 结构-行为-样式-JqueryUI拖放使用实例（全）
最近工作中有个需要是动态配置页面,想到之前公司有做过类似的,用的是JqueryUi,所以就看了下它的Api.下面就是我做的小Demo,想用的同学可以参考: Html: <div class=&q ...
- 结构-行为-样式-css&html横纵居中最佳实践
最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一).这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素 ...
随机推荐
- Android Canvas类介绍
当我们调整好画笔之后,现在需要绘制到画布上,这就得用Canvas类了.在Android中既然把Canvas当做画布,那么就可以在画布上绘制我们想要的任何东西.除了在画布上绘制之外,还需要设置一些关于画 ...
- java 用Arrays.binarySearch解读 快速定位数字范围
在一些时候,需要用给一个数字找到适合的区间,Arrays.binarySearch可达到这个目的. static int binarySearch(int[] a, int key) ...
- 当发送ICMP包的时候不一定能收得到（arp已经应答了）【复现不了了】
arp已经应答了,然后再返回ICMP应答的时候竟然不被回复. 其实这里想想也很容易想清楚: 虽然arp给了回复,但是真正到ICMP报文到的时候,我理解报文到的时候,我理解还是要进行与本地网络兑换的,本 ...
- kvm搭建完成了，那么问题来了，到底是什么原理
kvm中到底是怎么模拟的CPU和内存? 收到了大量的 这里有一个裸的调用kvm接口的实例,超赞: http://www.cnblogs.com/Bozh/p/5753379.html 使用kvm的AP ...
- 第十七篇：django基础（二）
本篇内容 简单图书crm系统 编写views views:作为MVC中的C,接收用户的输入,调用数据库Model层和业务逻辑Model层,处理后将处理结果渲染到V层中去. app01/views.py ...
- [洛谷P4389]付公主的背包
题目大意:有$n(n\leqslant10^5)$种物品,第$i$个物品体积为$v_i$,都有$10^5$件.给定$m(m\leqslant10^5)$,对于$s\in [1,m]$,请你回答用这些商 ...
- POJ2187 旋转卡壳 求最长直径
给定平面上的一些散点集,求最远两点距离的平方值. 题解: 旋转卡壳求出凸包,然后根据单调性,求出最远两点的最大距离 #pragma GCC optimize(2) #pragma G++ optimi ...
- git的回退和撤销操作
回退是git的使用中很常用的一个操作,如果清楚各个回退命令的作用,不仅大大加快代码回退的效率,还能避免代码回退造成的事故 1.git reset --hard [commit] 清空暂存和未暂存的更改 ...
- Restful 权限的思考
转自:https://cnodejs.org/topic/551802d3687c387d2f5b2906 基于RESTful API 怎么设计用户权限控制? 原文链接:简书 前言 有人说,每个人 ...
- #!/bin/sh简介
第一次学shell编程,看的文章中说shell程序必须以"#!/bin/sh"开始,也就认为是这样了,虽然知道在shell中以"#"开始的语句都是注释,但也从没 ...