部门介绍

直接使用代码

图片素材

css代码

 <style>
.list-about  h1 { margin-top:50px; color:#6cc4bb; letter-spacing:7px; margin-bottom:30px; font-size:46px; text-align:center;}
.list-about .ass-dep { margin-top:80px; position:relative}
.list-about .ass-dep .dep { text-align:center; margin-top:30px;}
.list-about .ass-dep .dep h4{ margin:20px auto; color:#5c5c58; font-size:26px;}
.list-about .ass-dep .dep p { color:#5c5c58; letter-spacing:5px; font-size:17px;}
.list-about .ass-dep .middle { position:absolute; top:350px; left:480px;}
.list-about .ass-hon { text-align:center; margin:50px auto;}
.list-about .ass-hon p { margin:30px auto; font-size:18px; line-height:40px; ;color:#444}
</style>

HTML+JS代码

 
<div class="container list-about">

  <div class="ass-dep">
    <h1>协会主要部门</h1>
    <div class="col-md-6">

      <div class=" dep ">
        <img src="http://www.bootfastui.cn/img/2021/0329-7/bangongshi.png">
        <h4>办公室</h4>
        <p>负责相关文件的起草、制<br>定；负责协会对内、对外的<br>协调工作</p>
      </div>

    </div>
    <div class="col-md-6">

      <div class=" dep">
        <img src="http://www.bootfastui.cn/img/2021/0329-7/member.png">
        <h4>服务部</h4>
        <p>负责组织会员活动</p>
      </div>

    </div>
    <div class="clear"></div>
    <div class="col-md-6">

      <div class=" dep ">
        <img src="http://www.bootfastui.cn/img/2021/0329-7/ser.png">
        <h4>事业部</h4>
        <p>处理行业举报，投诉</p>
      </div>

    </div>
    <div class="col-md-6">

      <div class=" dep ">
        <img src="http://www.bootfastui.cn/img/2021/0329-7/mess.png">
        <h4>宣传信息部</h4>
        <p>负责行业数据收集、整理河<br>南省艺术培训协会官网、微<br>信公众号的运营</p>
      </div>

    </div>
    <div class="middle"><img src="http://www.bootfastui.cn/img/2021/0329-7/jiahao.png"></div>
  </div>
  <div class="clear"></div>
  <!--协会荣誉-->
  <div class="ass-hon">
    <div><img src="http://www.bootfastui.cn/img/2021/0329-7/logo_2.jpg"></div>
    <div>
      <p>
        全国第一家专注于艺术类培训领域的行业性协会<br>
        全国第一家由三个政府部门发起的省级行业性协会<br>
        全国第一家帮助艺术培训机构资质合法化的行业协会<br>
        全国第一家引进欧美社会团体先进管理理念的行业协会<br>
        全国第一家公布本省艺术培训机构“黑名单”的行业协会<br>
        全国第一家帮助政府部门规范培训机构经营行为的行业协会
      </p>
    </div>
  </div>
</div>