学习响应式BootStrap来写融职教育网站，Bootsrtap第七天PC端轮播图

于 2021-07-28 17:36:41 发布
阅读量131 收藏
点赞数
分类专栏： 大前端 文章标签： html5 javascript css bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/god953/article/details/119185862
版权 
<!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">

</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开始-->
<section class="mt-2 d-none d-lg-block" style="background: #6a296e;">
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="carousel">
                    <a class="carousel-item active" href="#" target="_blank"><img src="img/player/001.jpg" class="d-block w-100" alt=""></a>
                    <a class="carousel-item" href="#" target="_blank"><img src="img/player/2.jpg" class="d-block w-100" alt=""></a>
                    <a class="carousel-item" href="#" target="_blank"><img src="img/player/3.jpg" class="d-block w-100" alt=""></a>
                    <a class="carousel-item" href="#" target="_blank"><img src="img/player/4.jpg" class="d-block w-100" alt=""></a>
                    <a class="carousel-item" href="#" target="_blank"><img src="img/player/5.jpg" class="d-block w-100" alt=""></a>
                    <a class="carousel-item" href="#" 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 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结束-->

<!--你的收获开始-->
<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-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></div>
            <div class="col-4 col-sm-4 col-md"></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-lg-8"></div>
            <div class="col-sm-12 col-lg-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-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>
        <div class="row">
            <div class="col"></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-3.4.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
zeuskk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值