Bootstrap实战—你的收获栏目
<!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">
<style>
</style>
</head>
<body>
<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(images/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;}
h4.th4 {
text-shadow: 1px 1px 1px #000000;
}
</style>
<section class="mt-4">
<div class="container">
<div class="row">
<div class="col">
<h4 class="d-inline-block">你的收获</h4>
<small class="text-muted pl-2">掌握的是一门就业的技术,为成长积蓄力量</small>
</div>
</div>
<div class="row contain">
<div class="col-4 p-1 col-lg pl-1">
<div class="text-center rounded-lg " style="background: url('images/h1.jpg'); height: 120px;line-height: 120px;" >
<a href="" class="d-inline-block text-white text-decoration-none">
<h4>实习的岗位</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 p-1 col-lg pl-1">
<div class="text-center rounded-lg " style="background: url('images/h2.jpg'); height: 120px;line-height: 120px;" >
<a href="" class="d-inline-block text-white text-decoration-none">
<h4>实习的岗位</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 p-1 col-lg pl-1">
<div class="text-center rounded-lg " style="background: url('images/h3.jpg'); height: 120px;line-height: 120px;" >
<a href="" class="d-inline-block text-white text-decoration-none">
<h4>实习的岗位</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 p-1 col-lg pl-1">
<div class="text-center rounded-lg " style="background: url('images/h4.jpg'); height: 120px;line-height: 120px;" >
<a href="" class="d-inline-block text-white text-decoration-none">
<h4>实习的岗位</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 p-1 col-lg pl-1">
<div class="text-center rounded-lg " style="background: url('images/h5.jpg'); height: 120px;line-height: 120px;" >
<a href="" class="d-inline-block text-white text-decoration-none">
<h4>实习的岗位</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 p-1 col-lg pl-1">
<div class="text-center rounded-lg " style="background: url('images/h6.jpg'); height: 120px;line-height: 120px;" >
<a href="" class="d-inline-block text-white text-decoration-none">
<h4>实习的岗位</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>
<!--引入jQuery, 再引入poppper.js 最后再引入Bootstrap.js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.js"></script>
</body>
</html>