-
Bootstrap实战—培养模式(栅格布局+CSS+JS)
-
目标效果
-
我的效果
-
我的代码
<!DOCTYPE html>
<html>
<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.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>
<section>
<div class="container d-none d-lg-block">
<div class="row">
<div class="col m-1">
<h4 class="d-inline-block">培养模式</h4>
<small class="pl-3 text-muted">千人千面的培养方案，两种学习模式，一种实习模式</small>
</div>
</div>
<style>
.xdc{background: #EDEDED;width: 100%;height: 60px; transform:skew(30deg);height: 60px;width: 244px;}
.leftmode{display:inline-block;height:54px;width:200px;border: 2px #44729e solid;transform:skew(-30deg);font-size: 11px;text-align: center; padding: 1px 0;margin-left: 20px;}
.leftmodet{display:inline-block;margin-top:20px;height:15px;width:5px;background:#44729e;transform:skew(-30deg);;margin-left: -7px;}
.xdc2{background: #EDEDED;width: 100%;height: 60px; transform:skew(-30deg);height: 60px;width: 244px;}
.rightmode{display:inline-block;height:54px;width:200px;border: 2px #44729e solid;transform:skew(30deg);font-size: 11px;text-align: center; padding: 1px 0;margin-left: 20px;}
.rightmodet{display:inline-block;margin-top:20px;height:15px;width:5px;background:#44729e;transform:skew(30deg);;margin-left: -208px;}
</style>
<div class="row">
<div class="col-1" >
<div><br><br><br><br><br></div>
<div>零<br>基<br>础<br>适<br>合<br>参<br>加<br>面<br>授<br>班</div>
<img src="images/upjt.png" alt="">
</div>
<div class="col-3" style="margin-left: -100px;">
<div class="text-center text-white" style="background:cornflowerblue;transform:skew(30deg);height: 60px;width: 244px;">
<div class="pt-3" style="transform:skew(-30deg);"><h5>面授模式</h5></div>
</div>
<div class="xdc" style="margin-left: 34px;">
<div class="leftmode mt-1 pt-1" idn='1'>
<div>完全适合零基础的学员参加面授班<br>统一的开班时间和统一的课程进度</div>
</div>
<span class="leftmodet"></span>
</div>
<div class="xdc" style="margin-left: 68px;">
<div class="leftmode mt-1 pt-1" idn='2'>
<div>每天安排 4 个小时由技术讲师授课<br>每天安排 8 个小时练习由专人指导</div>
</div>
<span class="leftmodet"></span>
</div>
<div class="xdc" style="margin-left: 102px;">
<div class="leftmode mt-1 pt-1">
<div>参加面授班的特点是交流互动性强<br>每天学习内容相同学习氛围比较好</div>
</div>
<span class="leftmodet"></span>
</div>
<div class="xdc" style="margin-left: 136px;">
<div class="leftmode mt-1 pt-1">
<div>有专业教学系统辅助学习效果提升<br>资源、笔记、作业、测试全程记录</div>
</div>
<span class="leftmodet"></span>
</div>
<div class="xdc" style="margin-left: 170px;">
<div class="leftmode mt-1 pt-1">
<div>毕业后可以掌握全栈技能进项目组<br>成绩不合格可按测试结果选择重修</div>
</div>
<span class="leftmodet"></span>
</div>
<div class="xdc" style="background:cornflowerblue;margin-left: 220px;height: 120px;">
<div class="text-white text-center pt-4" style="transform:skew(-30deg);">
<div>毕业后直接浸项目组实习<br>也可直接推荐到企业就业</div>
</div>
</div>
</div>
<div class="col-4 text-center text-white" style="margin-left: 80px;">
<div style="background:cornflowerblue;height: 60px;width: 350px;">
<h5 class="pt-3">实习模式</h5>
</div>
<div class="contain1" style="position: relative;">
<img id="contain11" src="images/wdg.png" alt="" style="margin-top: -30px;opacity: 0;">
<img src="images/wd.png" alt="" style="margin-top: -210px;margin-left: 60px;">
<img src="images/work.png" alt="" style="margin-top: -550px;">
</div>
<div style="background: cornflowerblue;width: 100%;height: 60px; height: 80px;width: 200px;margin-top: -80px;margin-left: 80px;opacity:0.9;">
<div class="pt-4">测试通过<br>可直接浸项目组实习</div>
</div>
</div>
<div class="col-3" style="margin-left:80px;">
<div class="text-center text-white" style="background:cornflowerblue;transform:skew(-30deg);height: 60px;width: 244px;">
<div class="pt-3" style="transform:skew(30deg);"><h5>坐班模式</h5></div>
</div>
<div class="xdc2" style="margin-left: -34px;">
<div class="rightmode mt-1 pt-1">
<div>为不同基础打造千人千面学习模式<br>根据基础不同拥有定制的课程体系</div>
</div>
<span class="rightmodet"></span>
</div>
<div class="xdc2" style="margin-left: -68px;">
<div class="rightmode mt-1 pt-1">
<div>不仅随到随学还可以控制学习进度<br>可两天学一关也可以一天学习多关</div>
</div>
<span class="rightmodet"></span>
</div>
<div class="xdc2" style="margin-left: -102px;">
<div class="rightmode mt-1 pt-1">
<div>通过式学习通过一关掌握一关内容<br>技术总监身边一对一指导快速提升</div>
</div>
<span class="rightmodet"></span>
</div>
<div class="xdc2" style="margin-left: -136px;">
<div class="rightmode mt-1 pt-1">
<div>专业的定制学习系统效果胜过面授<br>大牛最新的课程资料全面倍速学习</div>
</div>
<span class="rightmodet"></span>
</div>
<div class="xdc2" style="margin-left: -170px;">
<div class="rightmode mt-1 pt-1">
<div>所有关都通过即掌握技术合格毕业<br>坐班模式效果要比面授高一到两倍</div>
</div>
<span class="rightmodet"></span>
</div>
<div class="xdc2" style="background:cornflowerblue;margin-left: -220px;height: 120px;">
<div class="text-white text-center pt-4" style="transform:skew(30deg);">
<div>毕业后直接浸项目组实习<br>也可直接推荐到企业就业</div>
</div>
</div>
</div>
<div class="col-1" style="margin-left: -80px;">
<div><br><br><br><br><br></div>
<div>任<br>何<br>基<br>础<br>都<br>可<br>以<br>来<br>参<br>加</div>
<img src="images/upjt.png" alt="">
</div>
</div>
</div>
</section>
<!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
<!--灯泡js效果-->
<script>
$(function(){
$(".contain1").hover(function(){
$("#contain11").css("opacity",1).show();
}, function(){
$("#contain11").css("opacity",0).show();
});
});
</script>
<script>
$(function(){
$(".xdc2").hover(function(){
$(".rightmode").css("borderColor",'#ff8e3b').show();
$(".rightmodet").css("backgroundColor",'#ff8e3b').show();
}, function(){
$(".rightmode").css("borderColor",'cornflowerblue').show();
$(".rightmodet").css("backgroundColor",'cornflowerblue').show();
});
});
</script>
<script>
$(function(){
$(".leftmode").hover(function(){
$(this).css("borderColor",'#ff8e3b').show();
$(this).next().css("backgroundColor",'#ff8e3b').show();
}, function(){
$(this).css("borderColor",'').show();
$(this).next().css("backgroundColor",'cornflowerblue').show();
});
});
</script>
</body>
</html>
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
