直接使用代码

图片素材

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

css代码

 <style>
.com-tree{margin:20px 0;border-bottom:1px solid #ccc;}
.com-tree a{display: inline-block;margin-right:10px;line-height:40px;color:#199ed8}
.com-tree a.current{color:#555;}

/* 我的介绍 */
.about-top{margin-top:100px;margin-bottom:50px;}
.about-top .content{background: #199ed8;}
.about-top .content img{display:block;margin-top:-50px;margin-left:50px;}
.about-top .content p{color:#fff;padding:50px;line-height: 30px;padding-left:0}

.about-description{background:#f0f0f0;padding:50px 0;}
.about-description p{line-height:30px;}
.about-description .p-two{margin-top:30px;}

.about-tese{position: relative;}
.about-tese .t-content{position: absolute; width:1000px;top:200px;left:120px;}
.about-tese .t-content .tese-item{width:250px;margin:30px;border-left:10px solid #199ed8;line-height: 60px;font-size:18px;padding-left:15px;color:#fff;float:left;background:rgba(54, 40, 40, 0.6);  transition: all .3s;text-align: center;}
.about-tese .t-content .tese-item:hover{   margin-top: 22px;
    margin-bottom:38px;}
</style>

HTML+JS代码

 <img src="http://www.bootfastui.cn/img/2021/0328-7/banner.jpg"  width="100%"/>">
<div class=" container">
  <div class="com-tree">
    <a href="http://www.bootfastui.cn">首页</a>>
    <a href="http://www.bootfastui.cn" class="current">我的介绍</a>
  </div>


  <div class="about-top">
    <div class="content">
      <div class="row">
        <div class="col-md-6">
          <img src="http://www.bootfastui.cn/img/2021/0328-7/about.jpg" />
        </div>
        <div class="col-md-6">
          <p>
            艺智道智慧艺术课堂，专注于多媒体教学课程研发，现已推出筝之道古筝、欢橙美术，更多课在持续续研发中...<br />
            2003年开始从事艺术教育培训，至今办学17年，2013年开始研发标准化课程，2017-06-27日成立多媒体课程研发公司 —
            明艺教育科技有限公司，主产品：艺智道智慧艺术课堂，2018年2月正式推出多媒体课程产品：筝之道多媒体古筝，2019年10月正式推出欢橙多媒体少儿创意美术。

          </p>
        </div>
      </div>
    </div>
  </div>

</div>

<!-- 简述 -->
<div class="about-description">
  <div class="container">
    <p>
      解决培训机构痛点，回归艺术教育本质，是我们一直不变的目标。<br />
      培养温良恭俭让的下一代，是我们一直的理念。<br />
      至今已在全国已合作机构516家，受用课程学生119857万名，<br />
      我们坚信，我们的产品会让校长办学轻松，提升老师的教学能力，提升孩子的学习兴趣及良好品行。
    </p>
    <p class="p-two">
      我们的使命：解决培训机构痛点 回归艺术教育本质<br />
      我们的愿景：让天下没有难办的艺术学校<br />
      我们的经营理念：开放 分享 利他<br />
      我们的团队理念：中正 有趣<br />
      我们的行动理念：先开枪后瞄准 在行动中思考 <br />
      我们的教育理念：让学生在兴趣中坚持 让老师在标准中成长 让机构在系统中发展
    </p>
  </div>
</div>
<div class="container">
  <div class="about-tese">
    <img src="http://www.bootfastui.cn/img/2021/0328-7/tese.jpg" width="100%" />
    <div class="t-content">
      <div class="tese-item">
        以德修艺的课程理念
      </div>
      <div class="tese-item">
        多媒体可视化教学
      </div>
      <div class="tese-item">
        标准系统化课程体系
      </div>
      <div class="clear"></div>
      <div class="tese-item">
        多元兴趣化教学互动
      </div>
      <div class="tese-item">
        配套的家校APP
      </div>
      <div class="tese-item">
        强大的研发团队
      </div>
    </div>
  </div>

</div>