HTML5期末大作业：基于 html css js仿腾讯课堂首页

于 2022-10-23 21:34:40 发布
阅读量414 收藏
点赞数
分类专栏： web前端 文章标签： css dreamweaver html html5期末作业
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73081085/article/details/127481450
版权

🎉精彩专栏推荐 💭文末获取联系
✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主
💂 作者主页: 【主页——🚀获取更多优质源码】
🎓 web前端期末大作业： 【📚毕设项目精品实战案例 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
🌎超炫酷的Echarts大屏可视化源码：【🔰 Echarts大屏展示大数据平台可视化(150套) 】
🔖 HTML+CSS+JS实例代码： 【🗂️HTML+CSS+JS实例代码 (炫酷特效网页代码) 继续更新中…】
🎁 免费且实用的WEB前端学习指南： 【📂web前端零基础到高级学习视频教程 120G干货分享】
🥇 关于作者: 💬历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 💪坚持原创，热衷分享，初心未改，继往开来！

📂文章目录

一、👨‍🎓网站题目

👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。

二、✍️网站描述

🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。

🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)

  1. 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分。
  2. 所有页面相互超链接，可到三级页面，有5-10个页面组成。
  3. 页面样式风格统一布局显示正常，不错乱，使用Div+Css技术。
  4. 菜单美观、醒目，二级菜单可正常弹出与跳转。
  5. 要有JS特效，如定时切换和手动切换图片轮播。
  6. 页面中有多媒体元素，如gif、视频、音乐，表单技术的使用。
  7. 页面清爽、美观、大方，不雷同。 。
  8. 不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

三、📚网站介绍

📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。

四、🌐网站演示

五、⚙️ 网站代码

🧱HTML结构代码


<!doctype html>
<html>
    <head>
        <!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--当前页面的三要素-->
        <title>腾讯课堂首页</title>
        <meta name="Keywords" content="关键词,关键词">
        <meta name="description" content="">
        <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1652954723262/images/favicon.ico">
        <!--css,js-->
        <style type="text/css">
            *{margin:0;padding:0}
            body{font-size:12px;font-family:"微软雅黑";cursor:default;background-color:#fff}
            .clear{clear:both;}
            /*滚动条宽度*/  
            ::-webkit-scrollbar{width:10px;background-color:#dedbde;}  
               
            /* 轨道样式 */  
            ::-webkit-scrollbar-track {}  
               
            /* Handle样式 */  
            ::-webkit-scrollbar-thumb {border-radius: 10px;background: rgba(0,0,0,0.2);min-height: 28px;}  
              
            /*当前窗口未激活的情况下*/  
            ::-webkit-scrollbar-thumb:window-inactive {  
                padding-top:100px;
                -webkit-box-shadow:inset 1px 1px 0 rgba(0,0,0,0.1),inset -1px -1px 0 rgba(0,0,0,0.07);
                background-clip:padding-box;background-color:#dadada;
                min-height:28px;-webkit-border-radius:4px;
                -moz-border-radius:4px;border-radius:4px   
            }  
              
            /*hover到滚动条上*/  
            ::-webkit-scrollbar-thumb:vertical:hover{  
                background-color: rgba(0,0,0,0.4);      
            }  
            /*滚动条按下*/  
            ::-webkit-scrollbar-thumb:vertical:active{  
                background-color: rgba(0,0,0,0.5);  
            }  
            /*header start*/
            .header{
                width:1200px;height:85px;margin:0 auto;
                padding-top:15px
            }
            .header h1{
                float:left;margin-top:3px;
            }
            .header h1 a{
                
            }
            .header .search{
                width:450px;height:36px;
                float:left;margin-left:220px;
                border:2px solid #188eee;
                position:relative;
            }
            .header .search input{
                width:370px;height:30px;border:0;line-height:30px;*position:absolute;
                outline:0;color:#545454;font-family:"微软雅黑";*left:0;
                font-size:12px;padding:3px 10px;-webkit-writing-mode: horizontal-tb;

            }
            .header .search a{
                display:inline-block;width:58px;height:36px;
                position:absolute;right:0;line-height:36px;
                text-align:center;background:#188eee    
            }
            .header .search a i{
                display:inline-block;width:20px;height:20px;
                background:url("picture/icon-search-white.png");
                margin-top:9px;margin-left:3px;
            }
            .header a{
                text-decoration:none
            }
            .header .login{
                height:40px;float:right;color:#dedede;
                line-height:40px;margin-top:2px;
            }
            .header .login a{
                color:#333;padding:0 0 0 6px;
            }
            /*end header*/

            /*banner start*/
            .banner{
                width:100%;height:350px;
            }
            /*little-banner start*/
            .banner .little-banner{
                width:1200px;height:50px;position:relative;
                margin:0 auto;
            }
            .banner .little-banner a{
                position:absolute;left:220px;
                padding:0;height:50px;
            }
            /*end little-banner*/

            /*big-banner start*/
            .banner .big-bg{
                height:300px;background:#a534d6;
            }
            .banner .big-bg .big-banner{
                width:1200px;height:300px;margin:0 auto;
                position:relative;
            }
            /*big-banner-ul start*/
            .banner .big-bg .big-banner .big-banner-ul{
                width:220px;height:476px;position:absolute;
                top:-50px;background:#188eee;
            }
            .big-banner-ul #course i{
                display:inline-block;width:18px;height:14px;
                background:url("picture/button.png") no-repeat center;
                background-position:-126px -163px;
                margin:0 10px -1px 15px;
            }
            .big-banner-ul #course{
                display:block;width:220px;height:50px;
                line-height:50px;
            }
            .big-banner-ul .course{
                text-decoration:none;color:white;font-size:16px;
                
            }
            .big-banner-ul .course:hover{
                text-decoration:underline;
            }
            .big-banner-ul ul{
                list-style:none;
            }
            .big-banner-ul ul .course-li{
                width:205px;height:59px;padding-top:11px;
                padding-left:15px;border-bottom:1px solid #1681c4;
                background:#0477C0;position:relative;
            }
            .big-banner-ul ul .course-li:hover{
                background:#0264a3;
            }
            .big-banner-ul ul .course-li .course{
                line-height:24px;display:block
            }
            .big-banner-ul ul .course-li i{
                display:inline-block;width:6px;height:12px;
                position:absolute;top:18px;right:16px;
                background:url("picture/button.png");
                background-position:-147px -163px;
            }
            .li-hover{
                background-position:-157px -163px;
            }
            .big-banner-ul ul .course-li .course-hot{
                display:inline-block;height:21px;
                margin-right:8px;color:#97d2f7;text-decoration:none;
                font-size:14px;margin-top:5px;
            }
            .big-banner-ul ul .course-li .course-hot:hover{
                text-decoration:underline;
            }
            .big-banner-ul .course-list{
                width:446px;position:absolute;
                top:0;left:220px;z-index:1;
                background:rgba(255,255,255,0.95);
                *background:#fff;
                /*opacity:0.95;filter:alpha(opacity=95);*/
                border:2px solid #09699c;display:none
            }
            .big-banner-ul .course-list ul{
                width:382px;
                margin:0 auto;list-style:none;
            }
            .big-banner-ul .course-list ul li{
                border-bottom:1px solid #e5e5e5;                
                width:382px;padding:15px 0 12px;
            }
            .big-banner-ul .course-list ul li .course-child{
                color:#039ae3;font-weight:bold;font-size:14px;
                text-decoration:none;width:80px;float:left;
                margin-top:1px;
            }
            .big-banner-ul .course-list .course-child-list{
                width:297px;
                display:inline-block;
            }
            .big-banner-ul .course-list .course-child-list a{
                display:inline-block;width:91px;height:21px;
                text-decoration:none;color:#333;font-size:14px;
                margin-bottom:3px;
            }
            .big-banner-ul .course-list .course-child-list a:hover{
                color:#63b6f7;
            }
            /*end big-banner-ul*/

            /*big-banner-img start*/
            .banner .big-bg .big-banner .big-banner-img{
                width:760px;height:300px;overflow:hidden;
                position:absolute;top:0;left:220px;*z-index:-1
            }
            .banner .big-bg .big-banner .big-banner-img #ban-ul li{
                list-style:none;float:left;
            }
            .img-hide{
                display:none;
            }
            .on{
                display:block;
            }
            .big-banner-img #ban-nav{
                width:140px;height:24px;position:absolute;          
                bottom:15px;left:50%;list-style:none;
                margin-left:-70px;border-radius:24px;
                background:rgba(0,0,0,0.1);
                /*opacity:0.9;filter:alpha(opacity=90);*/
            }
            .big-banner-img #ban-nav li{
                float:left;width:10px;height:10px;
                margin:8px -17px 0 25px;
                background:url("picture/button.png");
                background-position:-87px -116px;
            }
            .ban-button{
                display:none;width:46px;height:70px;position:absolute;
                top:110px;background:url("picture/button.png");
            }
            .ban-pre{               
                left:10px;
                background-position:-74px 0;
            }
            .ban-next{              
                right:10px;
                background-position:-123px 0;
            }
            /*end *big-banner-img */

            /*big-banner-board start*/
            .banner .big-bg .big-banner .big-banner-board{
                width:220px;height:260px;position:absolute;
                top:20px;right:0;background: rgba(0,0,0,0.4);
                /*opacity:0.8;filter:alpha(opacity=80);*/
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
            }
            .banner .big-bg .big-banner .big-banner-board ul{
                list-style:square;padding:0 0 0 15px ;margin-left:20px;
                font-size:14px;
            }
            .big-banner-board ul li{
                padding:13px 0 1px;color:white;
            }
            .big-banner-board  a{
                color:white;text-decoration:none;
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
            }
            .big-banner-board div{
                color:white;position:relative;
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
            }
            .big-banner-board ul li a:hover{
                text-decoration:underline;
            }
            .big-banner-board .button{
                width:110px;height:110px;text-align:center;
                display:inline-block;margin-top:14px;float:left;
                background:rgba(0,0,0,0.2);
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000)
                /*opacity:0.8;filter:alpha(opacity=80);*/
                
            }
            .big-banner-board .button:hover{
                background:rgba(0,0,0,0.3);
                /*opacity:0.7;filter:alpha(opacity=70);*/
                filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)
            }
            .big-banner-board .button i{
                display:inline-block;width:44px;height:44px;            
                margin-top:10px;margin-right:2px;
            }
            .big-banner-board .button .download{
                background:url("picture/button.png");
                background-position:-123px -73px;
            }
            .big-banner-board .button i + p{
                font-size:16px;margin-top:3px;margin-bottom:2px
            }
            .big-banner-board .button .weixin{
                background:url("picture/button.png");
                background-position:-172px -73px;
            }
            .big-banner-board #board-qr img{
                position:absolute;top:-7px;left:-112px;
                display:none;
            }
            /*end big-banner-board*/

            /*end big-banner*/

            /*end banner*/
            
            /*course-actives start*/
            .course-actives{
                width:980px;height:125px;margin:0 auto;
                border-right:1px solid #eaeaea;
                border-bottom:1px solid #eaeaea;
                padding-left:220px;
            }
            .course-actives a{
                display:inline-block;margin-left: 0px;
                margin-right: -4px;
            }
            /*end course-actives*/
            
            /*course_hot start*/
            .course_hot{
                width:1200px;height:481px;margin:0 auto;padding:40px 0 20px 0;
                
            }
            .course_hot1{
                height:280px;
            }
            .first-course{
                height:271px
            }
            .course_hot .course-hot-nav{
                width:1200px;height:40px;border-bottom:1px solid #ddd;
                position:relative;
            }
            .course_hot .course-hot-nav h2{
                font-weight:normal;height:36px;float:left;
            }
            .course_hot .course-hot-nav h2 .hot-tittle{
                font-size:22px;width:222px;line-height:24px;
                display:inline-block;color:#202020;
                text-decoration:none;
            }
            .course_hot .course-hot-nav h2 .hot-tittle:hover{
                color:#62b4f7
            }
            .course_hot .course-hot-nav h2 .hot-tittle2{
                width:466px;
            }
            .course_hot .course-hot-nav ul{
                float:left;width:970px;height:36px;
            }
            .course_hot .course-hot-nav .job-menu{
                width:730px
            }
            .course_hot .course-hot-nav ul li{
                float:left;list-style:none;font-size:14px;height:40px;
            }
            .course_hot .course-hot-nav ul li a{
                text-decoration:none;display:block;width:90px;
                text-align:center;color:#333;margin-top:8px;
            }
            .course_on{
                color:#188eee;
            }
            .course_li_on{
                border-bottom:2px solid #188eee;
            }
            .course_hot .course-hot-nav ul li a i{
                width:18px;height:18px;display:inline-block;
                background:url("picture/button.png");
                background-position:-49px -99px;
                margin-right:5px;vertical-align:-4px;
                *height:22px;
            }
            .course_hot .course-hot-menu{
                padding-top:30px;height:200px;
            }
            .course_hot .course-hot-menu ul{
                list-style:none;width:1220px;height:200px;
            }
            .course_hot .course-hot-menu ul li{
                float:left; width:220px;height:124px;
                margin-left:-10px;margin-right:34px;
            }
            .course_hot .menu-course-card{
                width:232px;height:180px;border:1px solid transparent;
                padding:10px 0px 8px 11px;font-size:14px;
            }
            .course_hot .menu-course-card:hover{
                border:1px solid #dddddd;
            }
            .course_hot .menu-course-card .course-img{
                display:block;width:220px;height:124px;position:relative;
            }
            .course_hot .menu-course-card .course-img .icon-card-play{
                position:absolute;background:url("picture/icon-card-play.png");
                width:30px;height:30px;bottom:10px;left:10px;
            }
             .course-description{
                display:block;color:#333;
                white-space:nowrap;text-overflow:ellipsis;width:220px;padding-top:8px;
                overflow:hidden;text-decoration:none;
            }
            .course_hot .menu-course-card .course-description:hover{
                color:#62B4F7;
            }
            .course_hot .menu-course-card p{
                padding-top:2px;color:#dedede;
            }
            .course_hot .menu-course-card .free{
                color:#5FB41B;display:inline-block;vertical-align:4px;
                *height:16px;
            }
            .course_hot .menu-course-card .charge{
                color:#E85308;vertical-align:4px;margin-right:9px;*display:inline-block;*height:16px
            }
            .course_hot .menu-course-card .symbol{
                display:inline-block;vertical-align:4px;margin-right:4px;
                *height:16px;
            }
            .course_hot .menu-course-card p a{
                color:#999;margin-left:7px;text-decoration:none;display:inline-block;overflow:hidden;
                white-space:nowrap;text-overflow:ellipsis;width:128px;
            }
            .course_hot .menu-course-card p a:hover{
                color:#62B4F7;
            }
            /*end course_hot*/

            /*catalog start*/
            .course_hot .catalog-menu{
                height:200px;margin-top:-2px;position:relative
            }
            .course_hot .box{
                border-bottom:0;
            }
            .course_hot .catalog-menu .mod-catalog-box{
                display:inline-block;width:240px;height:420px;float:left;
                margin-left:-20px;position:absolute;top:1px;left:0;
            }
            .course_hot .catalog-menu .mod-catalog-box2{
                margin-left:0;height:220px;
            }
            .course_hot .catalog-menu .catalog-menu-div ul{
                list-style:none;width:734px;float:left;
                margin-top:20px;margin-left:242px;
            }
            .course_hot .catalog-menu .catalog-menu-div .catalog-menu-ul{
                margin-left:491px;
            }
            .course_hot .catalog-menu .catalog-menu-div ul li{
                float:left; width:220px;height:124px;
                margin:0 34px 76px -10px;
            }
            
            .course_hot .menu-course-card{
                width:232px;height:180px;border:1px solid transparent;
                padding:10px 0px 8px 11px;font-size:14px;
            }
            .course_hot .menu-course-card:hover{
                border:1px solid #dddddd;
            }
            .course_hot .menu-course-card .course-img{
                display:block;width:220px;height:124px;position:relative;
            }
            .course_hot .menu-course-card .course-img .icon-card-play{
                position:absolute;background:url("picture/icon-card-play.png");
                width:30px;height:30px;bottom:10px;left:10px;
            }
            .course_hot .menu-course-card .course-description{
                display:block;color:#333;
                white-space:nowrap;text-overflow:ellipsis;width:220px;padding-top:8px;
                overflow:hidden;text-decoration:none;
            }
            .course_hot .menu-course-card .course-description:hover{
                color:#62B4F7;
            }
            .course_hot .menu-course-card p{
                padding-top:2px;color:#dedede;
            }
            .free{
                color:#5FB41B;display:inline-block;vertical-align:4px;
                *height:16px;
            }
            .charge{
                color:#E85308;vertical-align:4px;margin-right:9px;*display:inline-block;*height:16px
            }
            .course_hot .menu-course-card .symbol{
                display:inline-block;vertical-align:4px;margin-right:4px;
                *height:16px;
            }
            .course_hot .menu-course-card p a{
                color:#999;margin-left:7px;text-decoration:none;display:inline-block;overflow:hidden;
                white-space:nowrap;text-overflow:ellipsis;width:128px;
            }
            .course_hot .menu-course-card p a:hover{
                color:#62B4F7;
            }

            .course_hot .catalog-menu .course-rank{
                width:242px;height:390px;float:right;
                margin-top:28px;margin-right:-24px;
            }
            .course_hot .catalog-menu .rank-type{
                width:218px;height:29px;list-style:none;
                border-bottom:1px solid #dfdfdf;margin-top:3px;
            }
            .course_hot .catalog-menu .rank-type li{
                float:left;height:29px;text-align:center;
                width:105px;font-size:16px;
                color:#999;padding-left:1px
            }
            .course_hot .catalog-menu .rank-type li:last-child{
                padding-left:5px
            }
            .rank-type-sel{
                color:#331 ! important;border-bottom:1px solid #188eee
            }
            .course_hot .catalog-menu .course-rank .rank-menu{
                margin-right:1px;width:242px;
            }
            .course_hot .catalog-menu .course-rank .rank-menu ul{
                list-style:none;text-align:center;margin-top:10px;margin-left:-11px
            }
            .course-rank .rank-menu .rank-menu-ul li{
                width:218px;height:32px;padding:0 12px;line-height:26px;
            }
            .course-rank .rank-menu .rank-menu-ul li:hover{
                background:#e5e5e5;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first{
                height:83px;padding:6px 12px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num{
                display:inline-block;width:18px;height:18px;
                background:url("picture/button.png");float:left;margin-left:1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-1{
                background-position:-105px -163px;margin:5px 11px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-2{
                background-position:-84px -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-3{
                background-position:-21px -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-4{
                background-position:-174px -130px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-5{
                background-position:-49px -57px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-6{
                background-position:0 -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-7{
                background-position:-63px -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-8{
                background-position:-42px -163px;margin:7px 14px 0 -1px;
            }
            .course-rank .rank-menu .rank-menu-ul li .rank-menu-num-9{
                background-position:-195px -130px;margin:7px 14px 0 -1px;   
            }
            .rank-menu-num-1,.rank-menu-num-2,.rank-menu-num-3,.rank-menu-num-4,.rank-menu-num-5,.rank-menu-num-6,.rank-menu-num-7,.rank-menu-num-8,.rank-menu-num-9{
                *margin-right:1px
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content{
                display:inline-block;width:184px;height:84px;
                float:left;
            }
            .rank-description{
                display:block;color:#333;font-size:14px;
                white-space:nowrap;text-overflow:ellipsis;width:180px;
                overflow:hidden;text-decoration:none;margin-left:3px;
                margin-bottom:3px;*margin-left:-5px;text-align:left;
            }
            .rank-description-other{
                line-height:31px;text-align:left;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-free-img{
                *float:left;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content span{
                font-size:14px; display:block;margin-top:-1px;margin-bottom:3px;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-college{
                color:#999;text-decoration:none;display:inline-block;overflow:hidden;
                white-space:nowrap;text-overflow:ellipsis;margin-left:-6px;
            }
            .course-rank .rank-menu .rank-menu-ul .rank-menu-li-first .rank-menu-content .rank-menu-course{
                float:right;width:96px;margin-left:-8px;
            }

            /*end catalog*/

            /*agency-div start*/
            .agency-div{
                height:95px;padding:80px 33px;
                width:1200px;
            }
            .agency-div .agency-apply{
                width:96px;height:96px;float:left;
            }
            .agency-apply h3{
                font-size:22px;font-weight:normal;margin-top:21px;
                margin-bottom:4px;display:block
            }
            .agency-div .apply{
                font-size:14px;color:#188eee;
                text-decoration:none;
            }
            .agency-div .agency-list{
                width:1090px;height:92px;margin-left:14px;
                float:left;position:relative;overflow:hidden;
            }
            .agency-pre,.agency-next{
                width:26px;height:30px;display:block;position:absolute;
                top:35px;background:url("picture/button.png");
            }
            .agency-list .agency-pre{
                left:0px;background-position:-58px -130px;
            }
            .agency-list ul{
                list-style:none;margin-left:45px;position:absolute;
            }
            .agency-list ul li{
                float:left;padding-right:26px;
            }
            .agency-list ul li a{
                display:inline-block;border:1px solid #eee;
            }
            .agency-list .agency-next{
                right:0px;background-position:-116px -130px;
            }
            /*end agency-div*/

            /*cooperation-div start*/
            .cooperation-div{
                width:1200px;height:250px;background:#444546;
                padding:41px 33px;
            }
            .cooperation-div h3{
                font-size:22px;color:#999;font-weight:normal;
                
            }
            .cooperation-div ul{
                list-style:none;margin-top:27px;border-bottom:1px solid #4a4b4c;height:53px;
            }
            .cooperation-div ul li{
                float:left;margin-right:40px;
            }
            .cooperation-div ul li a{
                text-decoration:none;color:#999;font-size:14px
            }
            .cooperation-div ul li a:hover{
                text-decoration:underline;
            }
            .cooperation-div .icon-logo-bottom{
                margin:0 auto;width:42px;height:32px;display:block;
                background:url("picture/icon_logo_bottom.png");
                margin-top:40px;margin-bottom:5px;
            }
            .cooperation-div p{
                text-align:center;color:#777;line-height:24px;
            }
            /*end cooperation-div*/

            /*jump-container start*/
            .jump-container{
                width:50px;height:120px;position:fixed;
                right:20px;bottom:50px;
            }
            .jump-top,.support{
                display:block;
            }
            .jump-container .jump-container-div div{
                width:50px;height:82px;overflow:hidden;cursor:pointer;position:absolute;top:0
            }
            .jump-container div .jump-plane{
                background:url("picture/jump-plane.png") no-repeat;
                display:block;width:42px;height:56px;position:absolute;top:82px;left:3px
            }
            .jump-top{
                width:42px;height:56px;opacity:0;filter:alpha(opacity=0);
                background:url("picture/bg-side-jump.png") no-repeat;
                background-position:0px 7px;
                margin-top:23px;margin-left:4px
            }
            .jump-top-hover{
                background:url("picture/bg-side-jump-hover.png") no-repeat;
                background-position:-4px -25px
            }
            .support{
                width:40px;height:40px;
                background:url("picture/button.png") no-repeat;
                background-position:-74px -73px;margin-top:3px;
                margin-left:5px;position:absolute;
            }           
            .jump-container span{
                position:absolute;z-index:2;line-height:18px;color:white;
                width:40px;height:40px;font-size:14px;text-align:center;
                background:#188eee;margin-top:3px;margin-left:5px;cursor:pointer;display:none
            }
            /*end jump-container*/
        </style>

    </head>
<body>
    <!--header start-->
    <div class="header">
        <h1>
            <a><img src="picture/bg-logo.png" alt="腾讯课堂" width="288" height="38"></a>
        </h1>
        <div class="search">
            <input type="text" placeholder="搜索课程">
            <a href="#"><i></i></a>
        </div>
        <div class="login">
            <a href="#" style="margin-right:5px">登录</a> | <a href="#">帮助</a>
        </div>
        <div class="clear"></div>
    </div>
    <!--end header-->

    <!--banner start-->
    <div class="banner">
        <!--little-banner start-->
        <div class="little-banner">
            <a href="#"><img src="picture/banner-yunying-2.jpg" alt="群主订阅课程，抽奖享大礼" width="760" width="50" border="0"></a>
        </div>
        <!--big-banner start-->
        <div class="big-bg">
            <div class="big-banner">
                <!--big-banner-ul start-->
                <div class="big-banner-ul">
                    <a href="#" id="course" class="course">
                        <i></i><span>全部课程</span>
                    </a>
                    <ul>
                        <li class="course-li">
                            <a href="#" class="course">职业技能</a><i></i>
                            <a href="#" class="course-hot">职场技能</a>
                            <a href="#" class="course-hot">SNS营销</a>
                            <a href="#" class="course-hot">公务员</a>
                            <div class="course-list">
                                <ul>
                                    <li>
                                        <a href="#" class="course-child">职场/求职</a>
                                        <div class="course-child-list">
                                            <a href="#">就业指导</a>
                                            <a href="#">职业规划</a>
                                            <a href="#">职场技能</a>
                                            <a href="#">企业培训</a>
                                            <a href="#">创业指导</a>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">市场营销</a>
                                        <div class="course-child-list">
                                            <a href="#">淘宝营销</a>
                                            <a href="#">网络推广</a>
                                            <a href="#">SNS营销</a>
                                            <a href="#">SEO/SEM</a>
                                        </div>
                                    </li>    
                                    <li>
                                        <a href="#" class="course-child">职业类考试</a>
                                        <div class="course-child-list">
                                            <a href="#">公务员</a>
                                            <a href="#">财会类</a>
                                            <a href="#">建筑类</a>
                                            <a href="#">金融类</a>
                                            <a href="#">其他考试</a>
                                        </div>     
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">其他技能</a>
                                        <div class="course-child-list">
                                            <a href="#">美容培训</a>
                                            <a href="#">汽车维修</a>
                                            <a href="#">其他</a>
                                        </div>   
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li class="course-li">
                            <a href="#" class="course">IT培训</a><i></i>
                            <a href="#" class="course-hot">网站制作</a>
                            <a href="#" class="course-hot">手机开发</a>
                            <a href="#" class="course-hot">游戏制作</a>
                            <div class="course-list" style="height:332px">
                                <ul>
                                    <li>
                                        <a href="#" class="course-child">编程开发</a>
                                        <div class="course-child-list">
                                            <a href="#">网站制作</a>
                                            <a href="#">游戏开发</a>
                                            <a href="#">手机开发</a>
                                            <a href="#">数据库</a>
                                            <a href="#">编程语言</a>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">工具软件</a>
                                        <div class="course-child-list">
                                            <a href="#">网页制作</a>
                                            <a href="#">网页/平面设计</a>
                                            <a href="#">室内/建筑设计</a>
                                            <a href="#">机械/模具设计</a>
                                            <a href="#">游戏制作</a>
                                            <a href="#">视频处理</a>
                                            <a href="#">办公</a>
                                            <a href="#">其他</a>
                                        </div>
                                    </li>    
                                    <li>
                                        <a href="#" class="course-child">游戏设计</a>
                                        <div class="course-child-list">
                                            <a href="#">原画设计</a>
                                            <a href="#">产品设计</a>
                                        </div>     
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">动漫制作</a>
                                        <div class="course-child-list">
                                            <a href="#">动漫制作</a>
                                        </div>   
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">其他</a>
                                        <div class="course-child-list">
                                            <a href="#">其他</a>
                                        </div>   
                                    </li>
                                </ul>
                            </div>
                        </li>  
                        <li class="course-li">
                            <a href="#" class="course">语言学习</a><i></i>
                            <a href="#" class="course-hot">英语口语</a>
                            <a href="#" class="course-hot">日语</a>
                            <a href="#" class="course-hot">韩语</a>
                            <div class="course-list">
                                <ul>
                                    <li>
                                        <a href="#" class="course-child">英语口语</a>
                                        <div class="course-child-list">
                                            <a href="#">初级入门</a>
                                            <a href="#">英语语法</a>
                                            <a href="#">音标词汇</a>
                                            <a href="#">口语进阶</a>
                                            <a href="#">旅行英语</a>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">英语考试</a>
                                        <div class="course-child-list">
                                            <a href="#">四/六级</a>
                                            <a href="#">考研英语</a>
                                            <a href="#">自考/职称英语</a>
                                            <a href="#">其他</a>
                                        </div>
                                    </li>    
                                    <li>
                                        <a href="#" class="course-child">留学英语</a>
                                        <div class="course-child-list">
                                            <a href="#">雅思</a>
                                            <a href="#">托福</a>
                                            <a href="#">SAT</a>
                                            <a href="#">GRE/GMAT</a>
                                            <a href="#">留学指导</a>
                                            <a href="#">其他</a>
                                        </div>     
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">商务英语</a>
                                        <div class="course-child-list">
                                            <a href="#">职场英语</a>
                                            <a href="#">行业英语</a>
                                            <a href="#">其他</a>
                                        </div>   
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">汉语</a>
                                        <div class="course-child-list">
                                            <a href="#">普通话</a>
                                            <a href="#">粤语</a>
                                        </div>   
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">韩语</a>
                                        <div class="course-child-list">
                                            <a href="#">普通话</a>
                                            <a href="#">粤语</a>
                                        </div>   
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">日语</a>
                                        <div class="course-child-list">
                                            <a href="#">初级入门</a>
                                            <a href="#">日语进阶</a>
                                        </div>   
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">其他</a>
                                        <div class="course-child-list">
                                            <a href="#">其他</a>
                                        </div>   
                                    </li>
                                </ul>
                            </div>
                        </li>  
                        <li class="course-li">
                            <a href="#" class="course">中小学/大学</a><i></i>
                            <a href="#" class="course-hot">考研/自考</a>
                            <a href="#" class="course-hot">中考备战</a>
                            <div class="course-list">
                                <ul>
                                    <li>
                                        <a href="#" class="course-child">小学</a>
                                        <div class="course-child-list">
                                            <a href="#">语文</a>
                                            <a href="#">数学</a>
                                            <a href="#">英语</a>
                                            <a href="#">其他</a>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">初中</a>
                                        <div class="course-child-list">
                                            <a href="#">语文</a>
                                            <a href="#">数学</a>
                                            <a href="#">英语</a>
                                            <a href="#">理综</a>
                                            <a href="#">文综</a>
                                            <a href="#">其他</a>
                                        </div>
                                    </li>    
                                    <li>
                                        <a href="#" class="course-child">高中</a>
                                        <div class="course-child-list">
                                            <a href="#">语文</a>
                                            <a href="#">数学</a>
                                            <a href="#">英语</a>
                                            <a href="#">理综</a>
                                            <a href="#">文综</a>
                                            <a href="#">其他</a>
                                        </div>     
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">小升初备战</a>
                                        <div class="course-child-list">
                                            <a href="#">小升初备战</a>
                                        </div>   
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">中考备战</a>
                                        <div class="course-child-list">
                                            <a href="#">中考备战</a>
                                        </div>   
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">高考备战</a>
                                        <div class="course-child-list">
                                            <a href="#">高考备战</a>
                                        </div>   
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">考研/自考</a>
                                        <div class="course-child-list">
                                            <a href="#">考研/自考</a>
                                        </div>   
                                    </li>
                                </ul>
                            </div>
                        </li> 
                        <li class="course-li">
                            <a href="#" class="course">兴趣爱好</a><i></i>
                            <a href="#" class="course-hot">投资理财</a>
                            <a href="#" class="course-hot">美妆</a>
                            <a href="#" class="course-hot">摄影</a>
                            <div class="course-list">
                                <ul>
                                    <li>
                                        <a href="#" class="course-child">投资理财</a>
                                        <div class="course-child-list">
                                            <a href="#">投资理财</a>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">生活百科</a>
                                        <div class="course-child-list">
                                            <a href="#">婚恋</a>
                                            <a href="#">美妆</a>
                                            <a href="#">家装</a>
                                            <a href="#">风水</a>
                                            <a href="#">其他</a>
                                        </div>
                                    </li>    
                                    <li>
                                        <a href="#" class="course-child">文化艺术</a>
                                        <div class="course-child-list">
                                            <a href="#">唱歌</a>
                                            <a href="#">舞蹈</a>
                                            <a href="#">书画</a>
                                            <a href="#">乐器</a>
                                            <a href="#">摄影</a>
                                            <a href="#">其他</a>
                                        </div>     
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">时尚健康</a>
                                        <div class="course-child-list">
                                            <a href="#">星座</a>
                                            <a href="#">瑜伽</a>
                                            <a href="#">养生</a>
                                            <a href="#">其他</a>
                                        </div>   
                                    </li>
                                </ul>
                            </div>
                        </li>  
                        <li class="course-li">
                            <a class="course">亲子课堂</a><i></i>
                            <a href="#" class="course-hot">幼儿教育</a>
                            <a href="#" class="course-hot">家长训练营</a>
                            <div class="course-list">
                                <ul>
                                    <li>
                                        <a href="#" class="course-child">幼儿教育</a>
                                        <div class="course-child-list">
                                            <a href="#">幼儿教育</a>
                                        </div>
                                    </li>
                                    <li>
                                        <a href="#" class="course-child">学前早教</a>
                                        <div class="course-child-list">
                                            <a href="#">学前早教</a>
                                        </div>
                                    </li>    
                                    <li>
                                        <a href="#" class="course-child">家长训练营</a>
                                        <div class="course-child-list">
                                            <a href="#">家长训练营</a>
                                        </div>     
                                    </li>
                                </ul>
                            </div>
                        </li> 
                    </ul>
                </div>
                <!--end big-banner-ul-->

                <!--big-banner-img start-->
                <div class="big-banner-img">
                    <ul id="ban-ul">
                        <li>
                            <a href="#" class="on">
                                <img src="picture/banner-1.jpg" alt="应试宝" width="760" height="300" border="0">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="img-hide">
                                <img src="picture/banner-2.jpg" alt="中公-金融人" width="760" height="300" border="0">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="img-hide">
                                <img src="picture/banner-3.jpg" alt="潭州学院" width="760" height="300" border="0">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="img-hide">
                                <img src="picture/banner-4.jpg" alt="邢帅教育" width="760" height="300" border="0">
                            </a>
                        </li>
                        <li>
                            <a href="#" class="img-hide">
                                <img src="picture/banner-5.jpg" alt="云中帆教育" width="760" height="300" border="0">
                            </a>
                        </li>
                    </ul>
                    <ul id="ban-nav">
                        <li data-color="#a534d6"></li>
                        <li data-color="#3979ce"></li>
                        <li data-color="#4a4d9c"></li>
                        <li data-color="#523484"></li>
                        <li data-color="#009ee7"></li>
                    </ul>
                    <a href="javascript:void(0)" class="ban-button ban-pre"></a>
                    <a href="javascript:void(0)" class="ban-button ban-next"></a>
                </div>
                <!--end big-banner-img-->

                <!--big-banner-board start-->
                <div class="big-banner-board">
                    <ul>
                        <li><a href="#">2015考研英语名师解析</a></li>
                        <li><a href="#">打破富不过三代的魔咒</a></li>
                        <li><a href="#">网站制作达人分享</a></li>
                        <li><a href="#">海归型男的中秋邂逅</a></li>
                    </ul>
                    <a href="#" class="button"><i class="download"></i><p>下载</p><p>专用QQ</p></a>
                    <div id="board-qr" class="button">
                        <i class="weixin"></i>
                        <p>扫一扫</p><p>QQ公众号</p>
                        <img src="picture/bg-board-qr.png" width="126" height="126">
                    </div>
                    <div class="clear"></div>
                </div>
                <!--end big-banner-board-->
            </div>
        </div>
        <!--end big-banner-->
    </div>
    <!--end banner-->
    
    <!--course-actives start-->
    <div class="course-actives">
        <a href="#"><img src="picture/yexuetang.jpg" alt="夜学堂" width="326" height="125" border="0"></a>
        <a href="#"><img src="picture/yingfulunsi.jpg" alt="英福伦斯" width="326" height="125" border="0"></a>
        <a href="#"><img src="picture/korean.jpg" alt="韩语" width="326" height="125" border="0"></a>
    </div>
    <!--end course-actives-->
    
    <!--course-hot start-->
    <div class="course_hot first-course">
        <div class="course-hot-nav">
            <h2><a href="#" class="hot-tittle">热门课程</a></h2>
            <ul id="course-type">
                <li class="course_li_on"><a href="#" style="color:#188eee">直播课</a></li>
                <li><a href="#"><i id="video"></i>录播课</a></li>
            </ul>           
        </div>
        <div class="course-hot-menu">
            <ul>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/live1.jpg" alt="会计那些儿事儿，会计从业课程趣讲" title="会计那些儿事儿，会计从业课程趣讲" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="会计那些儿事儿，会计从业课程趣讲">会计那些儿事儿，会计从业课程趣讲</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="中公会计">中公会计</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/live2.jpg" alt="四六级名师体验课" title="四六级名师体验课" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="会计那些儿事儿，会计从业课程趣讲">四六级名师体验课</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="">应试宝</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/live3.jpg" alt="新标日初级上册" title="新标日初级上册" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="会计那些儿事儿，会计从业课程趣讲">新标日初级上册</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="">天和智胜教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/live4.png" alt="怎样成为一名学霸" title="怎样成为一名学霸" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="会计那些儿事儿，会计从业课程趣讲">怎样成为一名学霸</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="">阳明教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/live5.jpg" alt="Ps文字与图片结构案例讲座【云中帆教育】" title="Ps文字与图片结构案例讲座【云中帆教育】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="会计那些儿事儿，会计从业课程趣讲">Ps文字与图片结构案例讲座【云中帆教育】</a>
                        <p><span class="charge">¥9.00</span><span class="symbol"> | </span><a href="#" title="">云中帆教育</a></p>
                    </div>
                </li>
            </ul>
            <ul class="img-hide">
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img">
                            <img src="picture/video1.jpg" alt="英福伦斯Live Show" title="英福伦斯Live Show" width="220" height="124" border="0">
                            <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="英福伦斯Live Show">英福伦斯Live Show</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="">腾讯课堂【官方】</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img">
                            <img src="picture/video2.jpg" alt="一起学动画之逆袭海贼王" title="一起学动画之逆袭海贼王" width="220" height="124" border="0">
                            <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="一起学动画之逆袭海贼王">一起学动画之逆袭海贼王</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="">蓝铅笔在线教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img">
                            <img src="picture/video3.jpg" alt="2天学会五十音图【早道日语】" title="2天学会五十音图【早道日语】" width="220" height="124" border="0">
                            <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="2天学会五十音图【早道日语】">2天学会五十音图【早道日语】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="">早道日语网校</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img">
                            <img src="picture/video4.jpg" alt="2014会计考证60个必考点" title="2014会计考证60个必考点" width="220" height="124" border="0">
                            <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="2014会计考证60个必考点">2014会计考证60个必考点</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">| </span><a href="#" title="">对啊网</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img">
                            <img src="picture/video5.jpg" alt="新概念英语第一册同步（入门）" title="新概念英语第一册同步（入门）" width="220" height="124" border="0">
                            <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="新概念英语第一册同步（入门）">新概念英语第一册同步（入门）</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">| </span><a href="#" title=""> 北京网赢天地科技文化传播有限公司</a></p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--end course-hot-->
    
    <!--course_hot start-->
    <div class="course_hot">
        <div class="course-hot-nav">
            <h2><a href="#" class="hot-tittle box">职业技能</a></h2>
            <ul class="job-type">
                <li class="course_li_on"><a href="#" style="color:#188eee">推荐</a></li>   
                <li><a href="#">职场/求职</a></li>
                <li><a href="#">职业类考试</a></li>
                <li><a href="#">市场营销</a></li>
                <li><a href="#">最新发布</a></li>
            </ul>           
        </div>
        <div class="catalog-menu">
            <a href="#" class="mod-catalog-box"><img src="picture/catalog-box.png" alt="网站制作零基础到项目实战系列教学 " title="网站制作零基础到项目实战系列教学 " width="240" height="420" border="0"></a>
            <div class="catalog-menu-div">
            <ul>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/recommend1.jpg" alt="如何找到适合自身性格的职业？" title="如何找到适合自身性格的职业？" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="如何找到适合自身性格的职业？">如何找到适合自身性格的职业？</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="英盛网">英盛网</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/recommend2.jpg" alt="CAD短期培训速成/挑战月薪5000+" title="CAD短期培训速成/挑战月薪5000+" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="CAD短期培训速成/挑战月薪5000+">CAD短期培训速成/挑战月薪5000+</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="潭州学院">潭州学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/recommend3.jpg" alt="工业系列曲面工业建模系统教程(rhino,犀牛，C4D）" title="工业系列曲面工业建模系统教程(rhino,犀牛，C4D）" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="工业系列曲面工业建模系统教程(rhino,犀牛，C4D）">工业系列曲面工业建模系统教程(rhino,犀牛，C4D）</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="邢帅教育">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/recommend4.jpg" alt="微信公众平台入门到精通" title="微信公众平台入门到精通" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="微信公众平台入门到精通">微信公众平台入门到精通</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="完美网络">完美网络</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/recommend5.jpg" alt="100%找到好工作的秘诀" title="100%找到好工作的秘诀" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>                        
                        <a href="#" class="course-description" title="100%找到好工作的秘诀">100%找到好工作的秘诀</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="达梦教育">达梦教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/recommend6.jpg" alt="教师资格考试（2014年零基础精讲课程）【中大网校】" title="教师资格考试（2014年零基础精讲课程）【中大网校】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="教师资格考试（2014年零基础精讲课程）【中大网校】">教师资格考试（2014年零基础精讲课程）【中大网校】</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="中大网校">中大网校</a></p>
                    </div>
                </li>
            </ul>
            <ul class="img-hide">
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket1.jpg" alt="传统销售发展之道？销售人员如何催款？如何利用互联网做传统销售" title="传统销售发展之道？销售人员如何催款？如何利用互联网做传统销售" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="传统销售发展之道？销售人员如何催款？如何利用互联网做传统销售">传统销售发展之道？销售人员如何催款？如何利用互联网做传统销售</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="邢帅教育">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket2.jpg" alt="人际关系和搭讪沟通技巧【潭州学院】" title="人际关系和搭讪沟通技巧【潭州学院】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="人际关系和搭讪沟通技巧【潭州学院】">人际关系和搭讪沟通技巧【潭州学院】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="潭州学院">潭州学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket3.jpg" alt="网站制作实战教学-技术总监带你拿下高工资" title="网站制作实战教学-技术总监带你拿下高工资" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="网站制作实战教学-技术总监带你拿下高工资">网站制作实战教学-技术总监带你拿下高工资</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="潭州学院">潭州学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket4.jpg" alt="【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀" title="【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀">【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="邢帅教育">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket5.jpg" alt="心理修行心灵需要一次旅行智慧精品公开课" title="心理修行心灵需要一次旅行智慧精品公开课" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>                        
                        <a href="#" class="course-description" title="心理修行心灵需要一次旅行智慧精品公开课">心理修行心灵需要一次旅行智慧精品公开课</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="邢帅教育">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/recommend5.jpg" alt="100%找到好工作的秘诀" title="100%找到好工作的秘诀" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="100%找到好工作的秘诀">100%找到好工作的秘诀</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="达梦教育">达梦教育</a></p>
                    </div>
                </li>
            </ul>
            <ul class="img-hide">
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam1.jpg" alt="会计零基础入门考证课 【狐逻学院】" title="会计零基础入门考证课 【狐逻学院】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="会计零基础入门考证课 【狐逻学院】">会计零基础入门考证课 【狐逻学院】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="狐逻学院">狐逻学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam2.png" alt="税务会计实务" title="税务会计实务" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="税务会计实务">税务会计实务</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="深圳学易教育咨询有限公司"> 深圳学易教育咨询有限公司</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam3.jpg" alt="公务员行测申论基础班-2015国考、2014下半年省考" title="公务员行测申论基础班-2015国考、2014下半年省考" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="公务员行测申论基础班-2015国考、2014下半年省考">公务员行测申论基础班-2015国考、2014下半年省考</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="魁冠公考">魁冠公考</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam4.jpg" alt="公务员考试行测申论一年无限学【魁冠公考】" title="公务员考试行测申论一年无限学【魁冠公考】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="公务员考试行测申论一年无限学【魁冠公考】">公务员考试行测申论一年无限学【魁冠公考】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="魁冠公考">魁冠公考</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam5.jpg" alt="会计从业资格证考试（会计基础）【e学通】" title="会计从业资格证考试（会计基础）【e学通】" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>                        
                        <a href="#" class="course-description" title="会计从业资格证考试（会计基础）【e学通】">会计从业资格证考试（会计基础）【e学通】</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="e学通">e学通</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam6.jpg" alt="会计基础学习视频完整版" title="会计基础学习视频完整版" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="会计基础学习视频完整版">会计基础学习视频完整版</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="对啊网">对啊网</a></p>
                    </div>
                </li>
            </ul>
            <ul class="img-hide">
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/marketing1.jpg" alt="淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广" title="淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广">淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="邢帅教育">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/marketing2.jpg" alt="淘宝开店装修运营流程提升网店流量 淘宝客推广 销量打造爆款步骤" title="淘宝开店装修运营流程提升网店流量 淘宝客推广 销量打造爆款步骤" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="淘宝开店装修运营流程提升网店流量 淘宝客推广 销量打造爆款步骤">淘宝开店装修运营流程提升网店流量 淘宝客推广 销量打造爆款步骤</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="邢帅教育"> 邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/marketing3.jpg" alt="淘宝网店开店数据运营步骤装修上传宝贝教程淘宝客推广课程" title="淘宝网店开店数据运营步骤装修上传宝贝教程淘宝客推广课程" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="淘宝网店开店数据运营步骤装修上传宝贝教程淘宝客推广课程">淘宝网店开店数据运营步骤装修上传宝贝教程淘宝客推广课程</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="邢帅教育">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/marketing4.png" alt="淘宝运营实战课堂" title="淘宝运营实战课堂" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="淘宝运营实战课堂">淘宝运营实战课堂</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="西安久佳电子商务有限责任公司"> 西安久佳电子商务有限责任公司</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/marketing5.jpg" alt="微信营销：微信营销入门的几个要点" title="微信营销：微信营销入门的几个要点" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>                        
                        <a href="#" class="course-description" title="微信营销：微信营销入门的几个要点">微信营销：微信营销入门的几个要点</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="优势营销">优势营销</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/marketing6.png" alt="微博创意：10大内容创意思维方法" title="微博创意：10大内容创意思维方法" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="微博创意：10大内容创意思维方法">微博创意：10大内容创意思维方法</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="优势营销">优势营销</a></p>
                    </div>
                </li>
            </ul>
            <ul class="img-hide">
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/issue1.jpg" alt="《用中国智慧做战略定位》第1讲" title="《用中国智慧做战略定位》第1讲" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="《用中国智慧做战略定位》第1讲">《用中国智慧做战略定位》第1讲</a>
                        <p><span class="charge" style="margin-right:5px">¥1980.00</span> <span class="symbol">|</span><a href="#" title="华夏龙文（北京）营销策划公司"> 华夏龙文（北京）营销策划公司</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/issue2.jpg" alt="机械大师教你玩Solidworks【技成培训】" title="机械大师教你玩Solidworks【技成培训】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="机械大师教你玩Solidworks【技成培训】">机械大师教你玩Solidworks【技成培训】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="技成培训网"> 技成培训网  </a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/issue3.jpg" alt="建筑 施工 管理 二建 造价员 咨询电话13312288337" title="建筑 施工 管理 二建 造价员 咨询电话13312288337" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="建筑 施工 管理 二建 造价员 咨询电话13312288337">建筑 施工 管理 二建 造价员 咨询电话13312288337</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="中建尚学">中建尚学</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/issue4.jpg" alt="威力无比的邮件营销和引爆流量的文库营销" title="威力无比的邮件营销和引爆流量的文库营销" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="威力无比的邮件营销和引爆流量的文库营销">威力无比的邮件营销和引爆流量的文库营销</a>
                        <p><span class="charge" style="margin-right:5px">¥280.00</span> <span class="symbol">|</span><a href="#" title="潭州学院"> 潭州学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/issue5.jpg" alt="初级会计职称——初级会计实务知识点" title="初级会计职称——初级会计实务知识点" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>                        
                        <a href="#" class="course-description" title="初级会计职称——初级会计实务知识点">初级会计职称——初级会计实务知识点</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="东奥会计在线">东奥会计在线</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/issue6.jpg" alt="注册会计师——财务成本管理知识点" title="注册会计师——财务成本管理知识点" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description" title="注册会计师——财务成本管理知识点">注册会计师——财务成本管理知识点</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="东奥会计在线">东奥会计在线</a></p>
                    </div>
                </li>
                <div class="clear"></div>
            </ul>
            </div>
            <div class="course-rank">
                <ul class="rank-type">
                    <li class="rank-type-sel">免费排行</li>
                    <li>付费排行</li>
                </ul>
                <div class="rank-menu">
                    <ul class="rank-menu-ul">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="人际关系和搭讪沟通技巧【潭州学院】">人际关系和搭讪沟通技巧【潭州学院】</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu1.jpg" alt="人际关系和搭讪沟通技巧【潭州学院】" title="人际关系和搭讪沟通技巧【潭州学院】" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">40040人</span>
                                    <span class="rank-college" title="潭州学院">潭州学院</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="新手开网店赚钱必学系列教程">新手开网店赚钱必学系列教程</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计那些儿事儿，会计从业课程趣讲">会计那些儿事儿，会计从业课程趣讲</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="CAD短期培训速成/挑战月薪5000+">CAD短期培训速成/挑战月薪5000+</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀">【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广">淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="微信公众平台入门到精通">微信公众平台入门到精通</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="淘宝运营实战课堂">淘宝运营实战课堂</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="网络营销从入门到精通">网络营销从入门到精通</a>
                        </li>
                    </ul>
                    <ul class="rank-menu-ul img-hide">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="影楼后期VIP">影楼后期VIP</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu2.jpg" alt="影楼后期VIP" title="影楼后期VIP" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">¥880.00</span>
                                    <span class="rank-college" title="潭州学院">潭州学院</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计从业资格证考试（财经法规+电算化）【e学通】">会计从业资格证考试（财经法规+电算化）【e学通】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="腾讯QQ精准营销内训班">腾讯QQ精准营销内训班</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="真账实操学出纳实务（完整版）">真账实操学出纳实务（完整版）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="真账实操学会计做账（完整版）">真账实操学会计做账（完整版）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="真账实操学报税税务（完整版）">真账实操学报税税务（完整版）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="互联网整合营销VIP内训班">互联网整合营销VIP内训班</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="企业网络营销入门到精通">企业网络营销入门到精通</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="三菱工控系列答疑【技成会员专属】">三菱工控系列答疑【技成会员专属】</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="course-rank img-hide">
                <ul class="rank-type">
                    <li class="rank-type-sel">免费排行</li>
                    <li>付费排行</li>
                </ul>
                <div class="rank-menu">
                    <ul class="rank-menu-ul">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="人际关系和搭讪沟通技巧【潭州学院】">人际关系和搭讪沟通技巧【潭州学院】</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu1.jpg" alt="人际关系和搭讪沟通技巧【潭州学院】" title="人际关系和搭讪沟通技巧【潭州学院】" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">40040人</span>
                                    <span class="rank-college" title="潭州学院">潭州学院</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="CAD短期培训速成/挑战月薪5000+">CAD短期培训速成/挑战月薪5000+</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀">【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="传统销售发展之道？销售人员如何催款？如何利用互联网做传统销售">传统销售发展之道？销售人员如何催款？如何利用互联网做传统销售</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="网站制作实战教学-技术总监带你拿下高工资">网站制作实战教学-技术总监带你拿下高工资</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="2015中行招聘大解析">2015中行招聘大解析</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="平面设计实战入门到精通试听课">平面设计实战入门到精通试听课</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="行为面试技巧（前欧莱雅高级培训经理讲解）【知知网】">行为面试技巧（前欧莱雅高级培训经理讲解）【知知网】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="《理想的召唤》沙龙（中国青年创业必修课程）【财商壹佰教育】">《理想的召唤》沙龙（中国青年创业必修课程）【财商壹佰教育】</a>
                        </li>
                    </ul>
                    <ul class="rank-menu-ul img-hide">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="影楼后期VIP">影楼后期VIP</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu2.jpg" alt="影楼后期VIP" title="影楼后期VIP" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">¥880.00</span>
                                    <span class="rank-college" title="潭州学院">潭州学院</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="CAD设计进阶1.0实战，高薪必备技能">CAD设计进阶1.0实战，高薪必备技能</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="创业开公司20问">创业开公司20问</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="创业开公司20问">创业开公司20问</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="从毛主席建立新中国看中小企业创业智慧">从毛主席建立新中国看中小企业创业智慧</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="互联网金融总裁班">互联网金融总裁班</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="ISO9001 2015新版标准精要讲座">ISO9001 2015新版标准精要讲座</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="九型人格与领导力（二）">九型人格与领导力（二）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="九型人格与领导力（三）">九型人格与领导力（三）</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="course-rank img-hide">
                <ul class="rank-type">
                    <li class="rank-type-sel">免费排行</li>
                    <li>付费排行</li>
                </ul>
                <div class="rank-menu">
                    <ul class="rank-menu-ul">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="会计那些儿事儿，会计从业课程趣讲">会计那些儿事儿，会计从业课程趣讲</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu3.jpg" alt="会计那些儿事儿，会计从业课程趣讲" title="会计那些儿事儿，会计从业课程趣讲" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">1014人</span>
                                    <span class="rank-college" title="中公会计">中公会计</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计零基础入门考证课 【狐逻学院】">会计零基础入门考证课 【狐逻学院】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="公务员考试行测申论一年无限学【魁冠公考】">公务员考试行测申论一年无限学【魁冠公考】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计从业课程趣讲">会计从业课程趣讲</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="出纳会计做账报税实务操作教程（公开课）">出纳会计做账报税实务操作教程（公开课）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计考证班（零基础开始）【云中帆教育】">会计考证班（零基础开始）【云中帆教育】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="公务员行测申论基础班-2015国考、2014下半年省考">公务员行测申论基础班-2015国考、2014下半年省考</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="教师资格考试（2014年零基础精讲课程）【中大网校】">教师资格考试（2014年零基础精讲课程）【中大网校】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="造价工程师考试（2014年高频真题课程）【中大网校】">造价工程师考试（2014年高频真题课程）【中大网校】</a>
                        </li>
                    </ul>
                    <ul class="rank-menu-ul img-hide">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="会计从业资格证考试（财经法规+电算化）【e学通】">会计从业资格证考试（财经法规+电算化）【e学通】</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu4.jpg" alt="会计从业资格证考试（财经法规+电算化）【e学通】" title="会计从业资格证考试（财经法规+电算化）【e学通】" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">¥1.00</span>
                                    <span class="rank-college" title="e学通">e学通</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="真账实操学出纳实务（完整版）">真账实操学出纳实务（完整版）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="真账实操学会计做账（完整版）">真账实操学会计做账（完整版）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="真账实操学报税税务（完整版）">真账实操学报税税务（完整版）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="互联网整合营销VIP内训班">互联网整合营销VIP内训班</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计证零基础精讲班(周末班)">会计证零基础精讲班(周末班)</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="安全工程师-事故案例分析（2014年密训班）1-2章【中大网校】">安全工程师-事故案例分析（2014年密训班）1-2章【中大网校】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="播音基础普通话等级考试【惠天听书 惠及天下】">播音基础普通话等级考试【惠天听书 惠及天下】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="CCAA国家注册QMS审核员考前辅导班">CCAA国家注册QMS审核员考前辅导班</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="course-rank img-hide">
                <ul class="rank-type">
                    <li class="rank-type-sel">免费排行</li>
                    <li>付费排行</li>
                </ul>
                <div class="rank-menu">
                    <ul class="rank-menu-ul">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="新手开网店赚钱必学系列教程">新手开网店赚钱必学系列教程</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu5.png" alt="新手开网店赚钱必学系列教程" title="新手开网店赚钱必学系列教程" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">169863人</span>
                                    <span class="rank-college" title="潭州学院">潭州学院</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广">淘宝成交网店秘密流量、销量提升店铺优化宝典淘宝推广</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="微信公众平台入门到精通">微信公众平台入门到精通</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="淘宝运营实战课堂">淘宝运营实战课堂</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="网络营销从入门到精通">网络营销从入门到精通</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="如何玩转微营销-【潭州学院】">如何玩转微营销-【潭州学院】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="电脑组装维护从零开始【潭州学院】">电脑组装维护从零开始【潭州学院】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="淘宝开店装修运营流程提升网店流量 淘宝客推广 销量打造爆款步骤">淘宝开店装修运营流程提升网店流量 淘宝客推广 销量打造爆款步骤</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="从零开始学习SEO（最前沿的互联网营销）【潭州学院】">从零开始学习SEO（最前沿的互联网营销）【潭州学院】</a>
                        </li>
                    </ul>
                    <ul class="rank-menu-ul img-hide">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="腾讯QQ精准营销内训班">腾讯QQ精准营销内训班</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu6.jpg" alt="腾讯QQ精准营销内训班" title="腾讯QQ精准营销内训班" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">¥9.90</span>
                                    <span class="rank-college" title="完美网络">完美网络</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="企业网络营销入门到精通">企业网络营销入门到精通</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="百度营销技巧内训班">百度营销技巧内训班</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="【华罡网校】全网营销，一课在手，全网秒杀！">【华罡网校】全网营销，一课在手，全网秒杀！</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="互联网创业者屌丝之路">互联网创业者屌丝之路</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="七天网络营销精英大会">七天网络营销精英大会</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="搜索引擎优化VIP班">搜索引擎优化VIP班</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="速卖通培训（20小时从零基础到出单）——开外贸网店，在家赚美元">速卖通培训（20小时从零基础到出单）——开外贸网店，在家赚美元</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="网络开店流程之 新店运营基本功">网络开店流程之 新店运营基本功</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="course-rank img-hide">
                <ul class="rank-type">
                    <li class="rank-type-sel">免费排行</li>
                    <li>付费排行</li>
                </ul>
                <div class="rank-menu">
                    <ul class="rank-menu-ul">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="建筑 施工 管理 二建 造价员 咨询电话13312288337">建筑 施工 管理 二建 造价员 咨询电话13312288337</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu7.jpg" alt="建筑 施工 管理 二建 造价员 咨询电话13312288337" title="建筑 施工 管理 二建 造价员 咨询电话13312288337" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">81人</span>
                                    <span class="rank-college" title="中建尚学">中建尚学</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="机械大师教你玩Solidworks【技成培训】">机械大师教你玩Solidworks【技成培训】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="2015年注册会计师入门阶段课程 嗨学网注会">2015年注册会计师入门阶段课程 嗨学网注会</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="工业帮PLC编程西门子全系列PLC免费公开课">工业帮PLC编程西门子全系列PLC免费公开课</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计从业资格证培训《30小时通过考试》">会计从业资格证培训《30小时通过考试》</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计从业课程趣讲">会计从业课程趣讲</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="电气自动化专业大学生就业方向指导">电气自动化专业大学生就业方向指导</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="中建造价员 二建 施工员">中建造价员 二建 施工员</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="网络营销最新赚钱模式（你就是印钞机）【品牌智造】">网络营销最新赚钱模式（你就是印钞机）【品牌智造】</a>
                        </li>
                    </ul>
                    <ul class="rank-menu-ul img-hide">
                        <li class="rank-menu-li-first">
                            <i class="rank-menu-num rank-menu-num-1"></i>
                            <div class="rank-menu-content">
                                <a href="#" class="rank-description" title="威力无比的邮件营销和引爆流量的文库营销">威力无比的邮件营销和引爆流量的文库营销</a>
                                <a href="#" class="rank-free-img"><img src="picture/rank-menu8.jpg" alt="威力无比的邮件营销和引爆流量的文库营销" title="威力无比的邮件营销和引爆流量的文库营销" width="90" height="50" border="0"></a>
                                <div class="rank-menu-course">
                                    <span class="charge" style="font-size:14px">¥280.00</span>
                                    <span class="rank-college" title="潭州学院">潭州学院</span>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-2"></i>
                            <a href="#" class="rank-description rank-description-other" title="速卖通培训（20小时从零基础到出单）——开外贸网店，在家赚美元">速卖通培训（20小时从零基础到出单）——开外贸网店，在家赚美元</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-3"></i>
                            <a href="#" class="rank-description rank-description-other" title="互联网整合营销VIP内训班">互联网整合营销VIP内训班</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-4"></i>
                            <a href="#" class="rank-description rank-description-other" title="ISO9001 2015新版标准精要讲座">ISO9001 2015新版标准精要讲座</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-5"></i>
                            <a href="#" class="rank-description rank-description-other" title="西门子S7-200 SMART PLC中高级精讲及案例剖析【白金专属】">西门子S7-200 SMART PLC中高级精讲及案例剖析【白金专属】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-6"></i>
                            <a href="#" class="rank-description rank-description-other" title="初级会计职称考试（经济法基础+会计实务）【e学通】">初级会计职称考试（经济法基础+会计实务）【e学通】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-7"></i>
                            <a href="#" class="rank-description rank-description-other" title="会计从业资格证考试（会计基础+财经法规+会计电算化）【e学通】">会计从业资格证考试（会计基础+财经法规+会计电算化）【e学通】</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-8"></i>
                            <a href="#" class="rank-description rank-description-other" title="九型人格与领导力（四）">九型人格与领导力（四）</a>
                        </li>
                        <li>
                            <i class="rank-menu-num rank-menu-num-9"></i>
                            <a href="#" class="rank-description rank-description-other" title="面试技巧辅导一对一，角色演练">面试技巧辅导一对一，角色演练</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="course_hot">
        <div class="course-hot-nav">
            <h2><a href="#" class="hot-tittle box">语言学习</a></h2>
            <ul class="job-type">
                <li class="course_li_on"><a href="#" style="color:#188eee">推荐</a></li>   
                <li><a href="#">韩语</a></li>
                <li><a href="#">英语口语</a></li>
                <li><a href="#">日语</a></li>
                <li><a href="#">最新发布</a></li>
            </ul>           
        </div>
        <div class="catalog-menu">
            <a href="#" class="mod-catalog-box"><img src="picture/catalog-box2.png" alt="从零开始学韩语" title="从零开始学韩语" width="240" height="420" border="0"></a>
            <div class="catalog-menu-div">
            <ul>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/lan1.jpg" alt="英国曼彻斯特大学来了——威久在线教育展" title="英国曼彻斯特大学来了——威久在线教育展" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="英国曼彻斯特大学来了——威久在线教育展">英国曼彻斯特大学来了——威久在线教育展</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="威久留学">威久留学</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/lan2.jpg" alt="每天学点日语/零基础免费日语学习" title="每天学点日语/零基础免费日语学习" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="每天学点日语/零基础免费日语学习">每天学点日语/零基础免费日语学习</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="潭州学院">潭州学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/lan3.jpg" alt="看韩剧学韩语——“消灭”字幕党【第一季】" title="看韩剧学韩语——“消灭”字幕党【第一季】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="看韩剧学韩语——“消灭”字幕党【第一季】">看韩剧学韩语——“消灭”字幕党【第一季】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="天和智胜教育">天和智胜教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/lan4.jpg" alt="【小C英语那些事儿】非一般的英语课堂~韦博教育" title="【小C英语那些事儿】非一般的英语课堂~韦博教育" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="【小C英语那些事儿】非一般的英语课堂~韦博教育">【小C英语那些事儿】非一般的英语课堂~韦博教育</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#" title="韦博国际英语">韦博国际英语</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/live2.jpg" alt="四六级名师体验课" title="四六级名师体验课" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>                        
                        <a href="#" class="course-description" title="四六级名师体验课">四六级名师体验课</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="应试宝">应试宝</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/video5.jpg" alt="新概念英语第一册同步（入门）" title="新概念英语第一册同步（入门）" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description" title="新概念英语第一册同步（入门）">新概念英语第一册同步（入门）</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#" title="北京网赢天地科技文化传播有限公">北京网赢天地科技文化传播有限公</a></p>
                    </div>
                </li>
            </ul>
            <ul class="img-hide">
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket1.jpg" alt="传统销售发展之道？销售人员如何催款？如何利用互联网做传统销售" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description">传统销售发展之道？销售人员如何催款？如何利用互联网做传统销售</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket2.jpg" alt="人际关系和搭讪沟通技巧【潭州学院】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description">人际关系和搭讪沟通技巧【潭州学院】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#">潭州学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket3.jpg" alt="网站制作实战教学-技术总监带你拿下高工资" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description">网站制作实战教学-技术总监带你拿下高工资</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#">潭州学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket4.jpg" alt="【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description">【职场、生活必备】生活无处不销售，销售人员业绩倍增的秘诀</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/jobmarket5.jpg" alt="心理修行心灵需要一次旅行智慧精品公开课" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>                        
                        <a href="#" class="course-description">心理修行心灵需要一次旅行智慧精品公开课</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#">邢帅教育</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/recommend5.jpg" alt="100%找到好工作的秘诀" width="220" height="124" border="0">
                        <i class="icon-card-play"></i>
                        </a>
                        <a href="#" class="course-description">100%找到好工作的秘诀</a>
                        <p><span class="free" style="margin-right:9px">免费</span><span class="symbol">|</span><a href="#">达梦教育</a></p>
                    </div>
                </li>
            </ul>
            <ul class="img-hide">
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam1.jpg" alt="会计零基础入门考证课 【狐逻学院】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description">会计零基础入门考证课 【狐逻学院】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#">狐逻学院</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam2.png" alt="税务会计实务" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description">税务会计实务</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#"> 深圳学易教育咨询有限公司</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam3.jpg" alt="公务员行测申论基础班-2015国考、2014下半年省考" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description">公务员行测申论基础班-2015国考、2014下半年省考</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#">魁冠公考</a></p>
                    </div>
                </li>
                <li>
                    <div class="menu-course-card">
                        <a href="#" class="course-img"><img src="picture/exam4.jpg" alt="公务员考试行测申论一年无限学【魁冠公考】" width="220" height="124" border="0"></a>
                        <a href="#" class="course-description">公务员考试行测申论一年无限学【魁冠公考】</a>
                        <p><span class="free" style="margin-right:5px">免费</span> <span class="symbol">|</span><a href="#">魁冠公考</a></p>
                    </div>
                </li>
                <li>
                
        

</body>
</html>

六、🥇 如何让学习不再盲目

第一、带着目标去学习，无论看书报课还是各种线下活动。
首先要明确自己的学习目标是什么，是想解决什么问题，实现怎样的目标。

第二、学习要建立个人知识体系
知识是学不完的，书籍是浩如烟海的。我们尽情徜徉其中的时候，千万不要被海水淹死，没有自我了。在学习过程中，我们会发现每一个知识点都是有她的边界和背景的，我们要善于归纳整理知识

第三、学到了就要用到

有时，我们一天下来感觉学到了很多干货，那么我们一定要将这些知识点和实际工作和生活联系起来。知识和实践相互联系靠拢。爱学习是一件好事，但只有会学习的人，才有价值。

七、🎁更多干货

1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

3.

以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻💬

在这里插入图片描述

web学生网页设计
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web学生网页设计

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值