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结构和样式分析的更多相关文章

  1. C/S结构与B/S结构的特点分析

    C/S结构与B/S结构的特点分析 为了区别于传统的C/S模式,才特意将其称为B/S模式.认识到这些结构的特征,对于系统的选型而言是很关键的. 1.系统的性能 在系统的性能方面,B/S占有优势的是其异地 ...

  2. ADB结构及代码分析【转】

    本文转载自:http://blog.csdn.net/happylifer/article/details/7682563 最近因为需要,看了下adb的源代码,感觉这个作者很牛,设计的很好,于是稍微做 ...

  3. Uboot优美代码赏析1：目录结构和malkefile分析

    Uboot优美代码赏析1:目录结构和malkefile分析 关于Uboot自己选的版本是目前最新的2011.06,官方网址为:http://www.denx.de/wiki/U-Boot/WebHom ...

  4. TOF与结构光技术分析

    TOF与结构光技术分析 一．概述 结构光(Structuredlight),通常采用特定波长的不可见的激光作为光源,它发射出来的光带有编码信息,投射在物体上,通过一定算法来计算返回的编码图案的畸变来得 ...

  5. 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计

    第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...

  6. SSRS报表服务随笔(rdl报表服务)-报表结构与样式

    设计rdl报表,比设置HTML页面简单多了,Reporting报表分为页眉,页脚,主体三个部分 rdl文件实际是xml结构的文件,具体是什么语言呢,很抱歉,这点我还不能回复,在我看来,是由固定节点的x ...

  7. Javascript 笔记与总结（2-15）结构、样式、行为分离

    [例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  8. 结构-行为-样式-JqueryUI拖放使用实例（全）

    最近工作中有个需要是动态配置页面,想到之前公司有做过类似的,用的是JqueryUi,所以就看了下它的Api.下面就是我做的小Demo,想用的同学可以参考: Html: <div class=&q ...

  9. 结构-行为-样式-css&html横纵居中最佳实践

    最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一).这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素 ...

随机推荐

  1. Android记事本开发01

    今天: 学习一下Android的基本知识,了解一下记事本开发大概需要哪些知识. 昨天: 无 遇到的问题:

  2. HashMap 的深入学习

    Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap.Hashtable.LinkedHashMap和TreeMap,类继承关系如下图 ...

  3. POJ 1061 青蛙的约会 | 同余方程和exGcd

    题解: 要求s+px=t+qx (mod L) 移项 (p-q)x=t-s (mod L) 等价于 (p-q)x+Ly=t-s 即ax+by=c的方程最小非负根 exGcd后乘个C #include& ...

  4. Extra Judicial Operation

    Description The Suitably Protected Programming Contest (SPPC) is a multi-site contest in which conte ...

  5. mysql5.6免安装配置（菜鸟版）

    mysql5.6免安装配置 MySQL5.6.13安装步骤(Windows7 32位) 1. 下载MySQL Community Server 5.6.13 2. 解压MySQL压缩包 将以下载的My ...

  6. 关于#include <bits/stdc++.h>

    经常看人写#include <bits/stdc++.h>却不知道是干啥的? #include<bits/stdc++.h>包含了目前c++所包含的所有头文件 对比: #inc ...

  7. bzoj3969 [WF2013]Low Power

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3969 [题解] 二分答案x,贪心选取,如果选取了i个,有j对,那么要满足i<=2*j* ...

  8. 洛谷P2564 [SCOI2009]生日礼物

    题目背景 四川2009NOI省选 题目描述 小西有一条很长的彩带,彩带上挂着各式各样的彩珠.已知彩珠有N个,分为K种.简单的说,可以将彩带考虑为x轴,每一个彩珠有一个对应的坐标(即位置).某些坐标上可 ...

  9. 在floodlight源码的基础上添加一个新的module并正确运行

    1.在src/main/java目录下新建一个package,目录结构如下: 2.在新建的package下,新建一个class,名字就是自定义的module,接下来implements想实现的serv ...

  10. mysql 事务、游标

    mysql 事务 在MySQL中只有使用了Innodb数据库引擎的数据库或表才支持事务,所以很多情况下我们都使用innodb引擎. 事务处理可以用来维护数据库的完整性,保证成批的SQL语句要么全部执行 ...