关于我们（pc版）

直接使用代码

图片素材

css代码

 <style>
.index1-main{width:762px;margin-left:50px;}
.index-block1{padding:90px 0;margin-top:-5px;background:url(http://www.bootfastui.cn/img/2021/0905/index1-bg.jpg) repeat-x center top;}
.index-tit{font-size:34px;font-weight:bold;color:rgba(51,51,51,1);}
.index-text{float:left;font-size:18px;margin-top:8px;line-height:24px;color:rgba(102,102,102,1);}
.inTit .rTitMore{line-height:24px;margin-top:10px;}
.index-text{float:left;font-size:18px;margin-top:8px;line-height:24px;color:rgba(102,102,102,1);}
.inTit .rTitMore{line-height:24px;margin-top:10px;}
.index-info{font-size:16px;color:rgba(136,136,136,1);line-height:26px;}
.index1-list{margin-top:42px;margin-bottom:60px;}
.index1-list .item{width:272px;float:left;text-align:center;height:80px;box-sizing:border-box;border-left:1px solid rgba(185,185,185,0.3);}
.inb1-video{height:100%;}
.inb1-main{position:absolute !important;text-align:center;height:960px;top:0;left:0;bottom:0;margin:auto;width:100%;z-index:10;}
.index1-list .item:first-child{border-left:none;margin-left:-59px;}
.inb1-main .inban-main{display:inline-block;text-align:left;margin:190px auto 0;}
.index1-list .item-num{margin-top:-6px;}
.index1-list .num{font-size:68px;font-family:Arial;font-weight:bold;color:rgba(37,101,216,1);line-height:60px;}
.index1-list .tip{font-size:16px;color:rgba(136,136,136,1);}
.index1-list .item-msg{font-size:14px;margin-top:8px;color:rgba(136,136,136,1);}
.index1-list2{margin-top:50px;margin-right:-40px;}
.index1-list2 .item{float:left;width:214px;height:20px;text-align:center;transition:0.36s;box-sizing:border-box;background:url(http://www.bootfastui.cn/img/2021/0905/index1-line.png) no-repeat left center;}
.index1-list2 .item:first-child{margin-left:-54px;background:none;}
.index1-list2 .item a:hover{color:#2565D8;}
.index1-list2 .icon{display:inline-block;padding-left:32px;font-size:18px;color:rgba(51,51,51,1);line-height:24px;}
.index1-list2 .icon1{background:url(http://www.bootfastui.cn/img/2021/0905/index1-icon1.png) no-repeat left center;}
.index1-list2 .icon2{background:url(http://www.bootfastui.cn/img/2021/0905/index1-icon2.png) no-repeat left center;}
.index1-list2 .icon3{background:url(http://www.bootfastui.cn/img/2021/0905/index1-icon3.png) no-repeat left center;}
.index1-list2 .icon4{background:url(http://www.bootfastui.cn/img/2021/0905/index1-icon4.png) no-repeat left center;}
.index1-btn{margin-top:66px;}
.index1-btn .btn-online{margin-left:8px;}
.btn2{width:200px;height:50px;font-size:16px;line-height:50px;display:inline-block;vertical-align:top;box-sizing:border-box;transition:0.36s;text-align:center;border-radius:2px;cursor:pointer;}
.btn-online{background-color:#19CA6E;color:#fff;}
.btn-online:hover{background-color:#08b058;color:#fff;}
.btn-gray{border:1px solid rgba(210,210,210,1);color:#333;line-height:48px;}
.btn-gray:hover{border:1px solid #2565D8;background-color:#2565D8;color:#fff;}

</style>

HTML+JS代码

 
  <section class="index-block1">
    <div class="inMain">
      <div class="index1-main">
        <div class="index-tit"><span class="marktext">混合与分离专家</span></div>
        <div class="inTit clearfix">
          <div class="index-text">
            <p class="marktext" mark-txt="text_3">天一生水，水泽万物！天一萃取，成人成己！</p>
          </div>
        </div>
        <div class="index1-list clearfix">
          <div class="item">
            <div class="item-num">
              <span class="num"><span class="marktext" mark-txt="text_4">3</span></span>
              <span class="tip">+</span>
            </div>
            <div class="item-msg">研究中心与现代生产中心</div>
          </div>
          <div class="item">
            <div class="item-num">
              <span class="num"><span class="marktext" mark-txt="text_5">40</span></span>
              <span class="tip">余项</span>
            </div>
            <div class="item-msg">自主研发专利</div>
          </div>
          <div class="item">
            <div class="item-num">
              <span class="num"><span class="marktext" mark-txt="text_6">30</span></span>
              <span class="tip">余套</span>
            </div>
            <div class="item-msg">高端机械加工设备</div>
          </div>
        </div>
        <div class="index-info">
          <p class="marktext" mark-txt="text_15942741415f06b15d17b7c">
            郑州XXXXXX有限公司成立于2005年，是一家集研发、生产、销售于一体的科技型企业，主要致力于液液混合与分离设备的研发和应用。产品广泛应用于精细化工、湿法冶金、制药和环保等多种领域。</p>
        </div>
        <div class="index1-list2 clearfix">
          <div class="item">
            <a href="http://www.bootfastui.cn" title="企业文化" target="_blank" class="icon icon1">企业文化</a>
          </div>
          <div class="item">
            <a href="http://www.bootfastui.cn" title="创新发展" target="_blank" class="icon icon2">创新发展</a>
          </div>
          <div class="item">
            <a href="http://www.bootfastui.cn" title="影像天一" target="_blank" class="icon icon3">影像天一</a>
          </div>
          <div class="item">
            <a href="http://www.bootfastui.cn" title="工艺研究" target="_blank" class="icon icon4">工艺研究</a>
          </div>
        </div>
        <div class="index1-btn">
          <a href="http://www.bootfastui.cn" title="企业介绍" target="_blank" class="btn2 btn-gray">详细了解天一</a>
          <a href="http://www.bootfastui.cn" onclick="openZoosUrl();" class="btn2 btn-online">在线预约考察</a>
        </div>
      </div>
    </div>
  </section>