仿京东左侧栏目导航 -

jjklmm

浏览: 57555 次
性别:
来自: 北京

最近访客更多访客>>

jk_zero

dagf113225

zhifux868

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

仿京东左侧栏目导航

博客分类：

javascript

jquery rss

效果图：

查看效果：http://www.miiceic.org.cn/eg/eg10/abzc.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=7" />
<title>安博中程企业培训,企业内训,专注于android培训,软考培训,软件开发,软件工程,嵌入式,UI设计,重构,架构等IT企业培训</title>
<meta name="keywords" content="企业培训,企业内训,android培训,软考培训,it企业培训"/>
<meta name="description" content="安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌."/>
<meta name="copyright" content="安博教育集团中程在线北京科技有限公司版权所有"/>
</head>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font:12px/22px "宋体", "Arial Unicode MS"; color:#666; background-color:#f9f9f9;}
em{ font-style:normal;}
H3 {FONT-SIZE: 12px}
.box{width:188px;/** margin:20px auto; **/text-align:left; float:left; margin:4px 10px 0 0;}
.allsort {Z-INDEX:10;/** BACKGROUND: url(/images/Bg.jpg) no-repeat 0px -166px;**/ FLOAT: left; WIDTH: 188px; MARGIN-left: 4px; POSITION: relative; HEIGHT:32px; background-color:#FFFFFF;clear:both;}
.allsort .mt {PADDING-RIGHT: 12px; PADDING-LEFT: 16px; CURSOR: pointer; LINE-HEIGHT: 24px; HEIGHT: 24px; margin:0}
.allsort .mt { font-family:"微软雅黑", "宋体", "黑体";FONT-SIZE: 14px; FLOAT: left; COLOR: #630}
#o-search .allsort .mt A {COLOR: #630}
.allsort .mt .extra {DISPLAY: none}
.allsort .mc { left:-1px; background:#FFF;BORDER-RIGHT: #C6001D 1px solid; PADDING-RIGHT: 3px; BORDER-TOP: #C6001D 0px solid; PADDING-LEFT: 3px;PADDING-BOTTOM: 0px; OVERFLOW: visible; BORDER-LEFT: #C6001D 1px solid; WIDTH: 182px; PADDING-TOP: 0px; BORDER-BOTTOM: #C6001D 1px solid; POSITION: absolute; TOP: 32px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px}
.allsort .item {BORDER-TOP: #E8E8E8 1px solid; WIDTH: 176px; HEIGHT:27px}
.allsort .fore {BORDER-TOP-STYLE: none}
.allsort SPAN {DISPLAY: block; Z-INDEX: 1; WIDTH: 176px; POSITION: relative}
.allsort H3 { PADDING-LEFT: 20px; FONT-WEIGHT: normal; /*BACKGROUND: url(/images/bg.jpg) no-repeat -318px -240px;BORDER-LEFT: #fef8ef 1px solid;BORDER-RIGHT: #fef8ef 0px solid; BORDER-TOP: #fef8ef 1px solid; BORDER-BOTTOM: #fef8ef 1px solid;*/ WIDTH: 165px; HEIGHT:28px;}
.allsort H3 A:link {    DISPLAY: block; COLOR: #666; LINE-HEIGHT: 27px; HEIGHT:27px}
.allsort H3 A:visited {DISPLAY: block; COLOR: #666; LINE-HEIGHT: 27px; HEIGHT: 27px}
.allsort H3 A:hover {COLOR: #ff0000}
.allsort H3 A:active {COLOR: #666}
.allsort S {DISPLAY: block; BACKGROUND: url(/images/homeBg_53.gif) no-repeat top right; LEFT: 156px; WIDTH: 13px; POSITION: absolute; TOP: 10px; HEIGHT: 13px}
.allsort .item .i-mc { DISPLAY: none; LEFT: 188px; OVERFLOW: hidden; WIDTH: 563px;/** BACKGROUND: #fff9ef;BORDER-LEFT: #c30 1px solid; BORDER-BOTTOM: #c30 1px solid;BORDER-RIGHT: #c30 1px solid; BORDER-TOP: #c30 1px solid;**/ border:1px solid #FF0000; background-color:#FFFFFF; POSITION: absolute; TOP: 0px}
.allsort .item DT {    PADDING-RIGHT: 6px; PADDING-LEFT: 0px; FONT-WEIGHT: bold; PADDING-BOTTOM: 0px; PADDING-TOP: 3px}
.allsort .item DD {    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; OVERFLOW: hidden; PADDING-TOP: 3px; ZOOM: 1}
.allsort .subitem {    PADDING-RIGHT: 4px; PADDING-LEFT: 8px; MIN-HEIGHT: 300px; FLOAT: left; PADDING-BOTTOM: 0px; WIDTH: 484px; PADDING-TOP: 0px}
.allsort .subitem .fore{ display:block; width:550px; clear:both; overflow:hidden; border-bottom:1px solid #eee;}
.allsort .subitem dt{ width:80px; text-align:center; float:left;}
.allsort .subitem dd{ float:left; display:block; color:#999999;}
.allsort .subitem dd span{ display: inline-table; color:#333333; width:90px; float:left;}
.allsort .subitem dd a{ color:#3399FF;}
/**.allsort .subitem DL {    PADDING-RIGHT: 0px; BORDER-TOP: #ffefd7 1px solid; PADDING-LEFT: 0px; PADDING-BOTTOM: 6px; OVERFLOW: hidden; PADDING-TOP: 6px; ZOOM: 1}
.allsort .subitem .fore {    BORDER-TOP-STYLE: none}
.allsort .subitem DT {    FLOAT: left; WIDTH: 80px; LINE-HEIGHT: 22px; TEXT-ALIGN: right}
.allsort .subitem DT A{COLOR: #c00;}
.allsort .subitem DD {    FLOAT: left; }
.allsort .subitem DD A { BORDER-LEFT: #ccc 1px solid; padding:0 8px; margin-bottom:5PX; TEXT-DECORATION: underline;display:inline-block; line-height:20PX;}**/
.allsort .fr {BACKGROUND: #fff; MARGIN-BOTTOM: -2000px; PADDING-BOTTOM: 2010px; WIDTH: 176px}
.allsort .fr DL {PADDING-BOTTOM: 0px}
#o-search .allsort .fr A {COLOR: #666}
.allsort .brands {PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 6px; WIDTH: 160px; PADDING-TOP: 6px}
.allsort .brands EM {FLOAT: left; WIDTH: 80px}
.allsort .brands DD {LINE-HEIGHT: 20px; PADDING-TOP: 6px}
.allsort .promotion {PADDING-RIGHT: 8px; PADDING-LEFT: 8px; PADDING-BOTTOM: 6px; WIDTH: 160px; PADDING-TOP: 6px}
.allsort .promotion DD {LINE-HEIGHT: 20px; PADDING-TOP: 6px}
.allsort .mc .extra {PADDING-RIGHT: 8px; BORDER-TOP: #fde6d2 1px solid; PADDING-LEFT: 8px; BACKGROUND: #fdf1de; PADDING-BOTTOM: 7px; PADDING-TOP: 7px}
#o-search .allsort .mc .extra A {COLOR: #c00}
.allsorthover {BACKGROUND-POSITION: 0px -166px}
.allsorthover .mt .extra {BACKGROUND-POSITION: -274px -190px}
.allsorthover .mc {DISPLAY: block}
.allsort .hover SPAN {Z-INDEX: 13; WIDTH: 160px}
.allsort .hover H3 {BORDER-RIGHT: #c30 0px solid; BORDER-TOP: #c30 1px solid; FONT-WEIGHT: bold; BACKGROUND: url(/images/Bg.jpg) #fff no-repeat -318px -172px; OVERFLOW: hidden; BORDER-LEFT: #c30 1px solid; BORDER-BOTTOM: #c30 1px solid}
.allsort .hover S {DISPLAY: none}
.allsort .hover .i-mc {DISPLAY: block; Z-INDEX: 12}
* HTML .allsort .item DD {PADDING-BOTTOM: 6px}
.allsort .blue{ border-top:solid 1px #ddd;}
.allsort .blue a{color:#3399FF;font-weight:bold;text-decoration: underline; padding-left:20px;}
</style>
<body>
<script type="text/javascript" src="http://www.miiceic.org.cn/templets/js/jquery.min.js"></script>
<script type="text/javascript">
(function ($){$.fn.hoverForIE6 = function (option) { var s = $.extend({ current: "hover", delay: 10 }, option || {});$.each(this, function () { var timer1 = null, timer2 = null, flag = false;$(this).bind("mouseover", function () { if (flag) { clearTimeout(timer2); } else { var _this = $(this); timer1 = setTimeout(function () { _this.addClass(s.current); flag = true; }, s.delay); } }).bind("mouseout", function () { if (flag) { var _this = $(this); timer2 = setTimeout(function () { _this.removeClass(s.current); flag = false; }, s.delay); } else { clearTimeout(timer1); } }) }) } })(jQuery);
</script>
      <div class="allsort">
        <div class="mt"><a href="http://www.miiceic.org.cn/">安博中程栏目分类</a></div>
        <div class="mc">
          <div class="item fore">
            <span>
              <h3>最新公开课</h3>
            </span>
            <div class="i-mc">
              <div class="subitem">
                <dl class="fore">
                  <dt>北京</dt>
                  <dd>
                    <p>
                        2012.03.29-03.30 “云计算架构鉴赏”培训 | 2012.03.29-03.31 “嵌入式系统软件架构”培训
                    </p>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>上海</dt>
                  <dd>
                    <p>
                        2012.03.29-03.31 “大型架构案例分析-训练营”培训班 | 2012.03.24-03.28 “数据库仓库和BI企业级技术高级应用”培训班
                    </p>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>深圳</dt>
                  <dd>
                    <p>
                        2012.03.21-03.24 “软件详细设计师”高级培训班 | 2012.03.25-03.27 “物联网应用及开发”进阶培训
                    </p>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="item ">
            <span>
              <h3>高端课程</h3>
            </span>
            <div class="i-mc">
              <div class="subitem">
                <dl class="fore">
                  <dt>软件工程培训</dt>
                  <dd>
                  <p>软件架构专题 | 大型架构案例分析 | 软件设计专题 </p>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>嵌入式培训</dt>
                  <dd>
                  <p>嵌入式架构设计 | 嵌入式系统开发 | 嵌入式软件开发 </p>
                  </dd>
                </dl>
                <dl class="fore">

                  <dt>数据库培训</dt>
                  <dd>
                  <p>SQL Server系列 | ORACLE系列 | DB2系列</p>
                  </dd>
                </dl>
                <dl class="fore">

                  <dt>专项突破 </dt>
                  <dd>
                    <p>
                      <span>数学</span>思维训练 |奥数 | 华数 | 数学集训
                    </p>
                    <p>
                      <span>语文</span>阅读 | 作文
                    </p>
                    <p>
                      <span>英语</span>三一口语 | 新概念英语 | 剑桥英语 | 朗文英语 | 阅读写作
                    </p>
                  </dd>
                </dl>

              </div>

            </div>
          </div>
          <div class="item ">
            <span>
              <h3>安博中程</h3>
            </span>
            <div class="i-mc">
              <div class="subitem">
                <dl class="fore">

                  <dt><a href="http://www.miiceic.org.cn/">中程在线</a></dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>安博中程</dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>企业内训</dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>软考培训</dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>android培训</dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>UI设计</dt>
                  <dd>
                  </dd>
                </dl>
              </div>

            </div>
          </div>
          <div class="item ">
            <span>
              <h3>
                  <b>专家团队</b>
              </h3>
              <s></s>
            </span>
            <div class="i-mc">
              <div class="subitem">
                <dl class="fore">
                  <dt>台湾顾问</dt>
                  <dd>
                    <p>
                      <a href="http://www.miiceic.org.cn/tuandui/">高焕堂</a>| <a href="http://www.miiceic.org.cn/tuandui/">柯博文</a> | <a href="http://www.miiceic.org.cn/tuandui/">陈俊宏</a>
                    </p>

                  </dd>
                </dl>
                <dl class="fore">
                  <dt>中程专家</dt>
                  <dd>
                    <p>
                      <a href="http://www.miiceic.org.cn/tuandui/">杨秀峰</a> | <a href="http://www.miiceic.org.cn/tuandui/">温昱</a> | <a href="http://www.miiceic.org.cn/tuandui/">张云河</a>
                    </p>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="item">
            <span>
              <h3>最新公开课</h3>
            </span>
            <div class="i-mc">
              <div class="subitem">
                <dl class="fore">
                  <dt>北京</dt>
                  <dd>
                    <p>
                        2012.03.29-03.30 “云计算架构鉴赏”培训 | 2012.03.29-03.31 “嵌入式系统软件架构”培训
                    </p>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>上海</dt>
                  <dd>
                    <p>
                        2012.03.29-03.31 “大型架构案例分析-训练营”培训班 | 2012.03.24-03.28 “数据库仓库和BI企业级技术高级应用”培训班
                    </p>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>深圳</dt>
                  <dd>
                    <p>
                        2012.03.21-03.24 “软件详细设计师”高级培训班 | 2012.03.25-03.27 “物联网应用及开发”进阶培训
                    </p>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
          <div class="item ">
            <span>
              <h3>高端课程</h3>
            </span>
            <div class="i-mc">
              <div class="subitem">
                <dl class="fore">
                  <dt>软件工程培训</dt>
                  <dd>
                  <p>软件架构专题 | 大型架构案例分析 | 软件设计专题 </p>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>嵌入式培训</dt>
                  <dd>
                  <p>嵌入式架构设计 | 嵌入式系统开发 | 嵌入式软件开发 </p>
                  </dd>
                </dl>
                <dl class="fore">

                  <dt>数据库培训</dt>
                  <dd>
                  <p>SQL Server系列 | ORACLE系列 | DB2系列</p>
                  </dd>
                </dl>
                <dl class="fore">

                  <dt>专项突破 </dt>
                  <dd>
                    <p>
                      <span>数学</span>思维训练 |奥数 | 华数 | 数学集训
                    </p>
                    <p>
                      <span>语文</span>阅读 | 作文
                    </p>
                    <p>
                      <span>英语</span>三一口语 | 新概念英语 | 剑桥英语 | 朗文英语 | 阅读写作
                    </p>
                  </dd>
                </dl>

              </div>

            </div>
          </div>
          <div class="item ">
            <span>
              <h3>企业培训</h3>
            </span>
            <div class="i-mc">
              <div class="subitem">
                <dl class="fore">

                  <dt><a href="http://www.miiceic.org.cn/">中程在线</a></dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>安博中程</dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>企业内训</dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>软考培训</dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>android培训</dt>
                  <dd>
                  </dd>
                </dl>
                <dl class="fore">
                  <dt>UI设计</dt>
                  <dd>
                  </dd>
                </dl>
              </div>

            </div>
          </div>
          <div class="item ">
            <span>
              <h3>
                  <b>专家团队</b>
              </h3>
              <s></s>
            </span>
            <div class="i-mc">
              <div class="subitem">
                <dl class="fore">
                  <dt>台湾顾问</dt>
                  <dd>
                    <p>
                      <a href="http://www.miiceic.org.cn/tuandui/">高焕堂</a>| <a href="http://www.miiceic.org.cn/tuandui/">柯博文</a> | <a href="http://www.miiceic.org.cn/tuandui/">陈俊宏</a>
                    </p>

                  </dd>
                </dl>
                <dl class="fore">
                  <dt>中程专家</dt>
                  <dd>
                    <p>
                      <a href="http://www.miiceic.org.cn/tuandui/">杨秀峰</a> | <a href="http://www.miiceic.org.cn/tuandui/">温昱</a> | <a href="http://www.miiceic.org.cn/tuandui/">张云河</a>
                    </p>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </div>
      </div>
    <script type="text/javascript">
      $(".allsort .item").hoverForIE6({ delay: 150 });
    </script>
    <div style="float:left;width:600px;font-size:14px;line-height:36px;padding-top:50px;padding-left:20px;">
     安博中程企业培训多年来致力于android培训,软考培训,嵌入式,UI设计,重构,架构,软件测试,需求分析,软件开发,数据库,国防军工等IT高端技术的企业培训、企业内训,一直在行业内处于领先地位,所开企业内训或公开课如软考培训,android应用开发培训,软件工程培训,敏捷开发,嵌入式培训,项目管理及国防军工的电子产品设计和信息化培训等授课讲师均是知名专家,行业内领军人物,已成为中国高端培训第一品牌.
    </div>
</body>
</html>

查看效果：http://www.miiceic.org.cn/eg/eg10/abzc.html

查看图片附件

1
顶

1
踩

分享到：

ajax 弹出框式注册 | 云计算架构鉴赏

2012-02-08 08:59
浏览 2048
评论(1)
分类:Web前端
查看更多

1 楼 scjingying 2012-02-08

界面有点，，，。。。。

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

仿京东左侧栏目导航

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

仿京东左侧栏目导航

评论

发表评论

相关推荐

全屏浮动js

底部浮动js

javascript深入理解js闭包

javascript 实现圆角，兼容ie

实用下拉菜单

javascript 信息提示框

javascript 滚动条 动态加载内容

jquery 滚动条 动态加载内容

javascript 打印输出 json

javascript 打印输出 object

"(function(){})()"的分步解析

DOCTYPE对javascript的影响

div 拖动 移动

javascript 生成下拉菜单

最近访客更多访客>>

javascript 滚动条动态加载内容

jquery 滚动条动态加载内容

div 拖动移动