jQuery网络技术在线学习网站分类导航图片布局
导航菜单 次 2018-07-25欢迎访问jQuery网络技术在线学习网站！我们提供丰富的分类导航，图片布局和导航菜单学习资源。通过我们的网站，您可以轻松学习并掌握jQuery技术，助力您的网络开发之旅。快来加入我们，开启学习之旅吧！
jQuery网络技术开发在线教育学习网站分类导航菜单和图片轮播布局代码，一款非常实用的教育类型网站导航和banner图片布局样式。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
1、head引入css文件
<link rel="stylesheet" type="text/css" href="css/index.css">
2、head引入js文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.SuperSlide.2.1.1.js"></script>
3、body引入HTML代码
<div class="boxbg">
<div class="bannerbg">
<ul>
<li><div class="bk" style="background-image: url(images/5b506931000179e909360316.jpg"></div></li>
<li><div class="bk" style="background-image: url(images/5b4c0686000136fc18720632.jpg"></div></li>
<li><div class="bk" style="background-image: url(images/5b55372d000173c909360316.jpg"></div></li>
<li><div class="bk" style="background-image: url(images/5b191458000144b309360316.jpg"></div></li>
<li><div class="bk" style="background-image: url(images/5b3c2d6e0001241b09360316.jpg"></div></li>
<li><div class="bk" style="background-image: url(images/5af41f3d0001db8509360316.jpg"></div></li>
</ul>
</div>
</div>
<div class="bk" style="background-image: url(images/5b3c2d6e0001241b09360316.jpg);"></div>
<div class="bgfff banner-box">
<div class="g-banner pr">
<div class="menuwrap"></div>
<div class="submenu a hide" data-id="a" style="display: none;">
<div class="innerBox clearfix">
<div class="subinnerBox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">前沿技术</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">微服务</a>
<a target="_blank" href="#">区块链</a>
<a target="_blank" href="#">以太坊</a>
<a target="_blank" href="#">人工智能</a>
<a target="_blank" href="#">机器学习</a>
<a target="_blank" href="#">深度学习</a>
<a target="_blank" href="#">计算机视觉</a>
<a target="_blank" href="#">数据分析&挖掘</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" target="_blank" title="区块链入门与去中心化应用实战" class="clearfix">
<img src="images/5af2a67500016b9905400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">区块链入门与去中心化应用实战</h3>
<div class="course-card-price l">
￥199.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>509
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="区块链技术核心概念与原理讲解" class="clearfix">
<img src="images/5ae3e5b80001818c06000338-240-135.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">区块链技术核心概念与原理讲解</h3>
<div class="course-card-info l">
入门
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>20167
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="基于Python玩转人工智能最火框架 TensorFlow应用实践" class="clearfix">
<img src="images/5a5ddeda000145b405400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">基于Python玩转人工智能最火框架 TensorFlow应用实践</h3>
<div class="course-card-price l">
￥299.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>1186
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="Python人工智能常用库Numpy使用入门" class="clearfix">
<img src="images/5a7048580001670506000338-240-135.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">Python人工智能常用库Numpy使用入门</h3>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>20040
</div>
</div>
</a>
</div>
</div>
</div>
<div class="submenu b hide" style="display: none;">
<div class="innerBox clearfix">
<div class="subinnerBox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">前端开发</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">HTML/CSS</a>
<a target="_blank" href="#">JavaScript</a>
<a target="_blank" href="#">Vue.js</a>
<a target="_blank" href="#">React.JS</a>
<a target="_blank" href="#">Angular</a>
<a target="_blank" href="#">Node.js</a>
<a target="_blank" href="#">jQuery</a>
<a target="_blank" href="#">Bootstrap</a>
<a target="_blank" href="#">Sass/Less</a>
<a target="_blank" href="#">WebApp</a>
<a target="_blank" href="#">前端工具</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" target="_blank" title="HTML5与CSS3实现动态网页" class="clearfix">
<img src="images/5836c00a0001916906000338.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">HTML5与CSS3实现动态网页</h3>
<div class="course-card-price l">
￥628.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
5步／29课
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>1818
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="微信小程序入门与实战 常用组件API开发技巧项目实战" class="clearfix">
<img src="images/583e42fb0001e04f05400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">微信小程序入门与实战 常用组件API开发技巧项目实战</h3>
<div class="course-card-price l">
￥149.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>13621
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="揭秘一线互联网企业 前端JavaScript高级面试" class="clearfix">
<img src="images/5a9dfab40001bf1005400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">揭秘一线互联网企业 前端JavaScript高级面试</h3>
<div class="course-card-price l">
￥366.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
高级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>548
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="前端JavaScript面试技巧" class="clearfix">
<img src="images/595067d5000132a105400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">前端JavaScript面试技巧</h3>
<div class="course-card-price l">
￥149.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>2706
</div>
</div>
</a>
</div>
</div>
</div>
<div class="submenu c hide" style="display: none;">
<div class="innerBox clearfix">
<div class="subinnerBox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">后端开发</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">Java</a>
<a target="_blank" href="#">SpringBoot</a>
<a target="_blank" href="#">Python</a>
<a target="_blank" href="#">爬虫</a>
<a target="_blank" href="#">Django</a>
<a target="_blank" href="#">Go</a>
<a target="_blank" href="#">PHP</a>
<a target="_blank" href="#">C</a>
<a target="_blank" href="#">C++</a>
<a target="_blank" href="#">C#</a>
<a target="_blank" href="#">Ruby</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" target="_blank" title="C++零基础入门 热门编程语言 二级考试必备" class="clearfix">
<img src="images/5a405a7700010f1c06000338.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">C++零基础入门 热门编程语言 二级考试必备</h3>
<div class="course-card-price l">
￥428.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
3步／34课
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>385
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="Java并发编程与高并发解决方案" class="clearfix">
<img src="images/5aaa55850001a3ef10800600.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">Java并发编程与高并发解决方案</h3>
<div class="course-card-price l">
￥299.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>2001
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="全网最热Python3入门+进阶 更快上手实际开发" class="clearfix">
<img src="images/59b8a486000107fb05400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">全网最热Python3入门+进阶 更快上手实际开发</h3>
<div class="course-card-price l">
￥366.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>5138
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="最火Python3 玩转实用小工具" class="clearfix">
<img src="images/5b3307f50001859e05400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">最火Python3 玩转实用小工具</h3>
<div class="course-card-price l">
￥166.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>87
</div>
</div>
</a>
</div>
</div>
</div>
<div class="submenu d hide" style="display: none;">
<div class="innerBox clearfix">
<div class="subinnerBox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">移动开发</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">Android</a>
<a target="_blank" href="#">iOS</a>
<a target="_blank" href="#">React native</a>
<a target="_blank" href="#">WEEX</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" target="_blank" title="零基础入门Android语法与界面" class="clearfix">
<img src="images/585243df00014f2406000338.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">零基础入门Android语法与界面</h3>
<div class="course-card-price l">
￥499.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
5步／43课
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>1984
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="新浪微博资深大牛全方位剖析 iOS 高级面试" class="clearfix">
<img src="images/5abe148300014c3305400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">新浪微博资深大牛全方位剖析 iOS 高级面试</h3>
<div class="course-card-price l">
￥366.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
高级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>376
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="BAT大咖助力 全面升级Android面试" class="clearfix">
<img src="images/5909a1250001197e05400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">BAT大咖助力 全面升级Android面试</h3>
<div class="course-card-price l">
￥288.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>3013
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="Android通用框架设计与完整电商APP开发" class="clearfix">
<img src="images/5959a60f0001cfd305400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">Android通用框架设计与完整电商APP开发</h3>
<div class="course-card-price l">
￥348.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
高级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>1374
</div>
</div>
</a>
</div>
</div>
</div>
<div class="submenu e hide" style="display: none;">
<div class="innerBox clearfix">
<div class="subinnerBox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">算法&数学</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">算法与数据结构</a>
<a target="_blank" href="#">数学</a>
</div>
</div>
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">云计算&大数据</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">大数据</a>
<a target="_blank" href="#">Hadoop</a>
<a target="_blank" href="#">Spark</a>
<a target="_blank" href="#">Hbase</a>
<a target="_blank" href="#">Storm</a>
<a target="_blank" href="#">云计算</a>
<a target="_blank" href="#">AWS</a>
<a target="_blank" href="#">Docker</a>
<a target="_blank" href="#">Kubernetes</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" target="_blank" title="以慕课网日志分析为例 进入大数据 Spark SQL 的世界" class="clearfix">
<img src="images/5940e2a20001045a05400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">以慕课网日志分析为例 进入大数据 Spark SQL 的世界</h3>
<div class="course-card-price l">
￥366.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>973
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="轻松愉快之玩转SpringData" class="clearfix">
<img src="images/58e6081c00012ec206000338-240-135.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">轻松愉快之玩转SpringData</h3>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>22935
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="系统学习Docker 践行DevOps理念" class="clearfix">
<img src="images/5a9614850001bc3405400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">系统学习Docker 践行DevOps理念</h3>
<div class="course-card-price l">
￥299.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>695
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="HBase入门" class="clearfix">
<img src="images/598986ae0001f07706000338-240-135.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">HBase入门</h3>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>16656
</div>
</div>
</a>
</div>
</div>
</div>
<div class="submenu f hide" style="display: none;">
<div class="innerBox clearfix">
<div class="subinnerBox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">运维&测试</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">运维</a>
<a target="_blank" href="#">自动化运维</a>
<a target="_blank" href="#">Linux</a>
<a target="_blank" href="#">测试</a>
<a target="_blank" href="#">功能测试</a>
<a target="_blank" href="#">性能测试</a>
<a target="_blank" href="#">自动化测试</a>
<a target="_blank" href="#">接口测试</a>
<a target="_blank" href="#">安全测试</a>
</div>
</div>
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">数据库</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">MySQL</a>
<a target="_blank" href="#">Redis</a>
<a target="_blank" href="#">MongoDB</a>
<a target="_blank" href="#">Oracle</a>
<a target="_blank" href="#">SQL Server</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" target="_blank" title="阿里大牛亲授 阿里云主机(ECS)与CentOS7实战" class="clearfix">
<img src="images/5b0b60480001b95e06000338.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">阿里大牛亲授 阿里云主机(ECS)与CentOS7实战</h3>
<div class="course-card-price l">
￥288.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>89
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="使用java构建和维护接口自动化测试框架" class="clearfix">
<img src="images/593a3b0f0001383606000338-240-135.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">使用java构建和维护接口自动化测试框架</h3>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>18429
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="Web自动化测试 Selenium基础到企业应用" class="clearfix">
<img src="images/5965c159000184e305400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">Web自动化测试 Selenium基础到企业应用</h3>
<div class="course-card-price l">
￥266.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>862
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="Linux系统管理" class="clearfix">
<img src="images/5697799a0001e99006000338-240-135.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">Linux系统管理</h3>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>60326
</div>
</div>
</a>
</div>
</div>
</div>
<div class="submenu g hide" style="display: none;">
<div class="innerBox clearfix">
<div class="subinnerBox">
<div class="cates-box">
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">UI设计</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">模型制作</a>
<a target="_blank" href="#">动效动画</a>
<a target="_blank" href="#">设计基础</a>
<a target="_blank" href="#">设计工具</a>
<a target="_blank" href="#">APPUI设计</a>
<a target="_blank" href="#">产品交互</a>
</div>
</div>
<div class="fe-base-box clearfix">
<div class="banner-line">
<span class="bold mr10 l small-title">游戏</span>
</div>
<div class="tag-box l">
<a target="_blank" href="#">Unity 3D</a>
<a target="_blank" href="#">Cocos2d-x</a>
</div>
</div>
</div>
</div>
</div>
<div class="recomment-box">
<div class="l banner-course-card">
<a href="#" target="_blank" title="移动端App UI 设计入门与实战" class="clearfix">
<img src="images/5a123d7e00011fa705400300.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">移动端App UI 设计入门与实战</h3>
<div class="course-card-price l">
￥199.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>321
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="高薪设计师必修课 AE移动UI动效设计从入门到实战" class="clearfix">
<img src="images/5aa9d2c1000104d510800600.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">高薪设计师必修课 AE移动UI动效设计从入门到实战</h3>
<div class="course-card-price l">
￥199.00
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
中级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>83
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="Axure入门初体验" class="clearfix">
<img src="images/587db7af00016b7e06000338-240-135.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">Axure入门初体验</h3>
<div class="course-card-info l">
入门
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>44228
</div>
</div>
</a>
</div>
<div class="l banner-course-card">
<a href="#" target="_blank" title="前端工程师必备的PS技能——切图篇" class="clearfix">
<img src="images/578741d3000151e806000338-240-135.jpg" class="l">
<div class="l course-card">
<h3 class="course-card-name">前端工程师必备的PS技能——切图篇</h3>
<div class="course-card-info l">
初级
</div>
<div class="course-card-dot l">
<i class="imv2-dot_samll"></i>
</div>
<div class="course-card-info l">
<i class="icon-set_sns"></i>228410
</div>
</div>
</a>
</div>
</div>
</div>
<div class="menuContent">
<div class="item">
<a href="#">
<span class="group">前沿 / 区块链 / 人工智能</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">前端 / 小程序 / JS</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">后端 / JAVA / Python</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">移动 / Android / iOS</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">云计算 / 大数据 / 容器</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">运维 / 测试 / 数据库</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
<div class="item">
<a href="#">
<span class="group">UI设计 / 3D动画 / 游戏</span>
<i class="imv2-arrow1_r"></i>
</a>
</div>
</div>
<script type="text/javascript">
jQuery(".g-banner").slide({
titCell:".item", //鼠标触发对象
targetCell:".submenu", //titCell里面包含的要显示/消失的对象
delayTime:100, //效果时间
defaultPlay:false,
triggerTime:0, //鼠标延迟触发时间（默认150）
returnDefault:true //鼠标移走后返回默认状态，例如默认频道是“预告片”，鼠标移走后会返回“预告片”（默认false）
});
</script>
<div class="g-banner-content">
<div class="g-banner-box">
<div class="banner-slide">
<ul>
<li><a target="_blank" href="#"><img src="images/5b506931000179e909360316.jpg"></a></li>
<li><a target="_blank" href="#"><img src="images/5b4c0686000136fc18720632.jpg"></a></li>
<li><a target="_blank" href="#"><img src="images/5b55372d000173c909360316.jpg"></a></li>
<li><a target="_blank" href="#"><img src="images/5b191458000144b309360316.jpg"></a></li>
<li><a target="_blank" href="#"><img src="images/5b3c2d6e0001241b09360316.jpg"></a></li>
<li><a target="_blank" href="#"><img src="images/5af41f3d0001db8509360316.jpg"></a></li>
</ul>
</div>
<div class="banner-dots">
<ul class="dian">
<li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class=""></li><li class="active"></li>
</ul>
</div>
<a href="javascript:void(0)" class="banner-anchor prev icon-left2"></a>
<a href="javascript:void(0)" class="banner-anchor next icon-right2"></a>
<div class="cb"></div>
</div>
<script type="text/javascript">
jQuery(".g-banner-box").slide({
titCell:".banner-dots ul li",
mainCell:".banner-slide ul",
autoPlay:true,
delayTime:0,
});
jQuery(".boxbg").slide({
mainCell:".bannerbg ul",
autoPlay:true,
delayTime:4000,
});
</script>
<div class="path-banner clearfix">
<a href="#" target="_blank">
<i class="i-web"></i>
<p class="tit">Web前端攻城狮</p>
<p class="desc">互联网时代最火爆的技术</p>
</a>
<a href="#" target="_blank">
<i class="i-java"></i>
<p class="tit">Java攻城狮</p>
<p class="desc">综合就业排名第一</p>
</a>
<a href="#" target="_blank">
<i class="i-android"></i>
<p class="tit">Android攻城狮</p>
<p class="desc">移动设备市场份额第一</p>
</a>
<a href="#" target="_blank">
<i class="i-php"></i>
<p class="tit">PHP攻城狮</p>
<p class="desc">世界上最好的语言：）</p>
</a>
<a href="#" target="_blank">
<i class="i-ios"></i>
<p class="tit">iOS攻城狮</p>
<p class="desc">可能是全球最好用的系统</p>
</a>
</div>
</div>
</div>
</div>
文件目录
本资源来自：代码 » 导航菜单 » jQuery网络技术在线学习网站分类导航图片布局
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jQuery手机侧边滑动导航菜单代码
« 上一篇
2018年07月29日
jQuery在线教育网页顶部下拉分类导航菜单代码
下一篇 »
2018年07月19日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
