欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

课程培训类网站水平导航+侧导航+轮播图+轮播小广告

程序员文章站 2022-06-22 11:54:03
效果图 index.html index

效果图

课程培训类网站水平导航+侧导航+轮播图+轮播小广告

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>index</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/ux-micro-icon.css">
</head>

<body>

<!-- 主导航+侧导航 -->
<div class="m-indextopwrap f-pr">
    <div class="m-indextopnav">
        <div class="g-flow">
            <div class="topnav f-pr f-cb">
                <!-- 左导航 头部 -->
                <div class="u-indexnavcatebtn">
                    <a href="#" class="cbtn f-cb">
                        <div class="ic f-fl"></div>
                        <span class="qb f-fl f-f0">全部精品课</span>
                    </a>
                </div>
                <div class="u-indexnavcatedialog f-pa" id="j-nav-indexcatedialog">
                    <!-- 左导航 一级导航 -->
                    <div class="f-fl cateleft f-pa">
                        <div class="catebg f-pa">
                        </div>
                        <div class="items f-pa">
                            <div class="item">
                                <div class="curbg">
                                </div>
                                <div class="inn">
                                    <p>
                                        <a href="#" class="f-f0 first">办公效率</a>
                                        <a href="#" class="second">ppt</a>
                                        <a href="#" class="second">excel</a>
                                        <a href="#" class="second">word</a>
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="curbg">
                                </div>
                                <div class="inn">
                                    <p>
                                        <a href="#" class="f-f0 first">职业发展</a>
                                        <a href="#" class="second">个人成长</a>
                                        <a href="#" class="second">演讲口才</a>
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="curbg">
                                </div>
                                <div class="inn">
                                    <p>
                                        <a href="#" class="f-f0 first">编程开发</a>
                                        <a href="#" class="second">人工智能</a>
                                        <a href="#" class="second">python</a>
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="curbg">
                                </div>
                                <div class="inn">
                                    <p>
                                        <a href="#" class="f-f0 first">产品和设计</a>
                                        <a href="#" class="second">软件</a>
                                        <a href="#" class="second">产品运营</a>
                                        <a href="#" class="second">新媒体</a>
                                        <a href="#" class="second">产品策划</a>
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="curbg">
                                </div>
                                <div class="inn">
                                    <p>
                                        <a href="#" class="f-f0 first">生活方式</a>
                                        <a href="#" class="second">摄影</a>
                                        <a href="#" class="second">书法</a>
                                        <a href="#" class="second">理财</a>
                                    </p>
                                </div>
                            </div>
                            <div class="item">
                                <div class="curbg">
                                </div>
                                <div class="inn">
                                    <p>
                                        <a href="#" class="f-f0 first">升学辅导</a>
                                        <a href="#" class="second">考研</a>
                                        <a href="#" class="second">steam</a>
                                        <a href="#" class="second">小学</a>
                                    </p>
                                </div>
                            </div>
                            <div class="item last">
                                <div class="curbg">
                                </div>
                                <div class="inn">
                                    <p>
                                        <a href="#" class="f-f0 first">语言学习</a>
                                        <a href="#" class="second">英语</a>
                                        <a href="#" class="second">日语</a>
                                        <a href="#" class="second">新概念</a>
                                        <a href="#" class="second">实用口语</a>
                                        <a href="#" class="second">韩语</a>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 左导航 二级导航 -->
                    <div class="cateright f-pa f-cb">
                        <a class="close f-pa j-close" onclick="$('.rwrap').hide();"></a>
                        <!-- 左侧导航 二级导航 -->
                        <div class="f-pr rwrap f-cb cur">
                            <!-- 左侧二级导航内容区 -->
                            <div class="rwrap-left f-cb">
                                <div class="top-rec-box f-cb">
                                    <a class="top-rec f-fl" href="#">办公效率·精选好课</a>
                                    <a class="top-rec f-fl" href="#">跟刘万祥学excel商务图表</a>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">办公软件</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">ppt</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">excel</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">word</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">project</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">keynote</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">outlook</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">更多软件</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">工作效率</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">时间管理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">思维导图</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">电脑基础</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a 基础操作" href="#" class="f-f0 ">基础操作</a>
                                        <span class="slash">|</span>
                                        <a 常用工具" href="#" class="f-f0 ">常用工具</a>
                                    </p>
                                </div>
                            </div>
                            <!-- 右侧二级导航广告区 -->
                            <div class="rwrap-right f-cb">
                                <a class="f-f0 tit" href="#">系列课程</a>
                                <p class="links">
                                    <a href="#" class="f-cb f-fc6 f-f0">从excel到power bi数据分析可视化</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">excel+ppt+word小白变大神</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">英语口语指南——为暑期出境旅游定制</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">向《经济学人》学图表</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">向商业期刊学图表</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">如何成为真正的ppt高手</a>
                                    <a href="#" class="f-fc6 f-f0">更多&gt;&gt;</a>
                                </p>
                                <a href="#" class="picwrap">
                                    <img src="images/4ff708d8-9b24-43ea-a423-2496ee0cc901.png" class="f-pa pic">
                                </a>
                            </div>
                        </div>
                        <div class="f-pr rwrap f-cb">
                            <div class="rwrap-left f-cb">
                                <div class="top-rec-box f-cb">
                                    <a class="top-rec f-fl" href="#">职业发展·精选好课</a>
                                    <a class="top-rec f-fl" href="#">2018年提升路线图</a>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">求职应聘</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">职业规划</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">求职简历</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">面试技巧</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">个人提升</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">知识管理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">习惯养成</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">演讲与口才</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">个人品牌</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">思维方式</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">职场能力</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">职场经验</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">人脉管理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">礼仪形象</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">人际沟通</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">团队协作</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">专业岗位</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">医学科研</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">文献写作</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">商务谈判</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">职业培训</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">特色职业</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">管理能力</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">领导力</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">人力资源</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">财务管理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">项目管理</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">职业考试</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">财会金融管理类</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">公务员</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">工程医学类</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">电子商务师</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">新媒体运营师</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">更多考试</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">市场营销</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">市场销售</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">电子商务</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">品牌推广</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">网络营销</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">商业创业</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">经济学</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">商业创业</a>
                                    </p>
                                </div>
                            </div>
                            <div class="rwrap-right f-cb">
                                <a class="f-f0 tit" href="#">系列课程</a>
                                <p class="links">
                                    <a href="#" class="f-cb f-fc6 f-f0">向500强精英学习职场经验</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">跟秋叶一起轻松学会职场技能</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">高效成长:芝士魔方课程合集</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">跟职场教练柏永辉学人生进阶术</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">快速提升批判性思维系列课</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">改变职场命运的9门必修课</a>
                                    <a href="#" class="f-fc6 f-f0">更多&gt;&gt;</a>
                                </p>
                                <a href="#" class="picwrap">
                                <img src="images/cde905b0-d7ff-4edb-b1fb-352ff9c1f598.jpg" class="f-pa pic">
                                </a>
                            </div>
                        </div>
                        <div class="f-pr rwrap f-cb">
                            <div class="rwrap-left f-cb">
                                <div class="top-rec-box f-cb">
                                    <a class="top-rec f-fl" href="#">人工智能行家带你学</a>
                                    <a class="top-rec f-fl" href="#">python实战好课</a>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">编程语言</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">python</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">php</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">c语言</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">java</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">c++</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">c#</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">swift</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">r</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">git</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">人工智能与数据</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">人工智能</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">数据科学</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">大数据</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">数据库</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">区块链</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">前端开发</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">开发语言</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">开发框架</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">开发实践</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">后端开发 </a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">java web</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">php web</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">python</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">ruby</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">node.js</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">.net</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">j2ee</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">开发实践</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">游戏开发</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">游戏开发</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">移动开发</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">ios</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">android</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">windows phone</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">微信开发</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">手游开发</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">系统/硬件</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">云服务</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">信息安全</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">物联网</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">运维管理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">硬件开发</a>
                                    </p>
                                </div>
                            </div>
                            <div class="rwrap-right f-cb">
                                <a class="f-f0 tit" href="#">系列课程</a>
                                <p class="links">
                                    <a href="#" class="f-cb f-fc6 f-f0">python数据分析与挖掘实战</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">python人工智能实战</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">web前端,javascript入门到全栈</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">用wordpress做网站系列课程</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">java学习指南系列</a>
                                    <a href="#" class="f-fc6 f-f0">更多&gt;&gt;</a>
                                </p>
                                <a href="#" class="picwrap">
                                <img src="images/b39a41a9-5fa6-4507-bd71-85565b16f86b.png" class="f-pa pic">
                                </a>
                            </div>
                        </div>
                        <div class="f-pr rwrap f-cb">
                            <div class="rwrap-left f-cb">
                                <div class="top-rec-box f-cb">
                                    <a class="top-rec f-fl" href="#">设计软件一课通关</a>
                                    <a class="top-rec f-fl" href="#">轻松学做产品经理</a>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">产品策划与运营</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">产品经理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">产品运营</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">新媒体运营</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">平面设计</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">广告海报</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">字体设计</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">电商视觉设计</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">用户体验</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">ui设计</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">交互设计</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">用户研究</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">设计软件</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">photoshop</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">illustrator</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">after effects</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">axure</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">sketch</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">coreidraw</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">3dmax</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">autocad</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">其他软件</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">游戏美术</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">角色</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">场景</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">模型设计</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">特效设计</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">动画设计</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">游戏ui</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">动漫设计</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">插画漫画</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">工业设计</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">工业设计</a>
                                    </p>
                                </div>
                            </div>
                            <div class="rwrap-right f-cb">
                                <a class="f-f0 tit" href="#">系列课程</a>
                                <p class="links">
                                    <a href="#" class="f-cb f-fc6 f-f0">微互动:精品运营专题</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">微信运营营销全攻略(2017全面升级)</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">互联网运营推广精讲版</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">设计必学2大利器</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">设计必学--全套四部超级合辑</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">商业设计师成长计划</a>
                                    <a href="#" class="f-fc6 f-f0">更多&gt;&gt;</a>
                                </p>
                                <a href="#" class="picwrap">
                                    <img src="images/51726a13-4263-4f08-814a-4b0594c88029s.jpg" class="f-pa pic">
                                </a>
                            </div>
                        </div>
                        <div class="f-pr rwrap f-cb">
                            <div class="rwrap-left f-cb">
                                <div class="top-rec-box f-cb">
                                    <a class="top-rec f-fl" href="#">韩松摄影</a>
                                    <a class="top-rec f-fl" href="#">生活方式·精选好课</a>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">摄影影视</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">摄影基础</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">摄影后期</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">影视基础</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">影视后期</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">手机摄影</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">pr剪辑</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">ae特效</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">微课视频制作</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">音乐乐器</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">乐理基础</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">声乐唱歌</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">编曲创作</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">吉他与ukulele</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">钢琴与电子琴</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">更多乐器</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">投资理财</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">理财基础</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">基金</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">股票债券</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">保险</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">外汇</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">房产</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">p2p</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">区块链</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">运动健康</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">体育运动</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">健身</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">舞蹈</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">瑜伽</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">武术</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">两性</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">医疗养生</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">心理学</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">恋爱</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">情绪管理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">思维训练</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">居家生活</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">美食烹饪</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">家居装饰</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">时尚美妆</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">生活妙招</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">风水运势</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">宠物绿植</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">个人修养</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">绘画</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">书法</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">手工diy</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">游戏棋牌</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">方言与普通话</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">科普</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">人文</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">亲子育儿</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">家庭教育</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">孕期分娩</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">宝宝喂养</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">生长发育</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">护理保健</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">疾病重症</a>
                                    </p>
                                </div>
                            </div>
                            <div class="rwrap-right f-cb">
                                <a class="f-f0 tit" href="#">系列课程</a>
                                <p class="links">
                                    <a href="#" class="f-cb f-fc6 f-f0">影视制作基础班:一起搞“视”!</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">做一个讲究的“吃货”</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">【严选】云课堂理财精品课</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">40万人在学的吉他课</a>
                                    <a class="f-cb f-fc6 f-f0">跟曾兰老师一起学摄影</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">每天5分钟,刷一集摄影「泡面番」</a>
                                    <a href="#" class="f-fc6 f-f0">更多&gt;&gt;</a>
                                </p>
                                <a href="#" class="picwrap">
                                    <img src="images/b59d158b-daa8-4d27-a4d0-8ae1afaa3dde.png" class="f-pa pic">
                                </a>
                            </div>
                        </div>
                        <div class="f-pr rwrap f-cb last">
                            <div class="rwrap-left f-cb">
                                <div class="top-rec-box f-cb">
                                    <a class="top-rec f-fl" href="#">数学思维提升课</a>
                                    <a class="top-rec f-fl" href="#">亲子教育·精选好课</a>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">综合素质</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">英语启蒙</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">国学教育</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">steam教育</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">自然科学</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">小学</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">语文</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">数学</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">英语</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">奥数</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">其他</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">初中</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">数学</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">英语</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">语文</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">物理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">化学</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">其他</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">高中</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">数学</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">英语</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">语文</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">物理</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">化学</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">其他</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">高考</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">留学</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">本科·自考</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">大学本科</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">自考</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">专升本</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">考研</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">19考研</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">数学</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">英语</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">政治</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">专业课</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">规划指导</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">考研综合</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">学术</a>
                                    </p>
                                </div>
                            </div>
                            <div class="rwrap-right f-cb">
                                <a class="f-f0 tit" href="#">系列课程</a>
                                <p class="links">
                                    <a href="#" class="f-cb f-fc6 f-f0">2020考研新手必修课</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">3-6岁孩子综合素质培养</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">如何给孩子进行性教育</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">考研政治基础班</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">考研政治强化提高班</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">年轻新手宝妈必学的育儿技能</a>
                                    <a href="#" class="f-fc6 f-f0">更多&gt;&gt;</a>
                                </p>
                                <a href="#" class="picwrap">
                                <img src="images/88840543-76b4-4bb2-99ef-695825502032.jpg" class="f-pa pic">
                                </a>
                            </div>
                        </div>
                        <div class="f-pr rwrap f-cb">
                            <div class="rwrap-left f-cb">
                                <div class="top-rec-box f-cb">
                                    <a class="top-rec f-fl" href="#">英语口语指南——为暑期出境旅游定制</a>
                                    <a class="top-rec f-fl" href="#">跟着杜松老师说文解词</a>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">实用英语</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">口语</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">英语单词</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">四六级</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">新概念</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">商务英语</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">出国留学</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">托福</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">雅思</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">日语能力考试</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">日语</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">五十音图</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">标准日本语</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">新编日语</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 ">大家的日语</a>
                                        <span class="slash">|</span>
                                        <a href="#" class="f-f0 rec">日语能力考试</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">韩语</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 rec">韩语</a>
                                    </p>
                                </div>
                                <a href="#" class="f-f0 first cat2 tit f-fl">其他小语种</a>
                                <div class="links">
                                    <span class="seperate">|</span>
                                    <p class="cate3links">
                                        <a href="#" class="f-f0 ">西班牙语</a>
                                    </p>
                                </div>
                            </div>
                            <div class="rwrap-right f-cb">
                                <a class="f-f0 tit" href="#">系列课程</a>
                                <p class="links">
                                    <a href="#" class="f-cb f-fc6 f-f0">英语口语指南——为暑期出境旅游定制</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">跟着杜松老师说文解词</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">带着外语的力量 行走世界</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">跟外教学地道英语口语</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">无痛英语</a>
                                    <a href="#" class="f-cb f-fc6 f-f0">学完这些,看韩剧不用字幕</a>
                                    <a href="#" class="f-fc6 f-f0">更多&gt;&gt;</a>
                                </p>
                                <a href="#" class="picwrap">
                                    <img src="images/97256bf9-a1d6-4bd2-94aa-80e531cfe7f5.png" class="f-pa pic">
                                </a>
                            </div>
                        </div>
                    </div>                    
                </div>

                <!-- 水平主导航 -->
                <div class="mainnav f-cb j-navfind">
                    <a class="nitem f-f0" href="#" target="_self">微专业</a>
                    <div class="f-cb nitem f-f0 x-hoveritem">
                        <!-- 主导航 二级导航 -->
                        <span>课程体系</span>
                        <div class="f-pa u-navdropmenu x-child">
                            <span class="arrr f-pa"></span>
                            <a class="f-f0 dropitem " href="#">
                                <span>ibm认知计算</span>
                            </a>
                            <a class="f-f0 dropitem " href="#">
                                <span>大学计算机专业</span>
                            </a>
                            <a class="f-f0 dropitem " href="#">
                                <span>互联网职业技能</span>
                            </a>
                            <a class="f-f0 dropitem last" href="#">
                                <span>职场提升课程体系</span>
                            </a>
                        </div>
                    </div>
                    <a class="nitem f-f0 f-dn" href="#">企业版</a>
                    <div class="nitem f-f0 x-hoveritem down-wrap">
                        <span class="downapp">下载app</span>
                        <div class="u-navapptip f-pa x-child">
                            <div class="arrr f-pa"></div>
                            <img src="images/nav_qrcode.png" class="ewm f-fl" alt="下载app" title="下载app">
                            <div class="rcon f-fr">
                                <h4 class="txt">扫码下载官方app</h4>
                                <a href="#" target="_self" class="store apple"></a>
                                <a href="#" target="_self" class="store android"></a>
                            </div>
                        </div>
                    </div>
                    <a class="nitem f-f0" href="#">企业培训</a>
                </div>

                <!-- 搜索区域 -->
                <div class="search off f-cb">
                    <div class="box f-cb">
                        <input type="text" maxlength="30" placeholder="搜索课程">
                    </div>
                    <div class="submit f-hide f-pa"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 轮播图 -->
<div id="m-slide-container">
    <div>
        <div class="m-slide f-pr">
            <div class="f-pr m-slide-wrap" id="j-slidewrap">
                <div class="slide" id="j-slide" href="#">
                    <ul>
                        <li><a href=""><img src="images/22f32255-a49c-4db1-a93b-8f3a508b0ed6.jpg"></a></li>
                        <li><a href=""><img src="images/8a52811b4b0d8869dd974fe5075ea597.jpg"></a></li>
                        <li><a href=""><img src="images/8e164ab4-4f74-4445-aca6-321b67dcf7f5.jpg"></a></li>
                        <li><a href=""><img src="images/a336d02e-7a42-47b0-8631-9034c9471c71.jpg"></a></li>
                        <li><a href=""><img src="images/bc4f08ee-aa9c-4d49-a14a-5cbf3d59f80f.jpg"></a></li>
                        <li><a href=""><img src="images/e4954183-4f72-45f4-ac45-e6ebb2dfc275.jpg"></a></li>
                        <li><a href=""><img src="images/01c52854e262ead6fd4ac98b74b45b96.jpg"></a></li>
                    </ul>
                </div>
                <a class="lbtn prev"></a>
                <a class="rbtn next"></a>
                <div class="u-slidepg">
                    <ul class="f-cb f-pr f-ib pbox">
                        <li class="on">1</li>
                        <li class="">2</li>
                        <li class="">3</li>
                        <li class="">4</li>
                        <li class="">5</li>
                        <li class="">6</li>
                        <li class="">7</li>
                    </ul>
                </div>
                <!-- 右侧悬浮广告 -->
                <div class="sidenav f-pa">
                    <div class="yktqr f-pa" style="display:none;"></div>
                    <a href="#" class="sidelink">
                        <div class="livecard f-pr">
                            <img src="images/000c36b6e1be3e4d6adc284f104d7db1.jpg" alt="直播卡片图" class="sideimg">
                            <div class="cnt f-f0 j-cnt">
                                <p class="title">
                                十大影响因素,教你轻松提升手淘搜索排名
                                </p>
                                <p class="time">
                                时间:7.28 20:00 ~ 22:00
                                </p>
                                <p class="teacher">
                                讲师:齐论高级讲师 无铭
                                </p>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
            <div class="lbevel f-pa"></div>
            <div class="rbevel f-pa"></div>
        </div>
    </div>
</div>

<!-- 轮播小广告 -->
<div class="m-micro" id="j-micro">
    <div class="g-flow f-pr">
        <div class="f-cb m-micro-wrap">
            <div class="cntwrap" id="j-cntwrap">
                <div class="cntlist" id="j-cntlist">
                    <ul>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001360001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                初级前端开发工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                网易一线前端工程师亲授
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001359001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                python数据分析师
                                </div>
                                <div class="tip f-f0 f-thide">
                                带你一起用数据认识世界
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001359003 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                产品经理
                                </div>
                                <div class="tip f-f0 f-thide">
                                系统学习产品方法论
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001429007 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                区块链开发工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                带你成为链接未来的人才
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001358003 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                人工智能数学基础
                                </div>
                                <div class="tip f-f0 f-thide">
                                精准掌握人工智能核心数学
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001360002 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                初级ui设计师
                                </div>
                                <div class="tip f-f0 f-thide">
                                网易设计专家经典出品
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001127001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                产品运营
                                </div>
                                <div class="tip f-f0 f-thide">
                                运营大咖强强联合
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001358002 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                机器学习工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                一线机器学习专家联合打造
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001180001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                python应用基础
                                </div>
                                <div class="tip f-f0 f-thide">
                                名校名师的python实践课
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001352005 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                互联网项目管理
                                </div>
                                <div class="tip f-f0 f-thide">
                                网易一线成功产品项目经验
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                高级ui设计师
                                </div>
                                <div class="tip f-f0 f-thide">
                                最详尽深入的产品设计指导
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001420002 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                大数据开发工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                网易专家带你玩转hadoop
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001106002 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                交互设计师
                                </div>
                                <div class="tip f-f0 f-thide">
                                网易&amp;浙大最强交互设计导师
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001386007 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                web安全(进阶)
                                </div>
                                <div class="tip f-f0 f-thide">
                                网络安全高手蜕变之旅
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001405003 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                *摄影师
                                </div>
                                <div class="tip f-f0 f-thide">
                                摄影爱好者向专业进阶
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001359002 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                高级前端开发工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                网易前端开发专家亲授
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001268002 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                全栈新媒体运营
                                </div>
                                <div class="tip f-f0 f-thide">
                                成为行业抢手的新媒体人
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-28001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                *摄影师 plus
                                </div>
                                <div class="tip f-f0 f-thide">
                                培养一个能赚钱的爱好
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001180001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                python web开发工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                快速上手的全栈训练营
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001122002 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                测试工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                打造最专业的测试人
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-85002 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                java 开发工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                浙大java男神翁恺执教
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001227001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                web安全工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                “白帽子黑客”训练营
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-85001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                独立音乐制作人
                                </div>
                                <div class="tip f-f0 f-thide">
                                最易懂的音乐制作课程
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001197001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                用户研究员
                                </div>
                                <div class="tip f-f0 f-thide">
                                网易&amp;浙大导师带你“读心”
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-20001 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                mysql数据库工程师
                                </div>
                                <div class="tip f-f0 f-thide">
                                网易一线dba团队打造
                                </div>
                            </a>
                        </li>
                        <li class="item f-fl">
                            <a href="#">
                                <div class="imgbox f-icon ux-micro-icon-1001426003 f-fl">
                                </div>
                                <div class="tit f-f0 f-thide">
                                大数据开发工程师(spark)
                                </div>
                                <div class="tip f-f0 f-thide">
                                手把手带练spark大数据
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="larr f-pa prev"></div>
                <div class="rarr f-pa next"></div>
            </div>
        </div>
    </div>
</div>

<script src='https://libs.baidu.com/jquery/1.7.1/jquery.min.js'></script>
<script src="js/jquery.superslide.2.1.1.js"></script>
<script src="js/script.js"></script>

</body>
</html>

style.css

body,fieldset,html,iframe,img {
  border:0
}
table {
  border-collapse:collapse;
  border-spacing:0
}
li {
  list-style:none
}
caption,th {
  font-weight:400;
  font-style:normal;
  text-align:left
}
em {
  font-style:normal
}
strong {
  font-weight:700
}
body,input,select,textarea {
  font-family:arial,hiragino sans gb,\5fae\8f6f\96c5\9ed1,helvetica,sans-serif;
  font-size:14px;
  color:#444;
  outline:0;
  border:0
}
textarea {
  resize:none
}
input {
  vertical-align:middle;
  margin:0
}
body {
  background-color:#fff
}
h1,h2,h3,h4,h5,h6 {
  font-weight:400
}
a,button {
  cursor:pointer
}
a {
  text-decoration:none;
  color:#333
}
a:hover {
  color:#10ae58
}
body,html {
  width:100%;
  height:100%
}
html {
  overflow:auto
}
body {
  text-align:left;
  background:#eee
}
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box
}
html,body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,blockquote,pre,button,fieldset,form,input,legend,textarea,th,td {
  margin:0;
  padding:0
}
button,input,optgroup,select,textarea {
  margin:0;
  font:inherit;
  color:inherit;
  outline:none
}
.clearfix::after {
  clear:both;
  content:".";
  display:block;
  height:0;
  visibility:hidden
}
.f-f0 {
  font-family:arial,hiragino sans gb,\5fae\8f6f\96c5\9ed1,helvetica,sans-serif
}
.f-f1 {
  font-family:arial,hiragino sans gb,simsun,\5b8b\4f53,georgia,serif
}
.f-fl {
  float:left
}
.f-fr {
  float:right
}
.f-pa {
  position:absolute
}
.p-15 {
  padding:15px
}
.f-cb:after,.f-cbli li:after {
  display:block;
  clear:both;
  visibility:hidden;
  height:0;
  overflow:hidden;
  content:"."
}
.f-cb,.f-cbli li {
  zoom:1
}
.f-thide {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  -ms-text-overflow:ellipsis
}
.f-hide {
  text-indent:-9999px;
  overflow:hidden
}
.f-ib {
  display:inline-block;
  zoom:1
}
.f-dn {
  display:none
}
.f-db {
  display:block
}
.f-pr {
  position:relative
}
.f-pf {
  position:fixed
}
.f-af {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0
}
.g-flow {
  width:960px;
  margin:0 auto;
  text-align:left
}
@media screen and (min-width:1210px) {
  .g-flow {
  width:1205px
}
body {
  overflow-x:hidden
}
}.globalnavsprite,.m-indextopnav .topheader .login .u-mystudy .u-learn-record .arr,.u-indexnavcatebtn .cbtn .ic,.u-indexnavcatedialog .cateright .close,.u-navapptip .arrr,.u-navapptip .rcon .store,.u-navdropmenu .arrr,.u-navusermenu .arrr {
  background:url(../images/ui_new_yktnav_sprite.png) 9999px 9999px no-repeat
}
.globalnavsprite,.m-yktnav .userinfo .u-mystudy .u-learn-record .arr,.u-navapptip .arrr,.u-navapptip .rcon .store,.u-navcatebtn .cbtn,.u-navcatedialog .arrr,.u-navcatedialog .cateright .close,.u-navdropmenu .arrr,.u-navusermenu .arrr {
  background:url(../images/ui_new_yktnav_sprite.png) 9999px 9999px no-repeat
}
.x-hide,.x-hoveritem .x-child {
  -webkit-transition-property:opacity,-webkit-transform;
  -moz-transition-property:opacity,-webkit-transform;
  -ms-transition-property:opacity,-webkit-transform;
  -o-transition-property:opacity,-webkit-transform;
  transition-property:opacity,-webkit-transform;
  -webkit-transition-duration:.15s;
  -moz-transition-duration:.15s;
  -ms-transition-duration:.15s;
  -o-transition-duration:.15s;
  transition-duration:.15s;
  -webkit-transition-timing-function:ease-out;
  -moz-transition-timing-function:ease-out;
  -ms-transition-timing-function:ease-out;
  -o-transition-timing-function:ease-out;
  transition-timing-function:ease-out;
  -webkit-transform:scale(.9);
  opacity:0;
  pointer-events:none;
  display:none\9;
  visibility:hidden
}
.x-hoveritem:hover .x-child {
  opacity:1;
  -webkit-transform:scale(1);
  pointer-events:all;
  display:block\9;
  visibility:visible
}
.m-micro .m-micro-wrap .cntwrap .larr,.m-micro .m-micro-wrap .cntwrap .rarr {
  background:url(../images/indexsprite.png) no-repeat 9999px 9999px
}
.m-micro {
  z-index:9;
  position:relative;
  margin-bottom:30px
}
.m-micro .m-micro-wrap {
  border:1px solid #ddd;
  border-top:none;
  padding:15px 0;
  background-color:#fff
}
.m-micro .m-micro-wrap .item {
  border-left:1px solid #ddd;
  width:244px;
  height:50px;
  padding:0 10px
}
.m-micro .m-micro-wrap .item .imgbox {
  text-align:center;
  padding:8px 0 5px;
  font-size:32px;
  color:#2187e0;
  width:46px;
  height:46px;
  margin-left:15px;
  margin-right:-82px
}
.m-micro .m-micro-wrap .item .tit {
  color:#333;
  width:170px;
  font-size:16px;
  margin-left:65px;
  margin-top:5px;
  line-height:24px;
  height:24px
}
.m-micro .m-micro-wrap .item .tit:hover {
  color:#39a030;
  text-decoration:none
}
.m-micro .m-micro-wrap .item .tip {
  color:#999;
  width:170px;
  font-size:12px;
  margin-left:65px
}
.m-micro .m-micro-wrap .item:first-child {
  border-left:none
}
.m-micro .m-micro-wrap .item0 {
  text-align:center;
  width:235px
}
.m-micro .m-micro-wrap .item0 a {
  display:block;
  padding-top:4px
}
.m-micro .m-micro-wrap .item0 .intro {
  text-align:center;
  font-size:12px;
  color:#2187e0
}
.m-micro .m-micro-wrap .cntwrap {
  width:1202px;
  overflow:hidden
}
.m-micro .m-micro-wrap .cntwrap .cntlist {
  width:9999px;
  height:50px
}
.m-micro .m-micro-wrap .cntwrap .larr,.m-micro .m-micro-wrap .cntwrap .rarr {
  display:none;
  height:50px;
  width:14px;
  cursor:pointer
}
.m-micro .m-micro-wrap .cntwrap .larr {
  left:1px;
  top:15px;
  background-position:0 -74px
}
.m-micro .m-micro-wrap .cntwrap .larrhover {
  background-position:-53px -74px
}
.m-micro .m-micro-wrap .cntwrap .rarr {
  right:0;
  top:15px;
  background-position:-28px -74px
}
.m-micro .m-micro-wrap .cntwrap .rarrhover {
  background-position:-78px -74px
}
.m-micro .m-micro-wrap .cntwrap:hover .larr,.m-micro .m-micro-wrap .cntwrap:hover .rarr {
  display:block
}
.m-yktnav .g-flow {
  width:1205px
}
.m-yktnav .m-nav {
  position:relative;
  zoom:1;
  display:inline;
  float:left;
  height:60px
}
.m-yktnav .m-nav .nitem {
  position:relative;
  cursor:pointer;
  float:left;
  color:#eee;
  font-size:16px;
  line-height:60px;
  padding:0 17px
}
.m-yktnav .m-nav .nitem.down-wrap {
  padding:0
}
.m-yktnav .m-nav .nitem.down-wrap .downapp {
  padding:0 15px;
  display:inline-block;
  height:100%
}
.m-yktnav .m-nav .nitem.selected {
  color:#fff;
  background-color:#242630
}
.m-yktnav .m-nav .nitem.cur {
  color:#fff;
  background-color:#484c57
}
.m-yktnav .m-nav .nitem:hover {
  background-color:#484c57
}
.m-yktnav .m-nav .toggledrop {
  display:none
}
.m-yktnav .m-nav .nitem.active .toggledrop,.m-yktnav .m-nav .nitem:hover .toggledrop {
  display:block
}
.m-indextopnav {
  z-index:10;
  position:relative;
  height:0
}
.m-indextopnav .topnav {
  z-index:1;
  height:51px;
  background-color:#fff;
  border:1px solid #ddd;
  border-bottom:none
}
.m-indextopnav .topnav .mainnav {
  float:left;
  height:51px;
  padding-left:249px
}
.m-indextopnav .topnav .mainnav .nitem {
  cursor:pointer;
  position:relative;
  float:left;
  color:#333;
  font-size:16px;
  line-height:51px;
  padding:0 12px
}
.m-indextopnav .topnav .mainnav .nitem.down-wrap {
  padding:0
}
.m-indextopnav .topnav .mainnav .nitem.down-wrap .downapp {
  padding:0 15px;
  display:inline-block;
  height:100%
}
.m-indextopnav .topnav .mainnav .nitem.selected,.m-indextopnav .topnav .mainnav .nitem:hover {
  color:#fff;
  background-color:#31a030
}
.m-indextopnav .topnav .search {
  position:relative;
  margin:7px 6px 0 0;
  background-color:#fff;
  float:right;
  height:34px;
  border:1px solid #49af4f;
  width:330px;
  -moz-transition:width .2s ease-out 0s;
  -o-transition:width .2s ease-out 0s;
  -webkit-transition:width .2s ease-out 0s;
  transition:width .2s ease-out 0s
}
.m-indextopnav .topnav .search.off {
  width:216px;
  -moz-transition:width .2s ease-out 0s;
  -o-transition:width .2s ease-out 0s;
  -webkit-transition:width .2s ease-out 0s;
  transition:width .2s ease-out 0s
}
.m-indextopnav .topnav .search.off .delete-local {
  display:none
}
.m-indextopnav .topnav .search .search-type {
  line-height:34px;
  cursor:pointer;
  position:relative
}
.m-indextopnav .topnav .search .search-type .select-list {
  line-height:40px;
  padding:0 9px;
  width:49px;
  background-color:#fff;
  border:1px solid #49af4f;
  border-top:none;
  left:-1px
}
.m-indextopnav .topnav .search .search-type .select-list:hover {
  color:#49af4f
}
.m-indextopnav .topnav .search .box {
  overflow:hidden;
  background:#fff;
  position:relative
}
.m-indextopnav .topnav .search .box input {
  background-color:#fff;
  height:32px;
  line-height:34px;
  color:#666;
  font-size:14px;
  overflow:hidden;
  width:100%;
  text-indent:5px
}
.m-indextopnav .topnav .search .box label {
  height:36px;
  position:absolute;
  top:0;
  left:5px;
  color:#aaa;
  font-size:14px;
  cursor:text;
  line-height:34px
}
.m-indextopnav .topnav .search .submit {
  display:block;
  width:34px;
  height:34px;
  cursor:pointer;
  right:0;
  top:0;
  background-image:url(../images/34bb5668e77f7d10a8581cbfab5ea5cf.png)
}
.m-indextopnav .topnav .search .submit:hover {
  background-image:url(../images/9ffe3911a7e9e7c8da028c542d7287da.png)
}
.u-indexnavcatebtn {
  position:absolute;
  top:-1px;
  left:-1px;
  width:224px;
  height:52px;
  background-color:#31a030;
  overflow:hidden
}
.u-indexnavcatebtn .cbtn {
  display:block
}
.u-indexnavcatebtn .cbtn .ic {
  margin:19px 10px 0 20px;
  width:16px;
  height:14px;
  background-position:0 0
}
.u-indexnavcatebtn .cbtn .qb {
  color:#fff;
  line-height:54px;
  font-size:17px
}
.u-indexnavcatedialog {
  left:-1px;
  top:51px;
  width:224px
}
.u-indexnavcatedialog a:hover {
  text-decoration:underline
}
.u-indexnavcatedialog .fadeinout {
  animation-name:fadeinout;
  animation-duration:.2s;
  animation-timing-function:ease-in-out
}
.u-indexnavcatedialog .cateleft {
  z-index:2;
  top:0;
  left:0;
  width:224px;
  height:340px
}
.u-indexnavcatedialog .cateleft .catebg {
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:#000;
  opacity:.7;
  filter:alpha(opacity=60)
}
.u-indexnavcatedialog .cateleft .items {
  top:0;
  left:0;
  height:340px;
  width:100%;
  overflow:hidden
}
.u-indexnavcatedialog .cateleft .item {
  height:48px;
  padding:0 10px 0 13px;
  position:relative
}
.u-indexnavcatedialog .cateleft .item .inn {
  position:relative;
  z-index:2;
  height:48px;
  padding:0 0 0 5px;
  border-bottom:1px solid rgba(255,255,255,.2)
}
.u-indexnavcatedialog .cateleft .item .inn p {
  overflow:hidden;
  height:53px
}
.u-indexnavcatedialog .cateleft .item .inn .first {
  display:inline-block;
  color:#fff;
  font-size:14px;
  line-height:53px
}
.u-indexnavcatedialog .cateleft .item .inn .second {
  display:inline-block;
  color:#fff\9;
  color:rgba(255,255,255,.8);
  font-size:12px;
  margin-left:11px;
  line-height:53px
}
.u-indexnavcatedialog .cateleft .item .curbg {
  display:none;
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  width:225px;
  height:48px;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  background-color:#fff
}
.u-indexnavcatedialog .cateleft .item.on .inn {
  border-bottom:none
}
.u-indexnavcatedialog .cateleft .item.on .inn .first {
  color:#333
}
.u-indexnavcatedialog .cateleft .item.on .inn .second {
  color:#666
}
.u-indexnavcatedialog .cateleft .item.on .curbg {
  display:block
}
.u-indexnavcatedialog .cateleft .item.last .item {
  height:53px
}
.u-indexnavcatedialog .cateleft .item.last .inn {
  border-bottom:1px solid #ddd;
  height:53px
}
.u-indexnavcatedialog .cateleft .item.last.on .curbg {
  height:50px
}
.u-indexnavcatedialog .cateright {
  overflow:hidden;
  top:0;
  left:223px;
  width:981px;
  z-index:1;
  position:relative;
  background-color:#fff;
  border:1px solid #ddd
}
.u-indexnavcatedialog .cateright.cur {
  display:none
}
.u-indexnavcatedialog .cateright .close {
  top:20px;
  right:20px;
  width:14px;
  height:14px;
  background-position:-155px 0;
  z-index:10
}
.u-indexnavcatedialog .cateright .rwrap {
  display:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:419px;
  overflow:hidden
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left {
  float:left;
  width:630px;
  margin:0 85px 14px 0;
  padding-left:42px
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .cat2 {
  float:left;
  line-height:25px;
  padding-top:12px;
  padding-right:20px;
  overflow:hidden;
  text-align:left
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .cat2:hover {
  text-decoration:underline
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .links {
  padding-top:12px;
  overflow:hidden
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .links a {
  color:#666;
  display:inline-block
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .links a:hover {
  text-decoration:underline;
  color:#666
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .links .seperate {
  padding:0 10px 0 0;
  color:#ccc;
  float:left
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .links a.rec {
  color:#33a126;
  white-space:nowrap
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .links a.rec:hover {
  color:#33a126
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .links .cate3links {
  margin-left:10px;
  font-size:12px;
  line-height:25px
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .top-rec {
  margin:20px 20px 8px 0;
  padding:6px 16px 5px 11px;
  background:#fff;
  border:1px solid #ff8a00;
  border-radius:2px;
  font-size:14px;
  color:#ff8a00
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-left .top-rec:hover {
  background-color:#ff8a00;
  color:#fff;
  text-decoration:none
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-right {
  float:left;
  width:224px
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-right .tit {
  font-size:16px;
  color:#333;
  margin-top:19px
}
.u-indexnavcatedialog .cateright .rwrap .rwrap-right .links {
  padding-top:10px;
  line-height:26px
}
.u-indexnavcatedialog .cateright .rwrap.on {
  display:block
}
.u-indexnavcatedialog .cateright .rwrap .tit {
  display:inline-block;
  font-size:14px;
  line-height:16px;
  color:#333
}
.u-indexnavcatedialog .cateright .rwrap .mooctxt {
  padding-bottom:38px
}
.u-indexnavcatedialog .cateright .rwrap .links {
  line-height:25px;
  font-size:12px;
  color:#666
}
.u-indexnavcatedialog .cateright .rwrap .links .slash {
  padding:0 10px;
  color:#ccc
}
.u-indexnavcatedialog .cateright .picwrap {
  margin-top:10px;
  display:inline-block
}
.u-indexnavcatedialog .cateright .pic {
  width:200px;
  height:140px
}
.u-navapptip {
  top:100%;
  left:-125px;
  padding:20px;
  background-color:#fff;
  height:140px;
  width:310px;
  border:1px solid #ddd;
  box-sizing:content-box
}
.u-navapptip .arrr {
  top:-9px;
  left:50%;
  margin-left:-7px;
  width:14px;
  height:9px;
  background-position:-187px 0
}
.u-navapptip .ewm {
  width:140px;
  height:140px;
  margin-right:20px
}
.u-navapptip .rcon {
  width:150px
}
.u-navapptip .rcon .txt {
  line-height:28px;
  font-size:17px;
  color:#666
}
.u-navapptip .rcon .store {
  display:block;
  width:150px;
  height:44px;
  margin-top:10px
}
.u-navapptip .rcon .store.apple {
  background-position:0 -28px
}
.u-navapptip .rcon .store.android {
  background-position:0 -76px
}
.u-navdropmenu {
  top:100%;
  left:-25px;
  width:160px;
  padding:0;
  background:#fff;
  border:1px solid #ddd
}
.u-navdropmenu .arrr {
  top:-9px;
  left:50%;
  margin-left:-7px;
  width:14px;
  height:9px;
  background-position:-187px 0
}
.u-navdropmenu .dropitem {
  text-align:left;
  line-height:45px;
  font-size:16px;
  color:#666;
  display:block
}
.u-navdropmenu .dropitem span {
  margin:0 15px;
  display:block;
  border-bottom:1px solid #ddd
}
.u-navdropmenu .dropitem:hover {
  background-color:#f8f8f8;
  color:#31a030
}
.u-navdropmenu .dropitem.last span {
  border-bottom:none
}
.u-navusermenu {
  position:absolute;
  right:-3px;
  top:44px
}
.u-navusermenu .arrr {
  top:-8px;
  right:10px;
  width:14px;
  height:9px;
  background-position:-187px 0
}
.u-navusermenu ul.menu {
  padding:8px;
  text-align:left;
  background-color:#fff;
  border:1px solid #ddd
}
.u-navusermenu ul.menu .text {
  border-bottom:1px solid #eaeaea;
  font-size:12px;
  white-space:nowrap
}
.u-navusermenu ul.menu li a {
  padding:2px 10px;
  display:block;
  font-size:12px;
  width:140px;
  color:#666
}
.u-navusermenu ul.menu li a:hover {
  background-color:#f3f4f6
}
.u-navusermenu ul.menu li a.exit {
  border-top:1px solid #e9e9e9
}
.u-navcatedialog.x-hide,.x-hoveritem .u-navcatedialog.x-child {
  -webkit-transition-duration:50ms;
  -moz-transition-duration:50ms;
  -ms-transition-duration:50ms;
  -o-transition-duration:50ms;
  transition-duration:50ms
}
.u-navcatedialog {
  left:-189px;
  top:60px;
  width:224px;
  background-color:#fff;
  border:1px solid #ddd;
  border-top:none;
  width:1203px;
  height:420px
}
.u-navcatedialog a:hover {
  text-decoration:underline
}
.u-navcatedialog.cur {
  display:block
}
.u-navcatedialog .arrr {
  top:-9px;
  left:225px;
  margin-left:0;
  width:14px;
  height:9px;
  background-position:-187px 0;
  z-index:1;
  position:absolute
}
.u-navcatedialog .cateleft {
  z-index:2;
  top:0;
  left:0;
  width:224px;
  height:420px;
  background-color:#39a030;
  border-bottom:1px solid #ddd
}
.u-navcatedialog .cateleft .catebg {
  top:0;
  left:0;
  width:100%;
  height:100%
}
.u-navcatedialog .cateleft .items {
  top:0;
  left:0;
  height:420px;
  width:100%;
  overflow:hidden
}
.u-navcatedialog .cateleft .item {
  height:60px;
  padding:0 10px 0 13px;
  position:relative
}
.u-navcatedialog .cateleft .item .inn {
  position:relative;
  z-index:2;
  height:60px;
  padding:0 0 0 5px;
  border-bottom:1px solid rgba(255,255,255,.2)
}
.u-navcatedialog .cateleft .item .inn p {
  overflow:hidden;
  height:60px
}
.u-navcatedialog .cateleft .item .inn .first {
  display:inline-block;
  color:#fff;
  font-size:14px;
  line-height:65px
}
.u-navcatedialog .cateleft .item .inn .second {
  display:inline-block;
  color:#fff;
  font-size:12px;
  margin-left:11px;
  line-height:65px
}
.u-navcatedialog .cateleft .item .curbg {
  display:none;
  position:absolute;
  z-index:1;
  top:0;
  left:0;
  width:225px;
  height:60px;
  border-top:1px solid #39a030;
  border-bottom:1px solid #39a030;
  background-color:#fff
}
.u-navcatedialog .cateleft .item.cur .inn {
  border-bottom:none
}
.u-navcatedialog .cateleft .item.cur .inn .first {
  color:#333
}
.u-navcatedialog .cateleft .item.cur .inn .second {
  color:#666
}
.u-navcatedialog .cateleft .item.cur .curbg {
  display:block
}
.u-navcatedialog .cateleft .item.last .inn {
  border-bottom:none
}
.u-navcatedialog .cateright {
  top:0;
  left:223px;
  width:981px;
  z-index:1;
  position:relative;
  background-color:#fff;
  border:1px solid #ddd;
  border-top:none
}
.u-navcatedialog .cateright.cur {
  display:block
}
.u-navcatedialog .cateright .close {
  top:20px;
  right:20px;
  width:14px;
  height:14px;
  background-position:-155px 0;
  z-index:10
}
.u-navcatedialog .cateright .rwrap {
  display:none;
  top:0;
  left:0;
  right:0;
  bottom:0;
  height:420px;
  overflow:hidden
}
.u-navcatedialog .cateright .rwrap .rwrap-left {
  float:left;
  width:630px;
  margin:0 85px 14px 0;
  padding-left:42px
}
.u-navcatedialog .cateright .rwrap .rwrap-left .cat2 {
  float:left;
  line-height:25px;
  padding-top:12px;
  padding-right:20px;
  overflow:hidden;
  text-align:left
}
.u-navcatedialog .cateright .rwrap .rwrap-left .cat2:hover {
  text-decoration:underline
}
.u-navcatedialog .cateright .rwrap .rwrap-left .links {
  padding-top:12px;
  overflow:hidden
}
.u-navcatedialog .cateright .rwrap .rwrap-left .links a {
  color:#666;
  display:inline-block
}
.u-navcatedialog .cateright .rwrap .rwrap-left .links a:hover {
  text-decoration:underline;
  color:#666
}
.u-navcatedialog .cateright .rwrap .rwrap-left .links .seperate {
  padding:0 10px 0 0;
  color:#ccc;
  float:left
}
.u-navcatedialog .cateright .rwrap .rwrap-left .links a.rec {
  color:#33a126;
  white-space:nowrap
}
.u-navcatedialog .cateright .rwrap .rwrap-left .links a.rec:hover {
  color:#33a126
}
.u-navcatedialog .cateright .rwrap .rwrap-left .links .cate3links {
  margin-left:10px;
  font-size:12px;
  line-height:25px
}
.u-navcatedialog .cateright .rwrap .rwrap-left .top-rec {
  margin:20px 20px 8px 0;
  padding:4px 16px 3px 11px;
  background:#fff;
  border:1px solid #ff8a00;
  border-radius:2px;
  font-size:14px;
  color:#ff8a00
}
.u-navcatedialog .cateright .rwrap .rwrap-left .top-rec:hover {
  background-color:#ff8a00;
  color:#fff;
  text-decoration:none
}
.u-navcatedialog .cateright .rwrap .rwrap-right {
  float:left;
  width:224px
}
.u-navcatedialog .cateright .rwrap .rwrap-right .tit {
  font-size:16px;
  color:#333;
  margin-top:19px
}
.u-navcatedialog .cateright .rwrap .rwrap-right .links {
  padding-top:10px;
  line-height:26px
}
.u-navcatedialog .cateright .rwrap.cur {
  display:block
}
.u-navcatedialog .cateright .rwrap .tit {
  display:inline-block;
  font-size:14px;
  line-height:16px;
  color:#333
}
.u-navcatedialog .cateright .rwrap .mooctxt {
  padding-bottom:38px
}
.u-navcatedialog .cateright .rwrap .links {
  line-height:25px;
  font-size:12px;
  color:#666
}
.u-navcatedialog .cateright .rwrap .links .slash {
  padding:0 10px;
  color:#ccc
}
.u-navcatedialog .cateright .picwrap {
  margin-top:10px;
  display:inline-block
}
.u-navcatedialog .cateright .pic {
  width:200px;
  height:140px
}
.u-navapptip {
  top:100%;
  left:-125px;
  padding:20px;
  background-color:#fff;
  height:140px;
  width:310px;
  border:1px solid #ddd;
  box-sizing:content-box
}
.u-navapptip .arrr {
  top:-9px;
  left:50%;
  margin-left:-7px;
  width:14px;
  height:9px;
  background-position:-187px 0
}
.u-navapptip .ewm {
  width:140px;
  height:140px;
  margin-right:20px
}
.u-navapptip .rcon {
  width:150px
}
.u-navapptip .rcon .txt {
  line-height:28px;
  font-size:14px;
  color:#666
}
.u-navapptip .rcon .store {
  display:block;
  width:150px;
  height:44px;
  margin-top:10px
}
.u-navapptip .rcon .store.apple {
  background-position:0 -28px
}
.u-navapptip .rcon .store.android {
  background-position:0 -76px
}
.u-navdropmenu {
  top:100%;
  left:-25px;
  width:160px;
  padding:0;
  background:#fff;
  border:1px solid #ddd
}
.u-navdropmenu .arrr {
  top:-9px;
  left:50%;
  margin-left:-7px;
  width:14px;
  height:9px;
  background-position:-187px 0
}
.u-navdropmenu .dropitem {
  text-align:left;
  line-height:45px;
  font-size:14px;
  color:#666;
  display:block
}
.u-navdropmenu .dropitem span {
  margin:0 15px;
  display:block;
  border-bottom:1px solid #ddd
}
.u-navdropmenu .dropitem:hover {
  background-color:#f8f8f8;
  color:#31a030
}
.u-navdropmenu .dropitem.last span {
  border-bottom:none
}
.hidddenclass {
  visibility:hidden
}
#m-slide-container {
  z-index:1;
  min-height:340px;
  background-color:#eee;
  position:relative;
  top:0
}
.m-slide {
  background-color:#ddd;
  width:100%;
  min-height:293px;
  height:340px;
  overflow:hidden;
  max-width:1920px
}
.m-slide .m-slide-wrap {
  height:341px
}
.m-slide .lbtn,.m-slide .rbtn {
  position:absolute;
  height:70px;
  width:40px;
  top:50%;
  margin-top:-35px;
  background:url(../images/indexslidearrow.png) no-repeat 0 0;
  z-index:100
}
.m-slide .lbtn {
  left:31%;
  background-position:0 0
}
.m-slide .lbtn:hover {
  background-position:0 -95px
}
.m-slide .rbtn {
  right:31%;
  background-position:-66px 0
}
.m-slide .rbtn:hover {
  background-position:-66px -95px
}
.m-slide .slide {
  display:inline-block;
  overflow:hidden;
  margin:0 auto;
  position:relative;
  width:100%
}
.m-slide .slide ul {
  }.m-slide .slide ul li {
  width:100%;
  text-align:center
}
.m-slide .slide ul li:first-child {
  background-color:#e399a5
}
.m-slide .slide ul li:nth-child(2) {
  background-color:#ee9749
}
.m-slide .slide ul li:nth-child(3) {
  background-color:#f2e682
}
.m-slide .slide ul li:nth-child(4) {
  background-color:#a2f282
}
.m-slide .slide ul li:nth-child(5) {
  background-color:#82f2af
}
.m-slide .slide ul li:nth-child(6) {
  background-color:#82bcf2
}
.m-slide .slide ul li:nth-child(7) {
  background-color:#9f82f2
}
.m-slide .slide img {
  height:340px;
  width:980px
}
.m-slide .u-slidepg {
  bottom:31px
}
.m-slide .u-slidepg ul {
  vertical-align:bottom;
  height:16px
}
.m-slide .u-slidepg ul li {
  position:relative;
  width:8px;
  height:16px;
  background:0 0
}
.m-slide .u-slidepg ul li:after {
  background-color:#fff;
  background-color:rgba(255,255,255,.7);
  -ms-filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#b3ffffff,endcolorstr=#b3ffffff);
  filter:progid:dximagetransform.microsoft.gradient(startcolorstr=#b3ffffff,endcolorstr=#b3ffffff);
  content:'.';
  text-indent:-99px;
  position:absolute;
  bottom:0;
  left:0;
  width:8px;
  height:8px
}
.m-slide .u-slidepg ul li.on {
  background:0 0
}
.m-slide .u-slidepg ul li.on:after {
  -moz-transition:all .6s ease 0s;
  -o-transition:all .6s ease 0s;
  -webkit-transition:all .6s ease 0s;
  transition:all .6s ease 0s;
  height:16px;
  background-color:#fff
}
.m-slide .lbevel,.m-slide .rbevel {
  display:none
}
.m-slide .lbevel {
  top:0;
  right:50%;
  margin-right:480px;
  background-position:0 0
}
.m-slide .rbevel {
  z-index:0;
  top:0;
  left:50%;
  margin-left:480px;
  background-position:-414px 0
}
.m-slide .sidenav {
  z-index:2;
  width:225px;
  height:280px;
  right:18.6%;
  top:30px;
  background:#fff
}
.m-slide .sidenav .sidelink {
  display:inline-block
}
.m-slide .sidenav .yktqr {
  width:100%;
  height:100%;
  background:#fff;
  z-index:2
}
.m-slide .sidenav .yktqr img {
  width:100%;
  height:100%
}
.m-slide .sidenav .sideimg {
  width:225px;
  height:160px
}
.m-slide .sidenav .liveflag {
  width:68px;
  height:24px;
  line-height:24px;
  background:#49af4f;
  border-radius:0 12px 12px 0;
  top:10px;
  color:#fff;
  font-size:14px;
  padding-left:6px
}
.m-slide .sidenav .redlive {
  background:#ff1d00
}
.m-slide .sidenav .cnt {
  margin-top:-3px;
  font-size:14px;
  padding:10px 20px 16px;
  height:94px
}
.m-slide .sidenav .cnt .teacher {
  height:18px;
  overflow:hidden;
  word-break:break-all
}
.m-slide .sidenav .cnt p {
  font-size:12px;
  color:#666;
  line-height:18px
}
.m-slide .sidenav .cnt .title {
  color:#333;
  line-height:26px;
  font-size:16px;
  max-height:52px;
  overflow:hidden;
  margin-bottom:6px
}
.m-slide .sidenav .cnt .title:hover {
  color:#49af4f
}
@media screen and (min-width:1210px) {
  .m-slide .lbevel {
  margin-right:602.5px
}
.m-slide .rbevel {
  margin-left:602.5px
}
}.u-slidepg {
  position:absolute;
  width:100%;
  text-align:center
}
.u-slidepg ul {
  height:6px;
  position:relative
}
.u-slidepg ul li {
  width:12px;
  height:6px;
  background:rgba(0,0,0,.3);
  margin-right:8px;
  float:left;
  text-indent:100px;
  overflow:hidden;
  cursor:pointer
}
.u-slidepg ul li.js-selected {
  cursor:default;
  background:#00a650
}
@media screen and (max-width:1710px) {
  .m-slide .lbtn {
  left:28%
}
.m-slide .rbtn {
  right:28.5%
}
.m-slide .sidenav {
  right:15%
}
}@media screen and (max-width:1410px) {
  .m-slide .lbtn {
  left:23.5%
}
.m-slide .rbtn {
  right:24.5%
}
.m-slide .sidenav {
  right:7.5%
}
}@media screen and (max-width:1210px) {
  .m-slide .lbtn {
  left:19%
}
.m-slide .rbtn {
  right:19.5%
}
.m-slide .sidenav {
  right:.5%
}
}

ux-micro-icon.css

@font-face {
    font-family:ux-micro-icon;
    src:url(../font/ux-micro-icon.eot);
    src:url(../font/ux-micro-icon.eot) format('embedded-opentype'),
        url(../font/ux-micro-icon.ttf) format('truetype'),
        url(../font/ux-micro-icon.woff) format('woff'),
        url(../font/ux-micro-icon.svg) format('svg');
    font-weight:400;
    font-style:normal
}
[class^=ux-micro-icon-],[class*=" ux-micro-icon-"] {
    font-family:ux-micro-icon!important;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    font-style:normal;
    font-variant:normal;
    font-weight:400;
    text-decoration:none;
    text-transform:none;
    line-height:1
}
.ux-micro-icon-1001106002:before {
    content:"\ea01"
}
.ux-micro-icon-1001122002:before {
    content:"\ea02"
}
.ux-micro-icon-1001127001:before {
    content:"\ea03"
}
.ux-micro-icon-1001137001:before {
    content:"\ea04"
}
.ux-micro-icon-1001168001:before {
    content:"\ea05"
}
.ux-micro-icon-1001176001:before {
    content:"\ea06"
}
.ux-micro-icon-1001177002:before {
    content:"\ea07"
}
.ux-micro-icon-1001180001:before {
    content:"\ea08"
}
.ux-micro-icon-1001195002:before {
    content:"\ea09"
}
.ux-micro-icon-1001197001:before {
    content:"\ea0a"
}
.ux-micro-icon-1001201003:before {
    content:"\ea0b"
}
.ux-micro-icon-1001227001:before {
    content:"\ea0c"
}
.ux-micro-icon-1001268002:before {
    content:"\ea0d"
}
.ux-micro-icon-1001280001:before {
    content:"\ea0e"
}
.ux-micro-icon-1001316008:before {
    content:"\ea0f"
}
.ux-micro-icon-1001352005:before {
    content:"\ea10"
}
.ux-micro-icon-1001358002:before {
    content:"\ea11"
}
.ux-micro-icon-1001358003:before {
    content:"\ea12"
}
.ux-micro-icon-1001359001:before {
    content:"\ea13"
}
.ux-micro-icon-1001359002:before {
    content:"\ea14"
}
.ux-micro-icon-1001359003:before {
    content:"\ea15"
}
.ux-micro-icon-1001360001:before {
    content:"\ea16"
}
.ux-micro-icon-1001360002:before {
    content:"\ea17"
}
.ux-micro-icon-1001385001:before {
    content:"\ea18"
}
.ux-micro-icon-1001386001:before {
    content:"\ea19"
}
.ux-micro-icon-1001386007:before {
    content:"\ea1a"
}
.ux-micro-icon-1001405003:before {
    content:"\ea1b"
}
.ux-micro-icon-1001415001:before {
    content:"\ea1c"
}
.ux-micro-icon-1001420002:before {
    content:"\ea1d"
}
.ux-micro-icon-1001423006:before {
    content:"\ea1e"
}
.ux-micro-icon-1001426003:before {
    content:"\ea1f"
}
.ux-micro-icon-1001429007:before {
    content:"\ea20"
}
.ux-micro-icon-20001:before {
    content:"\ea21"
}
.ux-micro-icon-28001:before {
    content:"\ea22"
}
.ux-micro-icon-85001:before {
    content:"\ea23"
}
.ux-micro-icon-85002:before {
    content:"\ea24"
}
.ux-micro-icon-aike:before {
    content:"\ea25"
}
.ux-micro-icon-android:before {
    content:"\ea26"
}
.ux-micro-icon-cda:before {
    content:"\ea27"
}
.ux-micro-icon-hr:before {
    content:"\ea28"
}
.ux-micro-icon-unityyouxikaifagongchengshi:before {
    content:"\ea29"
}
.ux-micro-icon-vr:before {
    content:"\ea2a"
}
.ux-micro-icon-vryouxikaifagongchengshi:before {
    content:"\ea2b"
}
.ux-micro-icon-caifu:before {
    content:"\ea2c"
}
.ux-micro-icon-cfc:before {
    content:"\ea2d"
}
.ux-micro-icon-chuangye:before {
    content:"\ea2e"
}
.ux-micro-icon-deep-learning:before {
    content:"\ea2f"
}
.ux-micro-icon-estate-data:before {
    content:"\ea30"
}
.ux-micro-icon-newmanager:before {
    content:"\ea31"
}
.ux-micro-icon-shouyouuishejishi:before {
    content:"\ea32"
}
.ux-micro-icon-shouyouchangjingshejishi:before {
    content:"\ea33"
}
.ux-micro-icon-shujufenxishi(zhongji):before {
    content:"\ea34"
}
.ux-micro-icon-unie61b:before {
    content:"\ea35"
}
.ux-micro-icon-unie61d:before {
    content:"\ea36"
}
.ux-micro-icon-unie61e:before {
    content:"\ea37"
}
.ux-micro-icon-unie634:before {
    content:"\ea38"
}
.ux-micro-icon-unie915:before {
    content:"\ea39"
}
.ux-micro-icon-wechatsenior:before {
    content:"\ea3a"
}
.ux-micro-icon-yuanhuashejishi:before {
    content:"\ea3b"
}
.ux-micro-icon-1001106002-after:after {
    content:"\ea01"
}
.ux-micro-icon-1001122002-after:after {
    content:"\ea02"
}
.ux-micro-icon-1001127001-after:after {
    content:"\ea03"
}
.ux-micro-icon-1001137001-after:after {
    content:"\ea04"
}
.ux-micro-icon-1001168001-after:after {
    content:"\ea05"
}
.ux-micro-icon-1001176001-after:after {
    content:"\ea06"
}
.ux-micro-icon-1001177002-after:after {
    content:"\ea07"
}
.ux-micro-icon-1001180001-after:after {
    content:"\ea08"
}
.ux-micro-icon-1001195002-after:after {
    content:"\ea09"
}
.ux-micro-icon-1001197001-after:after {
    content:"\ea0a"
}
.ux-micro-icon-1001201003-after:after {
    content:"\ea0b"
}
.ux-micro-icon-1001227001-after:after {
    content:"\ea0c"
}
.ux-micro-icon-1001268002-after:after {
    content:"\ea0d"
}
.ux-micro-icon-1001280001-after:after {
    content:"\ea0e"
}
.ux-micro-icon-1001316008-after:after {
    content:"\ea0f"
}
.ux-micro-icon-1001352005-after:after {
    content:"\ea10"
}
.ux-micro-icon-1001358002-after:after {
    content:"\ea11"
}
.ux-micro-icon-1001358003-after:after {
    content:"\ea12"
}
.ux-micro-icon-1001359001-after:after {
    content:"\ea13"
}
.ux-micro-icon-1001359002-after:after {
    content:"\ea14"
}
.ux-micro-icon-1001359003-after:after {
    content:"\ea15"
}
.ux-micro-icon-1001360001-after:after {
    content:"\ea16"
}
.ux-micro-icon-1001360002-after:after {
    content:"\ea17"
}
.ux-micro-icon-1001385001-after:after {
    content:"\ea18"
}
.ux-micro-icon-1001386001-after:after {
    content:"\ea19"
}
.ux-micro-icon-1001386007-after:after {
    content:"\ea1a"
}
.ux-micro-icon-1001405003-after:after {
    content:"\ea1b"
}
.ux-micro-icon-1001415001-after:after {
    content:"\ea1c"
}
.ux-micro-icon-1001420002-after:after {
    content:"\ea1d"
}
.ux-micro-icon-1001423006-after:after {
    content:"\ea1e"
}
.ux-micro-icon-1001426003-after:after {
    content:"\ea1f"
}
.ux-micro-icon-1001429007-after:after {
    content:"\ea20"
}
.ux-micro-icon-20001-after:after {
    content:"\ea21"
}
.ux-micro-icon-28001-after:after {
    content:"\ea22"
}
.ux-micro-icon-85001-after:after {
    content:"\ea23"
}
.ux-micro-icon-85002-after:after {
    content:"\ea24"
}
.ux-micro-icon-aike-after:after {
    content:"\ea25"
}
.ux-micro-icon-android-after:after {
    content:"\ea26"
}
.ux-micro-icon-cda-after:after {
    content:"\ea27"
}
.ux-micro-icon-hr-after:after {
    content:"\ea28"
}
.ux-micro-icon-unityyouxikaifagongchengshi-after:after {
    content:"\ea29"
}
.ux-micro-icon-vr-after:after {
    content:"\ea2a"
}
.ux-micro-icon-vryouxikaifagongchengshi-after:after {
    content:"\ea2b"
}
.ux-micro-icon-caifu-after:after {
    content:"\ea2c"
}
.ux-micro-icon-cfc-after:after {
    content:"\ea2d"
}
.ux-micro-icon-chuangye-after:after {
    content:"\ea2e"
}
.ux-micro-icon-deep-learning-after:after {
    content:"\ea2f"
}
.ux-micro-icon-estate-data-after:after {
    content:"\ea30"
}
.ux-micro-icon-newmanager-after:after {
    content:"\ea31"
}
.ux-micro-icon-shouyouuishejishi-after:after {
    content:"\ea32"
}
.ux-micro-icon-shouyouchangjingshejishi-after:after {
    content:"\ea33"
}
.ux-micro-icon-shujufenxishi(zhongji)-after:after {
    content:"\ea34"
}
.ux-micro-icon-unie61b-after:after {
    content:"\ea35"
}
.ux-micro-icon-unie61d-after:after {
    content:"\ea36"
}
.ux-micro-icon-unie61e-after:after {
    content:"\ea37"
}
.ux-micro-icon-unie634-after:after {
    content:"\ea38"
}
.ux-micro-icon-unie915-after:after {
    content:"\ea39"
}
.ux-micro-icon-wechatsenior-after:after {
    content:"\ea3a"
}
.ux-micro-icon-yuanhuashejishi-after:after {
    content:"\ea3b"
}

jquery.superslide.2.1.1.js

!function(a){a.fn.slide=function(b){return a.fn.slide.defaults={type:"slide",effect:"fade",autoplay:!1,delaytime:500,intertime:2500,triggertime:150,defaultindex:0,titcell:".hd li",maincell:".bd",targetcell:null,trigger:"mouseover",scroll:1,vis:1,titonclassname:"on",autopage:!1,prevcell:".prev",nextcell:".next",pagestatecell:".pagestate",opp:!1,pnloop:!0,easing:"swing",startfun:null,endfun:null,switchload:null,playstatecell:".playstate",mouseoverstop:!0,defaultplay:!0,returndefault:!1},this.each(function(){var c=a.extend({},a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevcell,d),g=a(c.nextcell,d),h=a(c.pagestatecell,d),i=a(c.playstatecell,d),j=a(c.titcell,d),k=j.size(),l=a(c.maincell,d),m=l.children().size(),n=c.switchload,o=a(c.targetcell,d),p=parseint(c.defaultindex),q=parseint(c.delaytime),r=parseint(c.intertime);parseint(c.triggertime);var q,t=parseint(c.scroll),u=parseint(c.vis),v="false"==c.autoplay||0==c.autoplay?!1:!0,w="false"==c.opp||0==c.opp?!1:!0,x="false"==c.autopage||0==c.autopage?!1:!0,y="false"==c.pnloop||0==c.pnloop?!1:!0,z="false"==c.mouseoverstop||0==c.mouseoverstop?!1:!0,a="false"==c.defaultplay||0==c.defaultplay?!1:!0,b="false"==c.returndefault||0==c.returndefault?!1:!0,c=0,d=0,e=0,f=0,g=c.easing,h=null,i=null,j=null,k=c.titonclassname,l=j.index(d.find("."+k)),m=p=-1==l?p:l,n=p,o=p,p=m>=u?0!=m%t?m%t:t:0,r="leftmarquee"==e||"topmarquee"==e?!0:!1,s=function(){a.isfunction(c.startfun)&&c.startfun(p,k,d,a(c.titcell,d),l,o,f,g)},t=function(){a.isfunction(c.endfun)&&c.endfun(p,k,d,a(c.titcell,d),l,o,f,g)},u=function(){j.removeclass(k),a&&j.eq(n).addclass(k)};if("menu"==c.type)return a&&j.removeclass(k).eq(p).addclass(k),j.hover(function(){q=a(this).find(c.targetcell);var b=j.index(a(this));i=settimeout(function(){switch(p=b,j.removeclass(k).eq(p).addclass(k),s(),e){case"fade":q.stop(!0,!0).animate({opacity:"show"},q,g,t);break;case"slidedown":q.stop(!0,!0).animate({height:"show"},q,g,t)}},c.triggertime)},function(){switch(cleartimeout(i),e){case"fade":q.animate({opacity:"hide"},q,g);break;case"slidedown":q.animate({height:"hide"},q,g)}}),b&&d.hover(function(){cleartimeout(j)},function(){j=settimeout(u,q)}),void 0;if(0==k&&(k=m),r&&(k=2),x){if(m>=u)if("leftloop"==e||"toploop"==e)k=0!=m%t?(0^m/t)+1:m/t;else{var v=m-u;k=1+parseint(0!=v%t?v/t+1:v/t),0>=k&&(k=1)}else k=1;j.html("");var w="";if(1==c.autopage||"true"==c.autopage)for(var x=0;k>x;x++)w+="<li>"+(x+1)+"</li>";else for(var x=0;k>x;x++)w+=c.autopage.replace("$",x+1);j.html(w);var j=j.children()}if(m>=u){l.children().each(function(){a(this).width()>e&&(e=a(this).width(),d=a(this).outerwidth(!0)),a(this).height()>f&&(f=a(this).height(),c=a(this).outerheight(!0))});var y=l.children(),z=function(){for(var a=0;u>a;a++)y.eq(a).clone().addclass("clone").appendto(l);for(var a=0;p>a;a++)y.eq(m-a-1).clone().addclass("clone").prependto(l)};switch(e){case"fold":l.css({position:"relative",width:d,height:c}).children().css({position:"absolute",width:e,left:0,top:0,display:"none"});break;case"top":l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; height:'+u*c+'px"></div>').css({top:-(p*t)*c,position:"relative",padding:"0",margin:"0"}).children().css({height:f});break;case"left":l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; width:'+u*d+'px"></div>').css({width:m*d,left:-(p*t)*d,position:"relative",overflow:"hidden",padding:"1",margin:"10"}).children().css({"float":"left"});break;case"leftloop":case"leftmarquee":z(),l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; width:'+u*d+'px"></div>').css({width:(m+u+p)*d,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(p+p*t)*d}).children().css({"float":"left",width:e});break;case"toploop":case"topmarquee":z(),l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; height:'+u*c+'px"></div>').css({height:(m+u+p)*c,position:"relative",padding:"0",margin:"0",top:-(p+p*t)*c}).children().css({height:f})}}var $=function(a){var b=a*t;return a==k?b=m:-1==a&&0!=m%t&&(b=-m%t),b},_=function(b){var c=function(c){for(var d=c;u+c>d;d++)b.eq(d).find("img["+n+"]").each(function(){var b=a(this);if(b.attr("src",b.attr(n)).removeattr(n),l.find(".clone")[0])for(var c=l.children(),d=0;d<c.size();d++)c.eq(d).find("img["+n+"]").each(function(){a(this).attr(n)==b.attr("src")&&a(this).attr("src",a(this).attr(n)).removeattr(n)})})};switch(e){case"fade":case"fold":case"top":case"left":case"slidedown":c(p*t);break;case"leftloop":case"toploop":c(p+$(o));break;case"leftmarquee":case"topmarquee":var d="leftmarquee"==e?l.css("left").replace("px",""):l.css("top").replace("px",""),f="leftmarquee"==e?d:c,g=p;if(0!=d%f){var h=math.abs(0^d/f);g=1==p?p+h:p+h-1}c(g)}},ab=function(a){if(!a||m!=p||a||r){if(r?p>=1?p=1:0>=p&&(p=0):(o=p,p>=k?p=0:0>p&&(p=k-1)),s(),null!=n&&_(l.children()),o[0]&&(q=o.eq(p),null!=n&&_(o),"slidedown"==e?(o.not(q).stop(!0,!0).slideup(q),q.slidedown(q,g,function(){l[0]||t()})):(o.not(q).stop(!0,!0).hide(),q.animate({opacity:"show"},q,function(){l[0]||t()}))),m>=u)switch(e){case"fade":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,g,function(){t()}).siblings().hide();break;case"fold":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,g,function(){t()}).siblings().animate({opacity:"hide"},q,g);break;case"top":l.stop(!0,!1).animate({top:-p*t*c},q,g,function(){t()});break;case"left":l.stop(!0,!1).animate({left:-p*t*d},q,g,function(){t()});break;case"leftloop":var b=o;l.stop(!0,!0).animate({left:-($(o)+p)*d},q,g,function(){-1>=b?l.css("left",-(p+(k-1)*t)*d):b>=k&&l.css("left",-p*d),t()});break;case"toploop":var b=o;l.stop(!0,!0).animate({top:-($(o)+p)*c},q,g,function(){-1>=b?l.css("top",-(p+(k-1)*t)*c):b>=k&&l.css("top",-p*c),t()});break;case"leftmarquee":var c=l.css("left").replace("px","");0==p?l.animate({left:++c},0,function(){l.css("left").replace("px","")>=0&&l.css("left",-m*d)}):l.animate({left:--c},0,function(){l.css("left").replace("px","")<=-(m+p)*d&&l.css("left",-p*d)});break;case"topmarquee":var d=l.css("top").replace("px","");0==p?l.animate({top:++d},0,function(){l.css("top").replace("px","")>=0&&l.css("top",-m*c)}):l.animate({top:--d},0,function(){l.css("top").replace("px","")<=-(m+p)*c&&l.css("top",-p*c)})}j.removeclass(k).eq(p).addclass(k),m=p,y||(g.removeclass("nextstop"),f.removeclass("prevstop"),0==p&&f.addclass("prevstop"),p==k-1&&g.addclass("nextstop")),h.html("<span>"+(p+1)+"</span>/"+k)}};a&&ab(!0),b&&d.hover(function(){cleartimeout(j)},function(){j=settimeout(function(){p=n,a?ab():"slidedown"==e?q.slideup(q,u):q.animate({opacity:"hide"},q,u),m=p},300)});var bb=function(a){h=setinterval(function(){w?p--:p++,ab()},a?a:r)},cb=function(a){h=setinterval(ab,a?a:r)},db=function(){z||(clearinterval(h),bb())},eb=function(){(y||p!=k-1)&&(p++,ab(),r||db())},fb=function(){(y||0!=p)&&(p--,ab(),r||db())},gb=function(){clearinterval(h),r?cb():bb(),i.removeclass("pausestate")},hb=function(){clearinterval(h),i.addclass("pausestate")};if(v?r?(w?p--:p++,cb(),z&&l.hover(hb,gb)):(bb(),z&&d.hover(hb,gb)):(r&&(w?p--:p++),i.addclass("pausestate")),i.click(function(){i.hasclass("pausestate")?gb():hb()}),"mouseover"==c.trigger?j.hover(function(){var a=j.index(this);i=settimeout(function(){p=a,ab(),db()},c.triggertime)},function(){cleartimeout(i)}):j.click(function(){p=j.index(this),ab(),db()}),r){if(g.mousedown(eb),f.mousedown(fb),y){var ib,jb=function(){ib=settimeout(function(){clearinterval(h),cb(0^r/10)},150)},kb=function(){cleartimeout(ib),clearinterval(h),cb()};g.mousedown(jb),g.mouseup(kb),f.mousedown(jb),f.mouseup(kb)}"mouseover"==c.trigger&&(g.hover(eb,function(){}),f.hover(fb,function(){}))}else g.click(eb),f.click(fb)})}}(jquery),jquery.easing.jswing=jquery.easing.swing,jquery.extend(jquery.easing,{def:"easeoutquad",swing:function(a,b,c,d,e){return jquery.easing[jquery.easing.def](a,b,c,d,e)},easeinquad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeoutquad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeinoutquad:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},easeincubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeoutcubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeinoutcubic:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c},easeinquart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeoutquart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeinoutquart:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c},easeinquint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeoutquint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeinoutquint:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c},easeinsine:function(a,b,c,d,e){return-d*math.cos(b/e*(math.pi/2))+d+c},easeoutsine:function(a,b,c,d,e){return d*math.sin(b/e*(math.pi/2))+c},easeinoutsine:function(a,b,c,d,e){return-d/2*(math.cos(math.pi*b/e)-1)+c},easeinexpo:function(a,b,c,d,e){return 0==b?c:d*math.pow(2,10*(b/e-1))+c},easeoutexpo:function(a,b,c,d,e){return b==e?c+d:d*(-math.pow(2,-10*b/e)+1)+c},easeinoutexpo:function(a,b,c,d,e){return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*math.pow(2,10*(b-1))+c:d/2*(-math.pow(2,-10*--b)+2)+c},easeincirc:function(a,b,c,d,e){return-d*(math.sqrt(1-(b/=e)*b)-1)+c},easeoutcirc:function(a,b,c,d,e){return d*math.sqrt(1-(b=b/e-1)*b)+c},easeinoutcirc:function(a,b,c,d,e){return(b/=e/2)<1?-d/2*(math.sqrt(1-b*b)-1)+c:d/2*(math.sqrt(1-(b-=2)*b)+1)+c},easeinelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return-(h*math.pow(2,10*(b-=1))*math.sin((b*e-f)*2*math.pi/g))+c},easeoutelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return h*math.pow(2,-10*b)*math.sin((b*e-f)*2*math.pi/g)+d+c},easeinoutelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(2==(b/=e/2))return c+d;if(g||(g=e*.3*1.5),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return 1>b?-.5*h*math.pow(2,10*(b-=1))*math.sin((b*e-f)*2*math.pi/g)+c:.5*h*math.pow(2,-10*(b-=1))*math.sin((b*e-f)*2*math.pi/g)+d+c},easeinback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c},easeoutback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeinoutback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeinbounce:function(a,b,c,d,e){return d-jquery.easing.easeoutbounce(a,e-b,0,d,e)+c},easeoutbounce:function(a,b,c,d,e){return(b/=e)<1/2.75?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c},easeinoutbounce:function(a,b,c,d,e){return e/2>b?.5*jquery.easing.easeinbounce(a,2*b,0,d,e)+c:.5*jquery.easing.easeoutbounce(a,2*b-e,0,d,e)+.5*d+c}});!function(a){a.fn.slide=function(b){return a.fn.slide.defaults={type:"slide",effect:"fade",autoplay:!1,delaytime:500,intertime:2500,triggertime:150,defaultindex:0,titcell:".hd li",maincell:".bd",targetcell:null,trigger:"mouseover",scroll:1,vis:1,titonclassname:"on",autopage:!1,prevcell:".prev",nextcell:".next",pagestatecell:".pagestate",opp:!1,pnloop:!0,easing:"swing",startfun:null,endfun:null,switchload:null,playstatecell:".playstate",mouseoverstop:!0,defaultplay:!0,returndefault:!1},this.each(function(){var c=a.extend({},a.fn.slide.defaults,b),d=a(this),e=c.effect,f=a(c.prevcell,d),g=a(c.nextcell,d),h=a(c.pagestatecell,d),i=a(c.playstatecell,d),j=a(c.titcell,d),k=j.size(),l=a(c.maincell,d),m=l.children().size(),n=c.switchload,o=a(c.targetcell,d),p=parseint(c.defaultindex),q=parseint(c.delaytime),r=parseint(c.intertime);parseint(c.triggertime);var q,t=parseint(c.scroll),u=parseint(c.vis),v="false"==c.autoplay||0==c.autoplay?!1:!0,w="false"==c.opp||0==c.opp?!1:!0,x="false"==c.autopage||0==c.autopage?!1:!0,y="false"==c.pnloop||0==c.pnloop?!1:!0,z="false"==c.mouseoverstop||0==c.mouseoverstop?!1:!0,a="false"==c.defaultplay||0==c.defaultplay?!1:!0,b="false"==c.returndefault||0==c.returndefault?!1:!0,c=0,d=0,e=0,f=0,g=c.easing,h=null,i=null,j=null,k=c.titonclassname,l=j.index(d.find("."+k)),m=p=-1==l?p:l,n=p,o=p,p=m>=u?0!=m%t?m%t:t:0,r="leftmarquee"==e||"topmarquee"==e?!0:!1,s=function(){a.isfunction(c.startfun)&&c.startfun(p,k,d,a(c.titcell,d),l,o,f,g)},t=function(){a.isfunction(c.endfun)&&c.endfun(p,k,d,a(c.titcell,d),l,o,f,g)},u=function(){j.removeclass(k),a&&j.eq(n).addclass(k)};if("menu"==c.type)return a&&j.removeclass(k).eq(p).addclass(k),j.hover(function(){q=a(this).find(c.targetcell);var b=j.index(a(this));i=settimeout(function(){switch(p=b,j.removeclass(k).eq(p).addclass(k),s(),e){case"fade":q.stop(!0,!0).animate({opacity:"show"},q,g,t);break;case"slidedown":q.stop(!0,!0).animate({height:"show"},q,g,t)}},c.triggertime)},function(){switch(cleartimeout(i),e){case"fade":q.animate({opacity:"hide"},q,g);break;case"slidedown":q.animate({height:"hide"},q,g)}}),b&&d.hover(function(){cleartimeout(j)},function(){j=settimeout(u,q)}),void 0;if(0==k&&(k=m),r&&(k=2),x){if(m>=u)if("leftloop"==e||"toploop"==e)k=0!=m%t?(0^m/t)+1:m/t;else{var v=m-u;k=1+parseint(0!=v%t?v/t+1:v/t),0>=k&&(k=1)}else k=1;j.html("");var w="";if(1==c.autopage||"true"==c.autopage)for(var x=0;k>x;x++)w+="<li>"+(x+1)+"</li>";else for(var x=0;k>x;x++)w+=c.autopage.replace("$",x+1);j.html(w);var j=j.children()}if(m>=u){l.children().each(function(){a(this).width()>e&&(e=a(this).width(),d=a(this).outerwidth(!0)),a(this).height()>f&&(f=a(this).height(),c=a(this).outerheight(!0))});var y=l.children(),z=function(){for(var a=0;u>a;a++)y.eq(a).clone().addclass("clone").appendto(l);for(var a=0;p>a;a++)y.eq(m-a-1).clone().addclass("clone").prependto(l)};switch(e){case"fold":l.css({position:"relative",width:d,height:c}).children().css({position:"absolute",width:e,left:0,top:0,display:"none"});break;case"top":l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; height:'+u*c+'px"></div>').css({top:-(p*t)*c,position:"relative",padding:"0",margin:"0"}).children().css({height:f});break;case"left":l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; width:'+u*d+'px"></div>').css({width:m*d,left:-(p*t)*d,position:"relative",overflow:"hidden",padding:"1",margin:"10"}).children().css({"float":"left"});break;case"leftloop":case"leftmarquee":z(),l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; width:'+u*d+'px"></div>').css({width:(m+u+p)*d,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-(p+p*t)*d}).children().css({"float":"left",width:e});break;case"toploop":case"topmarquee":z(),l.wrap('<div class="tempwrap" style="overflow:hidden; position:relative; height:'+u*c+'px"></div>').css({height:(m+u+p)*c,position:"relative",padding:"0",margin:"0",top:-(p+p*t)*c}).children().css({height:f})}}var $=function(a){var b=a*t;return a==k?b=m:-1==a&&0!=m%t&&(b=-m%t),b},_=function(b){var c=function(c){for(var d=c;u+c>d;d++)b.eq(d).find("img["+n+"]").each(function(){var b=a(this);if(b.attr("src",b.attr(n)).removeattr(n),l.find(".clone")[0])for(var c=l.children(),d=0;d<c.size();d++)c.eq(d).find("img["+n+"]").each(function(){a(this).attr(n)==b.attr("src")&&a(this).attr("src",a(this).attr(n)).removeattr(n)})})};switch(e){case"fade":case"fold":case"top":case"left":case"slidedown":c(p*t);break;case"leftloop":case"toploop":c(p+$(o));break;case"leftmarquee":case"topmarquee":var d="leftmarquee"==e?l.css("left").replace("px",""):l.css("top").replace("px",""),f="leftmarquee"==e?d:c,g=p;if(0!=d%f){var h=math.abs(0^d/f);g=1==p?p+h:p+h-1}c(g)}},ab=function(a){if(!a||m!=p||a||r){if(r?p>=1?p=1:0>=p&&(p=0):(o=p,p>=k?p=0:0>p&&(p=k-1)),s(),null!=n&&_(l.children()),o[0]&&(q=o.eq(p),null!=n&&_(o),"slidedown"==e?(o.not(q).stop(!0,!0).slideup(q),q.slidedown(q,g,function(){l[0]||t()})):(o.not(q).stop(!0,!0).hide(),q.animate({opacity:"show"},q,function(){l[0]||t()}))),m>=u)switch(e){case"fade":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,g,function(){t()}).siblings().hide();break;case"fold":l.children().stop(!0,!0).eq(p).animate({opacity:"show"},q,g,function(){t()}).siblings().animate({opacity:"hide"},q,g);break;case"top":l.stop(!0,!1).animate({top:-p*t*c},q,g,function(){t()});break;case"left":l.stop(!0,!1).animate({left:-p*t*d},q,g,function(){t()});break;case"leftloop":var b=o;l.stop(!0,!0).animate({left:-($(o)+p)*d},q,g,function(){-1>=b?l.css("left",-(p+(k-1)*t)*d):b>=k&&l.css("left",-p*d),t()});break;case"toploop":var b=o;l.stop(!0,!0).animate({top:-($(o)+p)*c},q,g,function(){-1>=b?l.css("top",-(p+(k-1)*t)*c):b>=k&&l.css("top",-p*c),t()});break;case"leftmarquee":var c=l.css("left").replace("px","");0==p?l.animate({left:++c},0,function(){l.css("left").replace("px","")>=0&&l.css("left",-m*d)}):l.animate({left:--c},0,function(){l.css("left").replace("px","")<=-(m+p)*d&&l.css("left",-p*d)});break;case"topmarquee":var d=l.css("top").replace("px","");0==p?l.animate({top:++d},0,function(){l.css("top").replace("px","")>=0&&l.css("top",-m*c)}):l.animate({top:--d},0,function(){l.css("top").replace("px","")<=-(m+p)*c&&l.css("top",-p*c)})}j.removeclass(k).eq(p).addclass(k),m=p,y||(g.removeclass("nextstop"),f.removeclass("prevstop"),0==p&&f.addclass("prevstop"),p==k-1&&g.addclass("nextstop")),h.html("<span>"+(p+1)+"</span>/"+k)}};a&&ab(!0),b&&d.hover(function(){cleartimeout(j)},function(){j=settimeout(function(){p=n,a?ab():"slidedown"==e?q.slideup(q,u):q.animate({opacity:"hide"},q,u),m=p},300)});var bb=function(a){h=setinterval(function(){w?p--:p++,ab()},a?a:r)},cb=function(a){h=setinterval(ab,a?a:r)},db=function(){z||(clearinterval(h),bb())},eb=function(){(y||p!=k-1)&&(p++,ab(),r||db())},fb=function(){(y||0!=p)&&(p--,ab(),r||db())},gb=function(){clearinterval(h),r?cb():bb(),i.removeclass("pausestate")},hb=function(){clearinterval(h),i.addclass("pausestate")};if(v?r?(w?p--:p++,cb(),z&&l.hover(hb,gb)):(bb(),z&&d.hover(hb,gb)):(r&&(w?p--:p++),i.addclass("pausestate")),i.click(function(){i.hasclass("pausestate")?gb():hb()}),"mouseover"==c.trigger?j.hover(function(){var a=j.index(this);i=settimeout(function(){p=a,ab(),db()},c.triggertime)},function(){cleartimeout(i)}):j.click(function(){p=j.index(this),ab(),db()}),r){if(g.mousedown(eb),f.mousedown(fb),y){var ib,jb=function(){ib=settimeout(function(){clearinterval(h),cb(0^r/10)},150)},kb=function(){cleartimeout(ib),clearinterval(h),cb()};g.mousedown(jb),g.mouseup(kb),f.mousedown(jb),f.mouseup(kb)}"mouseover"==c.trigger&&(g.hover(eb,function(){}),f.hover(fb,function(){}))}else g.click(eb),f.click(fb)})}}(jquery),jquery.easing.jswing=jquery.easing.swing,jquery.extend(jquery.easing,{def:"easeoutquad",swing:function(a,b,c,d,e){return jquery.easing[jquery.easing.def](a,b,c,d,e)},easeinquad:function(a,b,c,d,e){return d*(b/=e)*b+c},easeoutquad:function(a,b,c,d,e){return-d*(b/=e)*(b-2)+c},easeinoutquad:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c},easeincubic:function(a,b,c,d,e){return d*(b/=e)*b*b+c},easeoutcubic:function(a,b,c,d,e){return d*((b=b/e-1)*b*b+1)+c},easeinoutcubic:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c},easeinquart:function(a,b,c,d,e){return d*(b/=e)*b*b*b+c},easeoutquart:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-1)+c},easeinoutquart:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c},easeinquint:function(a,b,c,d,e){return d*(b/=e)*b*b*b*b+c},easeoutquint:function(a,b,c,d,e){return d*((b=b/e-1)*b*b*b*b+1)+c},easeinoutquint:function(a,b,c,d,e){return(b/=e/2)<1?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c},easeinsine:function(a,b,c,d,e){return-d*math.cos(b/e*(math.pi/2))+d+c},easeoutsine:function(a,b,c,d,e){return d*math.sin(b/e*(math.pi/2))+c},easeinoutsine:function(a,b,c,d,e){return-d/2*(math.cos(math.pi*b/e)-1)+c},easeinexpo:function(a,b,c,d,e){return 0==b?c:d*math.pow(2,10*(b/e-1))+c},easeoutexpo:function(a,b,c,d,e){return b==e?c+d:d*(-math.pow(2,-10*b/e)+1)+c},easeinoutexpo:function(a,b,c,d,e){return 0==b?c:b==e?c+d:(b/=e/2)<1?d/2*math.pow(2,10*(b-1))+c:d/2*(-math.pow(2,-10*--b)+2)+c},easeincirc:function(a,b,c,d,e){return-d*(math.sqrt(1-(b/=e)*b)-1)+c},easeoutcirc:function(a,b,c,d,e){return d*math.sqrt(1-(b=b/e-1)*b)+c},easeinoutcirc:function(a,b,c,d,e){return(b/=e/2)<1?-d/2*(math.sqrt(1-b*b)-1)+c:d/2*(math.sqrt(1-(b-=2)*b)+1)+c},easeinelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return-(h*math.pow(2,10*(b-=1))*math.sin((b*e-f)*2*math.pi/g))+c},easeoutelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(1==(b/=e))return c+d;if(g||(g=.3*e),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return h*math.pow(2,-10*b)*math.sin((b*e-f)*2*math.pi/g)+d+c},easeinoutelastic:function(a,b,c,d,e){var f=1.70158,g=0,h=d;if(0==b)return c;if(2==(b/=e/2))return c+d;if(g||(g=e*.3*1.5),h<math.abs(d)){h=d;var f=g/4}else var f=g/(2*math.pi)*math.asin(d/h);return 1>b?-.5*h*math.pow(2,10*(b-=1))*math.sin((b*e-f)*2*math.pi/g)+c:.5*h*math.pow(2,-10*(b-=1))*math.sin((b*e-f)*2*math.pi/g)+d+c},easeinback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c},easeoutback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c},easeinoutback:function(a,b,c,d,e,f){return void 0==f&&(f=1.70158),(b/=e/2)<1?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c},easeinbounce:function(a,b,c,d,e){return d-jquery.easing.easeoutbounce(a,e-b,0,d,e)+c},easeoutbounce:function(a,b,c,d,e){return(b/=e)<1/2.75?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c},easeinoutbounce:function(a,b,c,d,e){return e/2>b?.5*jquery.easing.easeinbounce(a,2*b,0,d,e)+c:.5*jquery.easing.easeoutbounce(a,2*b-e,0,d,e)+.5*d+c}});

script.js

// 导航js
jquery(function(){
    jquery("#j-nav-indexcatedialog").slide({ 
        titcell:".item", //鼠标触发对象
        targetcell:".rwrap", //titcell里面包含的要显示/消失的对象
        delaytime:100, //效果时间
        defaultplay:false,
        triggertime:0, //鼠标延迟触发时间(默认150)
        returndefault:true //鼠标移走后返回默认状态,例如默认频道是“预告片”,鼠标移走后会返回“预告片”(默认false)
    });

    // 轮播图js    
    jquery("#j-slidewrap").slide({
        titcell:".u-slidepg ul li",
        maincell:".slide ul",
        autoplay:true,
        delaytime:0,
    }); 

    // 轮播小广告js   
    jquery("#j-cntwrap").slide({
        maincell:"#j-cntlist ul",
        autopage:true,
        effect:"left",
        autoplay:true,
        scroll:1,
        vis:6
    });   
})   

图片素材

课程培训类网站水平导航+侧导航+轮播图+轮播小广告