学习响应式BootStrap来写融职教育网站，Bootsrtap第十三天讲师列表栏目

于 2021-07-29 22:07:46 发布
阅读量219 收藏
点赞数
分类专栏： 大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/god953/article/details/119221914
版权

Web全栈 就业班 实战项目 师资力量 培养模式
关键词由CSDN通过智能技术生成 
<!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="#">更多&gt;&gt;</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>
zeuskk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值