直接使用代码

图片素材

css代码

 <style>
#index_luodi{ background:url(http://www.bootfastui.cn/img/2021/0521-2/bg_index.gif); padding:40px 0;text-align:center}
#index_luodi .kuai h4{ }
#index_luodi .kuai p{ text-align:center; padding:0 20px; color:#666;height:40px}
</style>

HTML+JS代码

<!--落地服务-->
<h1><img src="http://www.bootfastui.cn/img/2021/0521-2/index_title_luodi.jpg" class="center-block" /></h1>
<section class="container-fluid" id="index_luodi">
  <div class="container">
    <div class="row">
      <div class="kuai col-md-3  col-xs-6">
        <img src="http://www.bootfastui.cn/img/2021/0521-2/index_luo1.jpg" class="center-block" />
        <h4>落地服务</h4>
        <h5>Landing service</h5>
        <p>贴心接送机服务 安全无忧</p>
      </div>
      <!--kuai END -->

      <div class="kuai col-md-3  col-xs-6">
        <img src="http://www.bootfastui.cn/img/2021/0521-2/index_luo2.jpg" class="center-block" />
        <h4>营养美食</h4>
        <h5>Nutritious food</h5>
        <p>除团餐或自助还可品尝当地特色美食</p>
      </div>
      <!--kuai END -->

      <div class="kuai col-md-3  col-xs-6">
        <img src="http://www.bootfastui.cn/img/2021/0521-2/index_luo3.jpg" class="center-block" />
        <h4>安心寄宿</h4>
        <h5>Peace of mind</h5>
        <p>亲切深度体验当地文化</p>
      </div>
      <!--kuai END -->

      <div class="kuai col-md-3  col-xs-6">
        <img src="http://www.bootfastui.cn/img/2021/0521-2/index_luo4.jpg" class="center-block" />
        <h4>签证办理</h4>
        <h5>Visa processing</h5>
        <p>专业高效办理，99%高通过率；</p>
      </div>
      <!--kuai END -->

      <div class="kuai col-md-3  col-xs-6">
        <img src="http://www.bootfastui.cn/img/2021/0521-2/index_luo5.jpg" class="center-block" />
        <h4>行前指导</h4>
        <h5>Pre-departure guidance</h5>
        <p>行前注意事项详细培训指导</p>
      </div>
      <!--kuai END -->

      <div class="kuai col-md-3  col-xs-6">
        <img src="http://www.bootfastui.cn/img/2021/0521-2/index_luo6.jpg" class="center-block" />
        <h4>海外协会支持保障</h4>
        <h5>Overseas Association Support Guarantee</h5>
        <p>文化交流协会全面支持确保行程正规安全</p>
      </div>
      <!--kuai END -->

      <div class="kuai col-md-3  col-xs-6">
        <img src="http://www.bootfastui.cn/img/2021/0521-2/index_luo7.jpg" class="center-block" />
        <h4>就业保障</h4>
        <h5>Employment security</h5>
        <p>由海外协会及相关专业人员全力支持</p>
      </div>
      <!--kuai END -->

      <div class="kuai col-md-3  col-xs-6">
        <img src="http://www.bootfastui.cn/img/2021/0521-2/index_luo8.jpg" class="center-block" />
        <h4>领队全程监控</h4>
        <h5>Team leader monitoring</h5>
        <p>各团组均配有领队全程监控引导</p>
      </div>
      <!--kuai END -->
    </div>
    <div class="clear"></div>
  </div>
</section>