技术标签： 大前端 css html5 前端 bootstrap javascript
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>融职教育</title>
<!-- 移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 引入bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!--引入CSS Swiper插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<!--引入手风琴CSS-->
<link rel="stylesheet" href="css/style.css">
<!--引入Dplayer CSS-->
<link rel="stylesheet" href="css/DPlayer.min.css">
</head>
<body>
<!--顶部导肮开始-->
<nav>
<div class="container">
<div class="row">
<div class="col shadow-sm">
<nav class="navbar p-1 navbar-expand-lg navbar-light bg-white">
<a class="navbar-brand navbar-toggler border-0" href="#">
<img src="img/logo.png" class="img-fluid" style="max-width: 90px" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link"
style="padding-left: 25px; background: url('img/hl.png') no-repeat 0 center;"
href="#">融职教育<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link"
style="padding-left: 25px; background: url('img/llt.png') no-repeat 0 center;"
href="#">学习园地</a>
</li>
<li class="nav-item">
<a class="nav-link"
style="padding-left: 25px; background: url('img/zzt.png') no-repeat 0 center;"
href="#">智校云</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-expanded="false">
培养模式
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-expanded="false">
培养方向
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">
Web全栈就业班 <i class="mark text-danger">￥9800</i> <s>￥19800</s>
</a>
</li>
</ul>
<div class="form-inline my-2 my-lg-0 nav-item dropdown">
<a style="padding-left: 25px; background: url('img/wx.jpg') no-repeat 0 center;"
class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-expanded="false">
咨询微信
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</nav>
<!--顶部导肮结束-->
<!--头部开始-->
<header class="mt-2 d-none d-lg-block">
<div class="container">
<div class="row py-4 align-items-center">
<div class="col">
<a href="#"><img src="img/logo.png" alt="" style="max-width: 120px;height: auto;"></a>
</div>
<div class="col pt-3">
<blockquote class="blockquote text-center">
<p>在工作中学习，在学习中工作</p>
</blockquote>
</div>
<div class="col">
<div class="text-right pt-1">
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
学习猿地
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown"
aria-expanded="false">
智校云
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<blockquote class="mt-4 mb-2 blockquote text-center d-lg-none">
<p>在工作中学习，在学习中工作</p>
</blockquote>
<!--头部结束-->
<!--轮播图移动设备开始-->
<section class="mt-2 d-lg-none">
<div class="container">
<div class="row">
<div class="col">
<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="4"></li>
<li data-target="#carouselExampleCaptions" data-slide-to="5"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/player/001.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Web全栈就业班</h5>
<p>最牛的Web全栈就业班，前一百学费￥9800</p>
</div>
</div>
<div class="carousel-item">
<img src="img/player/2.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Web全栈就业班</h5>
<p>最牛的Web全栈就业班，前一百学费￥9800</p>
</div>
</div>
<div class="carousel-item">
<img src="img/player/3.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Web全栈就业班</h5>
<p>最牛的Web全栈就业班，前一百学费￥9800</p>
</div>
</div>
<div class="carousel-item">
<img src="img/player/4.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Web全栈就业班</h5>
<p>最牛的Web全栈就业班，前一百学费￥9800</p>
</div>
</div>
<div class="carousel-item">
<img src="img/player/5.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Web全栈就业班</h5>
<p>最牛的Web全栈就业班，前一百学费￥9800</p>
</div>
</div>
<div class="carousel-item">
<img src="img/player/6.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Web全栈就业班</h5>
<p>最牛的Web全栈就业班，前一百学费￥9800</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
</section>
<!--轮播图移动设备结束-->
<!--轮播图PC开始-->
<style>
.z-Sel {
background: transparent url("img/sanj.png") no-repeat 4px center;
}
</style>
<section id="player" class="mt-2 d-none d-lg-block">
<div class="container">
<div class="row">
<div class="col">
<div id="Carousel" class="carousel">
<a class="carousel-item active" href="#" data-color="#6a296e" target="_blank"><img
src="img/player/001.jpg" class="d-block w-100" alt=""></a>
<a class="carousel-item" href="#" data-color="#5600d3" target="_blank"><img src="img/player/2.jpg"
class="d-block w-100"
alt=""></a>
<a class="carousel-item" href="#" data-color="#0b0f3e" target="_blank"><img src="img/player/3.jpg"
class="d-block w-100"
alt=""></a>
<a class="carousel-item" href="#" data-color="#100e64" target="_blank"><img src="img/player/4.jpg"
class="d-block w-100"
alt=""></a>
<a class="carousel-item" href="#" data-color="#4477e2" target="_blank"><img src="img/player/5.jpg"
class="d-block w-100"
alt=""></a>
<a class="carousel-item" href="#" data-color="#110e45" target="_blank"><img src="img/player/6.jpg"
class="d-block w-100"
alt=""></a>
</div>
<div class="card w-25 mt-4 border-0 ml-auto shadow py-3"
style="font-size: 15px; background: rgba(0,0,0,0.4); line-height: 15px;">
<div id="rlist" class="list-group">
<a href="#"
class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全栈就业班￥9800</a>
<a href="#"
class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全栈就业班￥9800</a>
<a href="#"
class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全栈就业班￥9800</a>
<a href="#"
class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全栈就业班￥9800</a>
<a href="#"
class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全栈就业班￥9800</a>
<a href="#"
class="list-group-item text-truncate border-0 bg-transparent text-white-50 text-decoration-none">最牛的Web全栈就业班￥9800</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--轮播图PC结束-->
<!--你的收获开始-->
<style>
.contain .span span {
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3;
-ms-transition: 0.3s;
}
.contain .col-4 {
display: block;
position: relative;
}
.contain i {
position: absolute;
width: 100%;
height: 112px;
border-radius: 5px;
left: 0;
top: 3px;
background: url(img/fuceng.png) no-repeat center top;
opacity: 0;
}
.contain .span {
position: absolute;
width: 155px;
height: 90px;
left: 16px;
top: 17px;
overflow: hidden;
}
.contain .span span {
display: inline-block;
background: #ff8e3b;
position: absolute;
width: 100%;
}
.contain .span span:nth-child(1) {
width: 2px;
height: 0px;
bottom: 0;
left: 0;
}
.contain .span span:nth-child(2) {
width: 0px;
height: 2px;
top: 0;
left: 0;
}
.contain .span span:nth-child(3) {
width: 2px;
height: 0px;
top: 0;
right: 0;
}
.contain .span span:nth-child(4) {
width: 0px;
height: 2px;
bottom: 0;
right: 0;
}
.contain a:hover i {
opacity: 1;
}
.contain a:hover .span span:nth-child(1) {
height: 90px;
}
.contain a:hover .span span:nth-child(2) {
width: 155px;
}
.contain a:hover .span span:nth-child(3) {
height: 90px;
}
.contain a:hover .span span:nth-child(4) {
width: 155px;
}
.contain1 a {
display: block;
position: relative;
}
.contain1 i {
position: absolute;
width: 120px;
height: 120px;
border: 2px solid #ff8e3b;
border-radius: 50%;
left: 0;
top: 0;
background: url(img/fuceng1.png) no-repeat center top;
opacity: 0;
}
.contain1 a:hover i {
opacity: 1;
}
h4.th4 {
text-shadow: 2px 2px 2px #000000
}
</style>
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">你的收获</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<div class="row contain">
<div class="col-4 col-md-4 col-lg p-1" style="height: 120px; line-height: 120px;">
<div class="text-center w-100 h-100 rounded" style="background: url('img/h1.jpg')">
<a class="d-inline-block text-white text-decoration-none" href="#">
<h4 class="th4">实习的岗位</h4>
<i class="d-none d-lg-block"></i>
<div class="span d-none d-lg-block">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</div>
<div class="col-4 col-md-4 col-lg p-1" style="height: 120px; line-height: 120px;">
<div class="text-center w-100 h-100 rounded" style="background: url('img/h2.jpg')">
<a class="d-inline-block text-white text-decoration-none" href="#">
<h4 class="th4">工作的经验</h4>
<i class="d-none d-lg-block"></i>
<div class="span d-none d-lg-block">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</div>
<div class="col-4 col-md-4 col-lg p-1" style="height: 120px; line-height: 120px;">
<div class="text-center w-100 h-100 rounded" style="background: url('img/h3.jpg')">
<a class="d-inline-block text-white text-decoration-none" href="#">
<h4 class="th4">全栈的技能</h4>
<i class="d-none d-lg-block"></i>
<div class="span d-none d-lg-block">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</div>
<div class="col-4 col-md-4 col-lg p-1" style="height: 120px; line-height: 120px;">
<div class="text-center w-100 h-100 rounded" style="background: url('img/h4.jpg')">
<a class="d-inline-block text-white text-decoration-none" href="#">
<h4 class="th4">商业的项目</h4>
<i class="d-none d-lg-block"></i>
<div class="span d-none d-lg-block">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</div>
<div class="col-4 col-md-4 col-lg p-1" style="height: 120px; line-height: 120px;">
<div class="text-center w-100 h-100 rounded" style="background: url('img/h5.jpg')">
<a class="d-inline-block text-white text-decoration-none" href="#">
<h4 class="th4">人脉的积累</h4>
<i class="d-none d-lg-block"></i>
<div class="span d-none d-lg-block">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</div>
<div class="col-4 col-md-4 col-lg p-1" style="height: 120px; line-height: 120px;">
<div class="text-center w-100 h-100 rounded" style="background: url('img/h6.jpg')">
<a class="d-inline-block text-white text-decoration-none" href="#">
<h4 class="th4">期望的工作</h4>
<i class="d-none d-lg-block"></i>
<div class="span d-none d-lg-block">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<!--你的收获结束-->
<!--关注我们开始-->
<style>
.film_focus .film_focus_imgs_wrap {
width: 100%;
height: 349px;
background: url(img/T16WJqXaXeXXXXXXXX-32-32.gif) no-repeat center center;
}
.film_focus ul.film_focus_imgs {
width: 100%;
height: 9999em;
position: absolute;
left: 0;
top: 0;
}
.film_focus {
width: 100%;
height: 349px;
overflow: hidden;
position: relative;
}
.film_focus ul {
padding: 0px;
margin: 0px;
list-style: none;
}
.film_focus ul.film_focus_imgs li {
height: 349px;
overflow: hidden;
}
.film_focus .film_focus_desc h3 {
height: 45px;
line-height: 45px;
overflow: hidden;
position: absolute;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
color: #fff;
width: 100%;
padding-left: 24px;
z-index: 99;
font-size: 16px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#7F000000', endColorstr='#7F000000');
}
.film_focus ul.film_focus_nav {
width: 15%;
height: 349px;
background: #424242;
position: absolute;
right: 0px;
top: 0;
z-index: 100;
}
.film_focus ul.film_focus_nav li {
height: 85px;
background: url(img/T1WiB5Xf0EXXXXXXXX-1-75.png) repeat-x;
margin: 1px 1px 1px 0;
padding: 5px 0 0 5px;
position: relative;
}
.film_focus ul.film_focus_nav li.cur {
background: url(img/T19yB9Xm0BXXXXXXXX-296-79.png) no-repeat 0 2px;
width: 130px;
left: -19px;
z-index: 100;
}
.film_focus ul.film_focus_nav li img {
position: absolute;
left: 5px;
top: 5px;
}
.film_focus ul.film_focus_nav li.cur img {
left: 19px;
width: 110px;
height: 79px;
margin-top: -1px;
}
.film_focus ul.film_focus_nav li h4 {
color: #fff;
}
.film_focus ul.film_focus_nav li p {
color: #B9B9B9;
line-height: 1.8em;
}
.knowcon_right {
width: 100%;
height: 349px;
border-top: 2px #ff8e3b solid;
background: #FDFDFD;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.pulsing:before, .pulsing:after {
content: "";
position: absolute;
}
.main-content {
display: grid;
width: 100%;
}
@media (max-width: 767px) {
.w-85 {
width: 100% !important;
}
}
@media (min-width: 768px) {
.w-85 {
width: 85% !important;
}
}
</style>
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">关注我们</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-8">
<div class="film_focus">
<div class="film_focus_imgs_wrap main-content">
<ul class="film_focus_imgs w-85">
<li>
<div id="dplayer1" style="width: 100%; height: 349px; "></div>
</li>
<li>
<div id="dplayer2" style="width: 100%; height: 349px; "></div>
</li>
<li>
<div id="dplayer3" style="width: 100%; height: 349px; "></div>
</li>
<li>
<div id="dplayer4" style="width: 100%; height: 349px; "></div>
</li>
</ul>
</div>
<div class="film_focus_desc d-none d-md-block">
<h3>Web全栈开发就业班10大核心优势</h3>
<ul id="film" class="film_focus_nav">
<li class="cur">
<img width="100" height="79" src="img/player/canpx.png" alt="Web全栈开发就业班10大核心优势"/>
</li>
<li>
<img width="100" height="79" src="img/player/zuobx.png" alt="融职IT教育首创“坐班”学习模式"/>
</li>
<li>
<img width="100" height="79" src="img/player/jiaofx.png" alt="EduWork只为培养可以交付的程序员"/>
</li>
<li>
<img width="100" height="79" src="img/player/jrsx.png" alt="浸入【智校云】项目组，在工作中学习"/>
</li>
</ul>
</div>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card w-100 border-0 shadow bg-light" style="height: 349px;">
<div class="card-header d-flex bg-white border-top border-warning border-bottom-0">
<h5 class="d-inline-block">最新动态<small class="ml-2 text-muted">EduWork</small></h5>
<div class="d-inline-block ml-auto">
<a class="text-black-50" style="font-size: 14px;" href="#">更多>></a>
</div>
</div>
<ul class="list-group" style="line-height: 28px; font-size: 15px;">
<li class="list-group-item py-1 border-0">
<a class="text-dark card-link text-truncate" href="#">
<span class="badge badge-warning">1</span>
Web全栈就业班5个月面授加一个月面授
</a>
</li>
<li class="list-group-item py-1 border-0">
<a class="text-dark card-link text-truncate" href="#">
<span class="badge badge-warning">2</span>
120天的教学安排，就业培养可交付人才
</a>
</li>
<li class="list-group-item py-1 border-0">
<a class="text-dark card-link text-truncate" href="#">
<span class="badge badge-warning">3</span>
在EduWork成长后的简历大概会是这样的
</a>
</li>
<li class="list-group-item py-1 border-0">
<a class="text-dark card-link text-truncate" href="#">
<span class="badge badge-dark">4</span>
融职(eduwork)开创IT培训新模式了解我们
</a>
</li>
<li class="list-group-item py-1 border-0">
<a class="text-dark card-link text-truncate" href="#">
<span class="badge badge-dark">5</span>
2020年Web全栈开发工程师课程要这么设计
</a>
</li>
<li class="list-group-item py-1 border-0">
<a class="text-dark card-link text-truncate" href="#">
<span class="badge badge-dark">6</span>
【智校云】教育信息化产品升级到4.0版本
</a>
</li>
<li class="list-group-item py-1 border-0">
<a class="text-dark card-link text-truncate" href="#">
<span class="badge badge-dark">7</span>
【学习猿地】成就自己只需一套精品
</a>
</li>
<li class="list-group-item py-1 border-0">
<a class="text-dark card-link text-truncate" href="#">
<span class="badge badge-dark">8</span>
【融职】在工作中学习，在学习中工作
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--关注我们结束-->
<!--成长平台开始-->
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">成长平台</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-2"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col-2"></div>
<div class="col-1"></div>
</div>
<div class="row">
<div class="col"></div>
</div>
</div>
</section>
<!--成长平台结束-->
<!--培养模式开始-->
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">培养模式</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<div class="row">
<div class="col-1"></div>
<div class="col-3"></div>
<div class="col-4"></div>
<div class="col-3"></div>
<div class="col-1"></div>
</div>
</div>
</section>
<!--培养模式结束-->
<!--面授培训开始-->
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">面授培训</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-1"></div>
<div class="col-3"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-1"></div>
<div class="col-3"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-1"></div>
<div class="col-3"></div>
<div class="col-4"></div>
</div>
<div class="row">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-1"></div>
<div class="col-3"></div>
<div class="col-4"></div>
</div>
</div>
</section>
<!--面授培训结束-->
<!--实习目标开始-->
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">实习目标</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6"></div>
<div class="col-sm-12 col-md-6"></div>
<div class="col-sm-12 col-md-6"></div>
<div class="col-sm-12 col-md-6"></div>
</div>
</div>
</section>
<!--实习目标结束-->
<!--你的总监开始-->
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">你的总监</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<div class="row d-none d-lg-block">
<div class="col">
<div class="card w-100 text-white border-0" style="margin-top: 200px;">
<img src="img/cwbg.png" class="card-img shadow-lg" alt="">
<div class="card-img-overlay d-flex flex-row mt-5">
<div class="w-25 p-2" style="margin-top: -235px">
<img id="teac_pic" src="img/phpjs4c.png" class="img-fluid" alt="">
</div>
<div class="w-75 p-2" style="margin-top: -50px;">
<div class="card-title"><h4 id="teac_name">高 洛 峰</h4></div>
<div class="card-subtitle"><h6 id="teac_title">智校云创始人 & 系统架构师 & 畅销书《细说PHP》作者</h6></div>
<div class="card-text" id="teac_desc">
拥有十五年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务，
具有扎实的技术功底。国内资深技术讲师，腾讯网络人气名人讲师，累计授课长达上万课时， 培养了近百名IT名师，
培训数千名学员成功走向IT岗位。熟悉掌握当前应用的各种主流编程语言， 其中，对Web系统开发深有研究，
近年来致力于推广开源的PHP技术。
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-12 col-sm-6 col-lg-3 teacher" data-i="1">
<div class="card text-center">
<div class="card-img">
<div id="dplayer11"></div>
</div>
<div class="card-body" style="font-size: 14px;">
EduWork教学总监&智校云创始人<br>畅销书《细说PHP》作者
</div>
<div class="card-footer">
<h6><strong>高 洛 峰</strong></h6>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 teacher" data-i="2">
<div class="card text-center">
<div class="card-img">
<div id="dplayer22"></div>
</div>
<div class="card-body" style="font-size: 14px;">
智校云产品经理<br>EduWork高级技术讲师
</div>
<div class="card-footer">
<h6><strong>赵 帅</strong></h6>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 teacher" data-i="3">
<div class="card text-center">
<div class="card-img">
<div id="dplayer33"></div>
</div>
<div class="card-body" style="font-size: 14px;">
学习猿地技术总监<br>EduWork高级技术讲师
</div>
<div class="card-footer">
<h6><strong>徐 枭 雄</strong></h6>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-lg-3 teacher" data-i="4">
<div class="card text-center">
<div class="card-img">
<div id="dplayer44"></div>
</div>
<div class="card-body" style="font-size: 14px;">
智校云CTO <br> EduWork高级技术讲师
</div>
<div class="card-footer">
<h6><strong>孙 健 魁</strong></h6>
</div>
</div>
</div>
</div>
</div>
</section>
<!--你的总监结束-->
<!--对标培训开始-->
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">对标培训</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col-2"></div>
<div class="col"></div>
</div>
</div>
</section>
<!--对标培训结束-->
<!--工作环境开始-->
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<div>
<h4 class="d-inline-block">工作环境</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术，为成长积蓄力量</small>
</div>
</div>
</div>
<!--PC端-->
<div class="row d-none d-lg-block">
<div class="col">
<div class="wrap shadow-lg mt-0">
<div class="pic1 pic">
<div class="pic_num1 pic_num"></div>
</div>
<div class="pic2 pic">
<div class="pic_num2 pic_num"></div>
</div>
<div class="pic3 pic">
<div class="pic_num3 pic_num"></div>
</div>
<div class="pic4 pic">
<div class="pic_num4 pic_num"></div>
</div>
<div class="pic5 pic">
<div class="pic_num5 pic_num"></div>
</div>
<div class="pic6 pic">
<div class="pic_num6 pic_num"></div>
</div>
</div>
</div>
</div>
<!--移动端-->
<div class="row d-lg-none">
<div class="col">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="img/t1.jpg" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="img/t2.jpg" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="img/t3.jpg" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="img/t4.jpg" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="img/t5.jpg" class="img-fluid" alt=""></div>
<div class="swiper-slide"><img src="img/t6.jpg" class="img-fluid" alt=""></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--工作环境结束-->
<!--页脚开始-->
<footer class="mt-4 bg-dark text-light small">
<div class="container">
<div class="row pt-3 pb-5">
<div class="col-sm-12 col-md-10">
<div class="pt-4">
<p class="mb-2">EduWork 是智校云旗下专注程序员培养的实习平台。</p>
<ul class="nav">
<li class="nav-item"><a class="nav-link text-white pl-0" href="#">关于我们</a></li>
<li class="nav-item"><a class="nav-link text-white pl-0" href="#">关于我们</a></li>
<li class="nav-item"><a class="nav-link text-white pl-0" href="#">关于我们</a></li>
<li class="nav-item"><a class="nav-link text-white pl-0" href="#">关于我们</a></li>
<li class="nav-item"><a class="nav-link text-white pl-0" href="#">关于我们</a></li>
</ul>
<div class="text-muted">
<i>2018-2020</i> 北京智校云网络科技有限公司 <span class="mx-3">版权所有</span> <a class="text-muted" href="#">京ICP备19057319号</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-2 text-md-right text-center p-0">
<figure class="figure mt-3">
<img src="img/qrcode.png" class="figure-img img-thumbnail" style="max-width: 100px;" alt="">
<figcaption class="figure-caption text-center text-light">关注我们</figcaption>
</figure>
</div>
</div>
</div>
</footer>
<!--页脚结束-->
<!--先引入jQuery 再引入popper.js 最后在引入bootstrap.js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<!--轮播图特效-->
<script>
$(function () {
var ptimer = null;
var i = 0;//指定一个序号
var sum = $("#Carousel a").length;
//开启轮播
function startCarousel() {
var pbgcolor = $("#Carousel>a").eq(i).attr("data-color");
$("#Carousel>a").eq(i).fadeIn().siblings().fadeOut(900, function () {
$("#player").css("backgroundColor", pbgcolor);
});
$("#rlist>a").eq(i).addClass("z-Sel text-white").removeClass("text-white-50").siblings().addClass("text-white-50").removeClass("z-Sel text-white");
}
//
$("#Carousel").hover(function () {
clearInterval(ptimer);
}, function () {
iCarousel();
});
//自动播放函数
function iCarousel() {
clearInterval(ptimer);
ptimer = setInterval(function () {
i++;
if (i == sum) {
i = 0;
}
startCarousel();
}, 5000);
}
$("#rlist>a").eq(0).addClass("z-Sel text-white").removeClass("text-white-50");
var pbgcolor = $("#Carousel>a").eq(0).attr("data-color");
$("#player").css("backgroundColor", pbgcolor);
//开始轮播
iCarousel();
var thimer = null;
$("#rlist>a").mouseover(function () {
$(this).addClass("text-danger");
var obj = $(this);
thimer = setTimeout(function () {
clearInterval(ptimer);
i = obj.index();
startCarousel();
}, 500);
}).mouseout(function () {
$(this).removeClass("text-danger");
clearInterval(thimer);
iCarousel();
})
})
</script>
<!--轮播图特效结束-->
<!--引入Swiper 的 Js特效-->
<script src="js/swiper.min.js"></script>
<script>
$(function () {
var swiper = new Swiper('.swiper-container');
})
</script>
<!--引入Swiper 的 Js特效结束-->
<!--引入手风琴js特效-->
<script src="js/script.js"></script>
<!--关注我们-->
<!--引入Dlayer的JS-->
<script src="js/DPlayer.min.js"></script>
<script>
var dp1;
var dp2;
var dp3;
var dp4;
$(function () {
dp1 = new DPlayer(
{
container: document.getElementById('dplayer1'),
video: {
url: '//cdn.eduwork.cn/mp4/gaoluofeng.mp4',
pic: 'img/eduglf.jpg',
mutex: true,
},
danmaku: {
id: '121219381ke',
api: 'onedm.js?',
},
});
dp2 = new DPlayer(
{
container: document.getElementById('dplayer2'),
video: {
url: '//cdn.eduwork.cn/mp4/zhaoshuai.mp4',
pic: 'img/eduzs.jpg',
mutex: true,
},
danmaku: {
id: '1212193ds81ewk',
api: 'twodm.js?',
},
});
dp3 = new DPlayer(
{
container: document.getElementById('dplayer3'),
video: {
url: '//cdn.eduwork.cn/mp4/xuxiaoxiong.mp4',
pic: 'img/xxx.png',
mutex: true,
},
danmaku: {
id: '121219381ewk',
api: 'threedm.js?',
},
});
dp4 = new DPlayer(
{
container: document.getElementById('dplayer4'),
video: {
url: '//cdn.eduwork.cn/mp4/sunjiankui.mp4',
pic: 'img/sunjk.png',
mutex: true,
},
danmaku: {
id: '12132219381k',
api: 'fourdm.js?',
},
});
});
</script>
<script src="js/script.js"></script>
<script type="text/javascript">
(function (A) {
A.fn.th_video_focus = function (E) {
var G = {
actClass: "cur",
navContainerClass: ".focus_pic_preview",
focusContainerClass: ".focus_pic",
animTime: 600,
delayTime: 5000
};
if (E) {
A.extend(G, E)
}
var C = G.actClass, D = G.navContainerClass, B = G.focusContainerClass, F = G.animTime, H = G.delayTime,
I = null;
return this.each(function () {
var O = A(this), M = A(D + " li", O), P = A(B + " li", O), L = M.length, K = O.height();
function N(R) {
var V = K * R * -1;
var U = A(B + " li", O), W = null, T = null;
for (var S = 0; S <= R; S++) {
W = U.eq(S);
T = W.find('script[type="text/templ"]');
if (T.length > 0) {
W.html(T.html())
}
}
A(B, O).stop().animate({
top: V}, F, function () {
var Y = O.find("h3"), X = Y.height();
Y.height(0).html(A(".film_focus_nav li").eq(R).find("img").attr("alt")).animate({
height: X}, 600)
});
A(D + " li").eq(R).addClass(C).siblings().removeClass(C);
dp1.pause();
dp2.pause();
dp3.pause();
dp4.pause();
}
function Q() {
if (I) {
clearInterval(I)
}
I = setInterval(function () {
var R = A(D + " li." + C).index();
N((R + 1) % L)
}, H)
}
dp1.on("play", function () {
if (I) {
clearInterval(I);
}
});
dp2.on("play", function () {
if (I) {
clearInterval(I);
}
});
dp3.on("play", function () {
if (I) {
clearInterval(I);
}
});
dp4.on("play", function () {
if (I) {
clearInterval(I);
}
});
O.hover(function () {
if (I) {
clearInterval(I)
}
}, function () {
if (dp1.video.paused && dp2.video.paused && dp3.video.paused && dp4.video.paused) {
Q()
}
});
var J = null;
M.hover(function () {
var R = A(this).index();
if (I) {
clearInterval(I)
}
J = setTimeout(function () {
N(R)
}, 300)
}, function () {
if (J) {
clearTimeout(J)
}
Q()
}).click(function (T) {
var R = A(this).index(), S = P.eq(R).find("a");
if (document.uniqueID || window.opera) {
S[0].click();
T.stopPropagation();
T.preventDefault()
}
});
Q();
})
}
})(jQuery);
$(function () {
//第二个焦点图
$(".film_focus").th_video_focus({
navContainerClass: ".film_focus_nav",
focusContainerClass: ".film_focus_imgs",
delayTime: 3000
});
});
</script>
<!--引入Dlayer的JS结束-->
<!--你的总监开始-->
<script>
$(function () {
$('.teacher').hover(function () {
$(this).children('.card').addClass('shadow');
var data_i = $(this).attr('data-i');
switch (data_i) {
case '1':
$('#teac_pic').attr('src', 'img/phpjs4c.png');
$('#teac_name').text('高 洛 峰');
$('#teac_title').text('EduWork教学总监&智校云创始人\n' +
'畅销书《细说PHP》作者');
$('#teac_desc').text('拥有十五年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务，' +
' 具有扎实的技术功底。国内资深技术讲师，腾讯网络人气名人讲师，累计授课长达上万课时， 培养了近百名IT名师，' +
' 培训数千名学员成功走向IT岗位。熟悉掌握当前应用的各种主流编程语言， 其中，对Web系统开发深有研究， ' +
'近年来致力于推广开源的PHP技术。');
break;
case '2':
$('#teac_pic').attr('src', 'img/eduzhaoshuai.png');
$('#teac_name').text('赵 帅');
$('#teac_title').text('智校云产品经理 & 高级开发工程师 & EduWork高级讲师');
$('#teac_desc').text('从事10余年程序开发及IT教学工作，国内知名IT培训机构联合创始人。\n' +
'全国大学生编程大赛专家组评委、任多家国内知名企业产品经理，参与腾讯旗下千万级并发量小说架构设计。\n' +
'细说系列IT丛书联合编写者。担任辽宁、吉林、青海多家大学外聘技术讲师及教学顾问参与教学大纲改革，\n' +
'自创出一套全新的IT学习方法，可让无基础学员在欢乐的气氛中快速掌握IT知识。');
break;
case '3':
$('#teac_pic').attr('src', 'img/eduxuxx.png');
$('#teac_name').text('徐 枭 雄');
$('#teac_title').text('学习猿地技术总监 & EduWork高级讲师');
$('#teac_desc').text(' 10余年的前后端软件开发和教学经验，精通后端PHP和前端技术体系，熟练使用后端PHP语言全部开发技能、数据库、云服务器，\n' +
'对前端node、微信小程序、Vue、React等有深入研究。 网红级名师，所教授的学员达到让学员百分之百满意，\n' +
'授课思路清晰，幽默风趣，擅长重难点问题的分化讲解，\n' +
'注重培养学生独立思考与解决业务需求的能力， 热衷于把最新最牛最实用的技术传递给每一位学生。');
break;
case '4':
$('#teac_pic').attr('src', 'img/edusunjk.png');
$('#teac_name').text('孙 健 魁');
$('#teac_title').text('智校云联合创始人 & CTO & 系统架构师');
$('#teac_desc').text('具有8年项目开发经验，开发过近百个商业项目，管理过超百人技术团队，\n' +
'在多家上市互联网公司做过各种复杂难度的技术支持， 带领团队解决"百万级"项目重构、\n' +
'"千万级"项目架构以及各种复杂场景业务处理与设计。\n' +
'精通所有主流Web开发语言， 对高并发软件架构有过深入研究，敢于技术高难度挑战，一直坚信能用技术解决的问题都不是问题。');
break;
}
}, function () {
$(this).children('.card').removeClass('shadow');
});
});
</script>
<script>
var dp11;
var dp22;
var dp33;
var dp44;
dp11 = new DPlayer({
container: document.getElementById('dplayer11'),
video: {
url: '//cdn.eduwork.cn/mp4/gaoluofeng.mp4',
pic: 'img/eduglf.jpg',
mutex:true, //有播放这个停止； 互斥
},
});
dp22 = new DPlayer({
container: document.getElementById('dplayer22'),
video: {
url: '//cdn.eduwork.cn/mp4/gaoluofeng.mp4',
pic: 'img/eduzs.jpg',
mutex:true, //有播放这个停止； 互斥
},
});
dp33 = new DPlayer({
container: document.getElementById('dplayer33'),
video: {
url: '//cdn.eduwork.cn/mp4/gaoluofeng.mp4',
pic: 'img/xxx.png',
mutex:true, //有播放这个停止； 互斥
},
});
dp44 = new DPlayer({
container: document.getElementById('dplayer44'),
video: {
url: '//cdn.eduwork.cn/mp4/gaoluofeng.mp4',
pic: 'img/sunjk.png',
mutex:true, //有播放这个停止； 互斥
},
});
</script>
<!--你的总监结束-->
</body>
</html>
文章浏览阅读57次。一.准备工作1.有效备份作好对ORACLE软件和数据库的物理备份.2.检查无效对象。3.确保SYSTEM的空闲空间在50M以上。4. SHARED_POOL_SIZE和JAVA_POOL_SIZE至少为150Mb。5.关闭数据库，关闭oracle进程。6.备份相关配置文件二.备份TSTZ下载...
文章浏览阅读4.4k次。Mybatis 查询报错java.sql.SQLSyntaxErrorException: ORA-00920: 无效的关系运算符当使用Mybatis-Plus的注解 @Select("select * from temp where creattime >= sysdate ") 查询数据时会报错ORA-00920: 无效的关系运算符原因是：在使用 >= 替代 >= 时，应在查询语句前添加 <script></script>例如_ora-00920: 无效的关系运算符
文章浏览阅读1.4k次。写完类继承HttpServlet后，按Ctrl+s保存文件后鼠标右键---source---Override/Implment Methods_myeclipse编写一个类继承httpservlet，重写doget和dopost方法
文章浏览阅读1.3w次，点赞4次，收藏49次。原文地址：http://www.51hei.com/mcu/4327.html一．接口LCD1602是很多单片机爱好者较早接触的字符型液晶显示器，它的主控芯片是HD44780或者其它兼容芯片。刚开始接触它的大多是单片机的初学者。由于对它的不了解，不能随心所欲地对它进行驱动。经过一段时间的学习，我对它的驱动有了一点点心得，今天把它记录在这里，以备以后查阅。与此相仿的是LCD12864液晶显示器，它是一_lcd1602rs,rw,e端接电阻作用
文章浏览阅读764次。3D旋转效果3D旋转效果_style 旋转
文章浏览阅读1.5k次。本文归纳整理vue2和vue3 对axios的封装代码，以及如何在web端操作使用cookies中存储的token来做效验之类的操作。vue2 使用的是 axios+vue-cookies组件实现vue3 使用的是 axios+js-cookies组件实现。_vue2 cookies
文章浏览阅读651次。BeautifulSoup的find和find_all是搜索html的tag，返回是整个tagfind可以连用，相当于在父tag里面find 子tag，在子tag里面find孙tagdef bs_scraper(html): soup = BeautifulSoup(html, 'html.parser') results = {} for target in t..._def bs_scraper(html): soup=beautifulsoup(html) results={}
文章浏览阅读82次。作为一个3-5年的Android工程师，我们经常会遇到这些瓶颈：1.技术视野窄长期在小型软件公司，外包公司工作，技术视野被限制的太厉害2.薪资提升难初中级Android岗位薪资上升空间有限，基本上你想拿15k以上，不会点源码层的东西是根本拿不到的3.学习资源少入门之后想要提升很难，靠自己接触的简单业务项目，去反复操练那些cv技术。博客和书本上的技术大多比较抽象并且零散，可以借鉴和指导，但是没办法复制成自己的有了这份阿里众位P7大神整理的Android开发核心知识笔记，所有的瓶颈通通都能快速打破_程序员金九银十什么意思
文章浏览阅读111次。* 1)描述这个问题。 2)启发学生：怎么变化Dijkstra算法来求解这个问题。 3)给出这个代码。 4)讨论：复杂度变了么？ * 需要讲清楚这个问题与加性权重下的Dijkstra算法的关系。 记得提醒学生，做这个题一定要将权重设为float，要改代码。 * 1)问题描述 2)基本想法：先求一条最短路，然后删除所有该路径经过的边(保证链路分离)；然后再求一条最短路。 3)问题是：这样做可能不完备..._suurballe算法
文章浏览阅读713次。分形之谢尔宾斯基(Sierpinski)三角形谢尔宾斯基三角形(英语：Sierpinski triangle)是一种分形，由波兰数学家谢尔宾斯基在1915年提出,它是一种典型的自相似集。也有的资料将其称之为谢尔宾斯基坟垛.其生成过程为:1.取一个实心的三角形。(多数使用等边三角形)2.沿三边中点的连线，将它分成四个小三角形。3.去掉中间的那一个小三角形。4.对其余三个小三角形重复1。结果演示：代码..._谢尔宾斯基三角形维度
文章浏览阅读4.6k次。前段时间遇到过因为mysql表ibd文件被删除后的应急处理，直接删除表文件是严厉禁止的操作，这里测试下几种情况下的应急恢复过程。_mysql ibd文件直接删除
文章浏览阅读1.8k次。刚买的Dell本本碰到此问题, 特别郁闷, 使用起来也很不方便. 遍历google搜索最终挖出了解决方法,亲测可用 直接贴操作: 很简单的英文描述,相信大家能看懂,我就不翻译了. Click on Start and then Run. In the text box in the Run window, type regedit and click OK. This will open the Registry Editor program. Locate the HKEY_CURRENT_U_大小写切换时窃取焦点