-
Bootstrap实战练习—进入前端开发项目组实习1(swiper+card+JS)
-
原网址效果
-
我的网址效果
-
我的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进入前端开发项目组实习https://www.eduwork.cn/categroy/web.html#</title>
<!--移动设备优先-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--引入Bootstrap CSS-->
<link rel="stylesheet" href="css/bootstrap.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">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="../package/css/swiper.min.css">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Swiper demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #fff;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.swiper-slide {
text-align: left;
font-size: 18px;
background: #fff;
}
</style>
</head>
<body>
<div class="container-fluid shadow bg-white fixed-top">
<!--导航栏-->
<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="collapse navbar-collapse mr-auto" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link pl-4 " href="#" style="background: url('images/hl.png') no-repeat 6px 10px;">融职科技</a>
</li>
<li class="nav-item ">
<a class="nav-link pl-4" href="#" style="background: url('images/llt.png') no-repeat 6px 10px;">学习猿地</a>
</li>
<li class="nav-item ">
<a class="nav-link pl-4" href="#" style="background: url('images/zzt.png') no-repeat 6px 10px;">智校云</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
培训模式
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">面授模式</a>
<a class="dropdown-item" href="#">坐班模式</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">实习模式</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
培训方向
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Web全栈工程师</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Java全栈工程师</a>
<a class="dropdown-item" href="#">PHP全栈工程师</a>
<a class="dropdown-item" href="#">Web前端工程师</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">UI设计师+产品经理</a>
</div>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Web全栈就业班</a>
</li>
</ul>
<div class="nav-item dropdown float-right">
<a class="nav-link dropdown-toggle pl-5" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" style="background: url('images/微信.jpg') no-repeat ;">
咨询微信
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">158-0168-4338</a>
<a class="dropdown-item" href="#">QQ：97484619</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><img src="images2/qrcode.png" alt=""></a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="container pt-5">
<!--标题栏-->
<div class="row pt-4">
<div class="col m-2">
<img src="images/logo.png" alt="" style="height: 50px;width: auto;">
</div>
<div class="col m-2 h5 mt-3">在工作中学习，在学习中工作</div>
<div class="col m-2">
<span class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
学习辕地
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Java全栈</a>
<a class="dropdown-item" href="#">Python全栈</a>
<a class="dropdown-item" href="#">Golang全栈</a>
<a class="dropdown-item" href="#">PHP全栈</a>
<a class="dropdown-item" href="#">大数据全栈</a>
<a class="dropdown-item" href="#">Web前端全栈</a>
<a class="dropdown-item" href="#">UI/UE全栈</a>
<a class="dropdown-item" href="#">Linux全栈</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">官网首页</a>
</div>
</span>
<span class="dropdownk">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
智校云
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">CRM系统</a>
<a class="dropdown-item" href="#">在线教育系统</a>
<a class="dropdown-item" href="#">考试系统</a>
<a class="dropdown-item" href="#">财务系统</a>
<a class="dropdown-item" href="#">教务系统</a>
<a class="dropdown-item" href="#">就业系统</a>
<a class="dropdown-item" href="#">代理系统</a>
<a class="dropdown-item" href="#">分销系统</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">全部产品</a>
</div>
</span>
</div>
</div>
</div>
<!--轮播图Swiper-->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div style="position:relative;height: 1280px; height:800px;">
<img class="" src="images2/slider_bg_2.jpg" style="height: 100%;width: 100%;filter: grayscale(30%);">
<div class="text-white" style="position:absolute;left:100px;top:200px;">
<h2 style="font-size: 70px;">在工作中学技术</h2>
<p>这是程序员成长的正确姿势</p>
<a href="" class="btn btn-danger">联系我们</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div style="position:relative;height: 1280px; height:800px;">
<img class="" src="images2/slider2_bg.jpg" style="height: 100%;width: 100%;filter: grayscale(30%);">
<div class="text-white" style="position:absolute;left:100px;top:200px;">
<h2 style="font-size: 70px;">浸入项目组</h2>
<p>做一名Web前端开发方向的实习工程师</p>
<a href="" class="btn btn-danger">联系我们</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div style="position:relative;height: 1280px; height:800px">
<img class="" src="images2/slider_bg_3.jpg" style="height: 100%;width: 100%;filter: grayscale(30%);">
<div class="text-white" style="position:absolute;left:100px;top:200px;">
<h2 style="font-size: 70px;">参与商业项目开发</h2>
<p>书写有开发工作经验简历，获得高薪工作</p>
<a href="" class="btn btn-danger">联系我们</a>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!--正文-->
<div class="container">
<!--Web前端高级开发工程师前面的三个card-->
<div class="row my-1" style="margin-left: 50px;">
<div class="card bg-dark text-white mr-4 mode" style="width: 20rem;height: 21rem;">
<div class="h-25 text-center mt-5">
<img src="images2/service_icon_01.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">智校云</h5>
<p class="card-text">
<p>专注教育信息化系列软件开发</p>
<p>软件产品+开源软件+软件外包+离岸外包</p>
<p>使用多种编程语言，提供上千个实习岗位</p>
</p>
<a href="#" class="text-decoration-none text-white">了解更多<span>></span></a>
</div>
</div>
<div class="card bg-danger text-white mr-4" style="width: 20rem;height: 21rem;">
<div class="h-25 text-center mt-5">
<img src="images2/service_icon_02.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">EduWork</h5>
<p class="card-text">
<p>国内首创的IT人才培养模式</p>
<p>在工作中学习技术增涨工作经验</p>
<p>踏入程序员之路，就从实习起步</p>
</p>
<a href="#" class="text-decoration-none text-white">了解更多<span>></span></a>
</div>
</div>
<div class="card bg-dark text-white mr-4 mode" style="width: 20rem;height: 21rem;">
<div class="h-25 text-center mt-5">
<img src="images2/service_icon_03.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">学习猿地</h5>
<p class="card-text">
<p>成就自己只需要一套精品</p>
<p>课程和资源丰富，更新迭代技术前沿</p>
<p>千人千面，可定制专属的课程体系</p>
</p>
<a href="#" class="text-decoration-none text-white">了解更多<span>></span></a>
</div>
</div>
</div>
<!--Web前端高级开发工程师-->
<div class="row my-5 py-5">
<div class="media">
<img src="images2/welcome1.jpg" class="align-self-start mr-3" alt="...">
<div class="media-body text-muted">
<h5 class="mt-0 text-dark font-weight-bolder">Web前端高级开发工程师</h5>
<p>前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、 SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识， 包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。</p>
<p>移动互联网带来了大量高性能的移动终端设备以及快速的无线网络，HTML5，node.jS的广泛应用，各类框架类库层出不穷。</p>
<div class="d-inline-block pl-3">
<ul class="list-unstyled">
<li class="py-2"><a href="" class="text-decoration-none text-muted"><span class="badge badge-danger text-white">✔</span> 网页制作</a></li>
<li class="py-2"><a href="" class="text-decoration-none text-muted"><span class="badge badge-danger text-white">✔</span> 前端编程</a></li>
<li class="py-2"><a href="" class="text-decoration-none text-muted"><span class="badge badge-danger text-white">✔</span> 高级编程</a></li>
<li class="py-2"><a href="" class="text-decoration-none text-muted"><span class="badge badge-danger text-white">✔</span> 移动终端</a></li>
</ul>
</div>
<div class="d-inline-block pl-5">
<ul class="list-unstyled">
<li class="py-2"><a href="" class="text-decoration-none text-muted"><span class="badge badge-danger text-white">✔</span> 浏览器兼容性</a></li>
<li class="py-2"><a href="" class="text-decoration-none text-muted"><span class="badge badge-danger text-white">✔</span> 服务器端技术</a></li>
<li class="py-2"><a href="" class="text-decoration-none text-muted"><span class="badge badge-danger text-white">✔</span> 前端框架/库</a></li>
<li class="py-2"><a href="" class="text-decoration-none text-muted"><span class="badge badge-danger text-white">✔</span> 前端标准规范</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--我的项目组-->
<div class="container-fluid py-5 mt-5" style="background-color: #eee;">
<div class="row text-center text-danger">
<h5 class="col-12">我的项目组</h5>
</div>
<div class="row text-center">
<h1 class="col-12 font-weight-bolder">热门项目</h1>
</div>
<div class="row my-5">
<div class="card text-dark mr-4 col-3 border-muted mode1" style="width: 18rem;height: 21rem;margin-left: 120px;">
<div class="h-25 text-center mt-5">
<img src="images2/icon_01.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">智校云</h5>
<p class="card-text">
<p>专注教育信息化系列软件开发</p>
<p>软件产品+开源软件+软件外包+离岸外包</p>
<p>使用多种编程语言，提供上千个实习岗位</p>
</p>
<a href="#" class="text-decoration-none text-danger">了解更多<span>></span></a>
</div>
</div>
<div class="card text-dark mr-4 col-3 border-muted mode1" style="width: 18rem;height: 21rem;">
<div class="h-25 text-center mt-5">
<img src="images2/icon_02.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">智校云</h5>
<p class="card-text">
<p>专注教育信息化系列软件开发</p>
<p>软件产品+开源软件+软件外包+离岸外包</p>
<p>使用多种编程语言，提供上千个实习岗位</p>
</p>
<a href="#" class="text-decoration-none text-danger">了解更多<span>></span></a>
</div>
</div>
<div class="card text-dark mr-4 col-3 border-muted mode1" style="width: 18rem;height: 21rem;">
<div class="h-25 text-center mt-5">
<img src="images2/icon_03.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">智校云</h5>
<p class="card-text">
<p>专注教育信息化系列软件开发</p>
<p>软件产品+开源软件+软件外包+离岸外包</p>
<p>使用多种编程语言，提供上千个实习岗位</p>
</p>
<a href="#" class="text-decoration-none text-danger">了解更多<span>></span></a>
</div>
</div>
</div>
<div class="row my-5">
<div class="card text-dark mr-4 col-3 border-muted mode1" style="width: 18rem;height: 21rem;margin-left: 120px;">
<div class="h-25 text-center mt-5">
<img src="images2/icon_04.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">智校云</h5>
<p class="card-text">
<p>专注教育信息化系列软件开发</p>
<p>软件产品+开源软件+软件外包+离岸外包</p>
<p>使用多种编程语言，提供上千个实习岗位</p>
</p>
<a href="#" class="text-decoration-none text-danger">了解更多<span>></span></a>
</div>
</div>
<div class="card text-dark mr-4 col-3 border-muted mode1" style="width: 18rem;height: 21rem;">
<div class="h-25 text-center mt-5">
<img src="images2/icon_05.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">智校云</h5>
<p class="card-text">
<p>专注教育信息化系列软件开发</p>
<p>软件产品+开源软件+软件外包+离岸外包</p>
<p>使用多种编程语言，提供上千个实习岗位</p>
</p>
<a href="#" class="text-decoration-none text-danger">了解更多<span>></span></a>
</div>
</div>
<div class="card text-dark mr-4 col-3 border-muted mode1" style="width: 18rem;height: 21rem;">
<div class="h-25 text-center mt-5">
<img src="images2/icon_06.png" class="card-img-top h-100 w-25 p-1">
</div>
<div class="card-body small text-center">
<h5 class="card-title">智校云</h5>
<p class="card-text">
<p>专注教育信息化系列软件开发</p>
<p>软件产品+开源软件+软件外包+离岸外包</p>
<p>使用多种编程语言，提供上千个实习岗位</p>
</p>
<a href="#" class="text-decoration-none text-danger">了解更多<span>></span></a>
</div>
</div>
</div>
<div class="row py-5 mt-5">
<div class=" col-12 text-center">
<div class="btn btn-danger text-white">更多项目</div>
</div>
</div>
</div>
<!--我的收获-->
<div class="row my-1"></div>
<!--可以解决的问题-->
<div class="row my-1"></div>
<!--发展方向-->
<div class="row my-1"></div>
<!--浸入项目的成长日志-->
<div class="row my-1"></div>
<!--我的收获-->
<div class="row my-1"></div>
<!--我的变化-->
<div class="row my-1"></div>
</div>
<!--页脚-->
<footer class="container-fluid">
<div class="row bg-dark text-white">
<div class="col mt-5">
<div class="pl-3 m-3">EduWork 是智校云旗下专注程序员培养的实习平台。</div>
<div class="pl-3 m-3">
<a class="text-white text-decoration-none p-3" href="#">关于我们</a>
<a class="text-white text-decoration-none p-3" href="#">联系我们</a>
<a class="text-white text-decoration-none p-3" href="#">加入我们</a>
<a class="text-white text-decoration-none p-3" href="#">帮助中心</a>
<a class="text-white text-decoration-none p-3" href="#">学习猿地</a>
<a class="text-white text-decoration-none p-3" href="#" >智校云</a>
</div>
<div class="pl-3 text-muted m-3">©2018-2020 北京智校云网络科技有限公司 版权所有</div>
</div>
<div class="col-2 mt-5">
<figure class="figure p-3">
<img src="images2/qrcode.png" class="figure-img img-fluid rounded" alt="..." style="height: 100px;width: 100px;">
<figcaption class="figure-caption text-center">关注我们</figcaption>
</figure>
</div>
</div>
</footer>
<!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 30,
mousewheel: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
</script>
<!--Web前端高级开发工程师前面的三个card-->
<script>
$(function(){
$(".mode").hover(function(){
$(this).removeClass('bg-dark').addClass('bg-danger').show();
}, function(){
$(this).removeClass('bg-danger').addClass('bg-dark').show();
});
});
</script>
<!--我的项目组-->
<script>
$(function(){
$(".mode1").hover(function(){
$(this).removeClass('border-muted').addClass('border-danger').addClass('shadow-lg').show();
}, function(){
$(this).removeClass('border-danger').addClass('border-muted').removeClass('shadow-lg').show();
});
});
</script>
</body>
</html>
645
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
