直接使用代码

图片素材

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

css代码

 <style>
.m-aboutus .row-h2{background:url(http://www.bootfastui.cn/img/2021/0513-6/pic_l01.jpg) 50% 50% no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;padding-top:80px}
.m-aboutus .row-h2 h2{text-align:center;font-size:31px;color:#fff;margin-bottom:80px}
.m-aboutus .row-h2 h2 span{color:#f77026}

.fenkuai{text-align:center;padding-bottom:80px}
.fenkuai .img,.fenkuai .k1{display:inline-block;vertical-align:middle;margin:0 19px}
.fenkuai .k1{width:320px;height:134px;background-color:#fff;border-radius:10px;padding:34px 0 0 30px}
.fenkuai .k2{padding-top:40px}
.fenkuai .k1 .pic{float:left;margin-right:15px}
.fenkuai .k1 .txt{text-align:left;margin-top:8px}
.fenkuai .k2 .txt{margin-top:0}
.fenkuai .k1 .txt p{font-size:20px;color:#000}
.fenkuai .k1 .txt span{font-size:20px;color:#000;font-weight:700}
.m-aboutus .row-h2 .r2bgm{display:block;margin:0 auto;padding-bottom:98px}
.m-aboutus .row-h3 .tit{text-align:center;margin-bottom:60px}
.m-aboutus .row-h3 .tit .t1{display:inline-block;vertical-align:middle;padding:0 60px}
.m-aboutus .row-h3 .tit .t2{position:relative}
.m-aboutus .row-h3 .tit .t2:after{position:absolute;content:'';top:0;right:0;width:1px;height:130px;background-color:#e3e3e3}
.m-aboutus .row-h3 .tit .t1 h3{font-size:31px;color:#000;margin-bottom:24px}
.m-aboutus .row-h3 .tit .t1 h3 span{color:#f77026}
.m-aboutus .row-h3 .tit .t1 a{display:inline-block;width:158px;height:54px;line-height:50px;border:1px solid #e3e3e3;border-radius:40px;color:#f77026}
.m-aboutus .row-h3 .tit .t1 a:hover{color:#fff;background-color:#f77026}
.m-aboutus .row-h3{padding:111px 0 90px}
.m-aboutus .row-h3 .tit .t1 a span{font-size:20px;padding-right:30px;background:url(http://www.bootfastui.cn/img/2021/0513-6/icon_l06.png) right 0 center no-repeat}
.m-aboutus .row-h3 .tit .t1 a:hover span{background-image:url(http://www.bootfastui.cn/img/2021/0513-6/icon_l07.png)}
.m-aboutus .row-h3 .num{text-align:center;margin:0 -98px}
.m-aboutus .row-h3 .num .n1{display:inline-block;vertical-align:middle;padding:0 98px}
.m-aboutus .row-h3 .num .n1 h3{font-size:70px;color:#f77026;margin-bottom:20px}
.m-aboutus .row-h3 .num .n1 h3 span{font-size:38px;font-weight:400}
.m-aboutus .row-h3 .num .n2 h3 span{font-size:70px}
.m-aboutus .row-h3 .num .n1 p{font-size:20px;color:#000}
</style>

HTML+JS代码

 <section class="m-aboutus">
  <div class="row-h2">
    <div class="container">
      <h2>覆盖艺术生高三<span>全年文化课学习产品</span>，助专业课/文化课培训机构<span>高效引流招生</span></h2>
      <div class="fenkuai">
        <div class="k1">
          <div class="pic">
            <img src="http://www.bootfastui.cn/img/2021/0513-6/icon_l03.png" alt="">
          </div>
          <div class="txt">
            <p>免费定制机构专属的</p>
            <span>文化课学习小程序</span>
          </div>
        </div>
        <img src="http://www.bootfastui.cn/img/2021/0513-6/icon_l05.png" alt="" class="img">
        <div class="k1 k2">
          <div class="pic">
            <img src="http://www.bootfastui.cn/img/2021/0513-6/icon_l04.png" alt="">
          </div>
          <div class="txt">
            <p>免费发放</p>
            <span>小程序配套学习卡</span>
          </div>
        </div>
      </div>
      <img src="http://www.bootfastui.cn/img/2021/0513-6/png_l05.png" alt="" class="r2bgm">
    </div>
  </div>
  <div class="row-h3">
    <div class="container">
      <div class="tit">
        <div class="t1 t2">
          <h3><span>专业课</span>培训机构合作方案</h3>
          <a target="_blank" href="http://www.bootfastui.cn"><span>点击获取</span></a>
        </div>
        <div class="t1">
          <h3><span>专业课</span>培训机构合作方案</h3>
          <a target="_blank" href="http://www.bootfastui.cn"><span>点击获取</span></a>
        </div>
      </div>
      <div class="num">
        <div class="n1">
          <h3>11 <span>年</span></h3>
          <p>艺考生文化课行业积淀</p>
        </div>
        <div class="n1">
          <h3>80 <span>W</span></h3>
          <p>艺术生选择使用</p>
        </div>
        <div class="n1 n2">
          <h3>600 <span>+</span></h3>
          <p>机构客户信任选择</p>
        </div>
      </div>
    </div>
  </div>

</section>