学习响应式BootStrap来写融职教育网站，Bootsrtap第十二天侧边卡片和列表组
2024-06-03 20:36:43
<!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"><imgsrc="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"><div class="col-3"></div><div class="col"></div></div><div class="row"><div class="col-12 col-sm-6 col-lg-3"></div><div class="col-12 col-sm-6 col-lg-3"></div><div class="col-12 col-sm-6 col-lg-3"></div><div class="col-12 col-sm-6 col-lg-3"></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-->
</body>
</html>
学习响应式BootStrap来写融职教育网站，Bootsrtap第十二天侧边卡片和列表组相关推荐
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第五天页脚
学习响应式BootStrap来写融职教育网站,Bootsrtap第五天页脚 <!DOCTYPE html> <html lang="zh_CN"> < ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第十四天，PK模块的开发
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第十三天讲师列表栏目
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第十一天Dplayer播放器
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第十天你的收获
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第九天手粉琴swiper特效
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第八天轮播图js特效
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第七天PC端轮播图
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
- 学习响应式BootStrap来写融职教育网站，Bootsrtap第六天移动端轮播图
<!DOCTYPE html> <html lang="zh_CN"> <head><meta charset="UTF-8&q ...
最新文章
- openStack工具集
- 8.0ble设备 android_【胖猴小玩闹】智能门锁与BLE设备安全Part 4：一次BLE智能手环的小玩闹...
- PHP的替换strstr strtr str_replace substr_replace
- 在 SAP HANA database Explorer 里添加 HDI 容器
- SAP Commerce的Site列表
- ThreadLocal可能引起的内存泄露
- Linux Makefile
- 时区日期处理及定时 (NSDate,NSCalendar,NSTimer,NSTimeZone) -- IOS（实例）
- heroku服务器_如何在Heroku上使用Express服务器部署React应用
- 教你设置技嘉主板bios中文图解
- Wind Python案例
- 中职计算机专业英语说课稿,中职英语说课稿模板.doc
- 用虚拟串口实现串口数据收发
- JavaWeb宿舍管理系统环境搭建运行教程
- 一个女人努力工作的意义
- dspic33 怎么C语言编程,Microchip工程师社区 - dsPIC33汇编指令 - 16位MCU及DSC - 麦田论坛...
- 鸿蒙Harmony负责人手王成录被曝已离职：华为技术元老，1998年哈工大博士毕业后加入...
- C语言编程实现冰雹猜想的算法，并测算各个自然数到达4-2-1谷底（即N等于4，2，1结束后）所经过的变换次数。
- EduCoder-程序设计技术R（第四部分循环结构程序设计2）- 第5关：C循环-寻找完数
- PsTools远程执行Windows命令