直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

 <style>
.changeBlock2 ol,ul{ list-style: none; }
.changeBlock2{width: 1200px;margin: 0 auto;}
.floorHd{padding-left: 28px; height:55px;}
.changeBlock2 li{float: left;width: 600px;height: 158px;margin-bottom: 0px;overflow: hidden;}
.changeBlock2 p,.changeBlock2 h4{margin:0;padding:0}
.changeBlock2 h4{font-size: 20px;color: #272c42;text-indent: 0px;line-height: 22px; }
.changeBlock2 p{font: 14px/24px "Microsoft YaHei";color: #7c7c7c;}
.changeBlock2 .star h4{padding-top:110px;padding-left:40px;}
.changeBlock2 .star p{line-height: 20px;padding-top:3px;padding-left:45px; padding-right:42px;}
.changeBlock2 .star_2 h4{text-align:right;padding-top:75px;padding-right:125px;}
.changeBlock2 .star_2 p{text-align:right;line-height: 20px;padding-top:3px;padding-right:125px; padding-left:5px;}
.changeBlock2 .star_3 h4{padding-top:30px;padding-left:30px;}
.changeBlock2 .star_3 p{line-height: 20px;padding-top:3px;padding-left:35px; padding-right:42px;}
.changeBlock2 .star_4 h4{text-align:right;padding-top:40px;padding-right:135px;}
.changeBlock2 .star_4 p{text-align:right;line-height: 20px;padding-top:3px;padding-right:135px; padding-left:5px;}
.changeBlock2 .star_5 h4{padding-top:-30px;padding-left:40px;}
.changeBlock2 .star_5 p{line-height: 20px;padding-top:3px;padding-left:45px; padding-right:42px;}
</style>

HTML+JS代码

 
<!-- 选择我们 -->
<div id="year1" style="background:url(http://www.bootfastui.cn/img/2021/0325/floorbg3.png) no-repeat center top;margin: 0px auto 0;">
  <h2 class="floorHd"></h2>
  <ul class="changeBlock2 ">
    <li></li>
    <li class="star ">
      <h4><b>十年</b><b style="color:#d50b08">经验</b></h4>
      <p>在岁月中悉心耕耘，站在教育前沿，综合提升学员能力，满足企业需求。</p>
    </li>

    <li class="star_2">
      <h4><b style="color:#d50b08">专注</b><b>领域</b></h4>
      <p>聚焦于资格认证的培训先驱者，潜心研究，做深做透，</br>让深度带来优势。</p>
    </li>
    <li></li>
    <li style="height: 123px;"></li>
    <li class="star_3" style="height:123px;">
      <h4><b>专业</b><b style="color:#d50b08">技能</b></h4>
      <p>整合多学科知识，将任务细分，并让专业的人来做专业的事，</br>方能打造出完美教程。</p>
    </li>
    <li class="star_4">
      <h4><b style="color:#d50b08">懂您</b><b>需求</b></h4>
      <p>我们通过丰富、完善的培训产品，超越客户期望的服务</br>为个人、组织和企业创造新的价值，具有价值的商业知识和技能</br>都可以通过我们的培训课程、研讨会、论坛来获得。</p>
    </li>
    <li></li>
    <li style="height: 123px;"></li>
    <li class="star_5" style="height:123px;">
      <h4><b>使命</b><b style="color:#d50b08">必达</b></h4>
      <p>我们深知对于教育而言，“时间”“进度”“效率”就是生命线，</br>做到使命必达！
      </p>
    </li>
    <li></li>
    <li></li>

  </ul>
  <div class="clear"><br /></div>

</div>
<!-- 选择我们 -->

<!-- 案例 -->
<div class="container">
  <img src="http://www.bootfastui.cn/img/2021/0325/floor4.png" alt="" class="center-block">
  </br></br></br>
  <div class="row">
    <img src="http://www.bootfastui.cn/img/2021/0325/case_02.png" width="100%">
  </div>
<div>