联系我们+公司分部

直接使用代码

图片素材

css代码

   <style>
@media screen and (max-width: 2700px){
    #lanmu_nav{ height:50px; line-height:50px}
    #lanmu_nav .daohang a{ display:inline-block; line-height:50px; padding:0 40px; color:#333}
    #lanmu_nav .daohang a.current{ color:#06f; border-bottom:1px solid #06f}
    }
    
    @media screen and (max-width: 738px) {
    #lanmu_nav{ height:50px; line-height:50px}
    #lanmu_nav .daohang a{ display:inline-block; line-height:50px; padding:0 5px; color:#333}
    #lanmu_nav .daohang a.current{ color:#06f; border-bottom:1px solid #06f}
    }
    
#message210525 .biaodan{ background:url(http://www.bootfastui.cn/img/2021/0525/bg_index.gif); padding:30px; margin:30px 0}
#message210525 .biaodan h2{ text-align:center}
#message210525 .biaodan h5{ text-align:center}

.myform  div.field { margin:15px 0}
.myform  div.field .lab{ display:inline-block; width:80px; text-align:left; vertical-align:top; line-height:30px}
.myform  input[type=text],.myform  input[type=password]{ height:30px; line-height:30px; background:#efefef;padding-left:8px; border:1px solid #ccc; width:100% }
.myform  select{ height:30px; padding:0 15px; background:#efefef; border:1px solid #ccc ; font-size:14px;}
.myform  select option{ font-size:14px;}
.myform  textarea{ border:1px solid #ccc; background:#efefef; padding:8px;resize: none;}
.btn-blue{ height:35px; line-height:35px; display:inline-block;  padding:0 45px; background:#ccc; color:#333; border:1px solid #ccc; font-size:15px;cursor:pointer; border-radius:4px; }/*鎸夐挳锛屽彲浠ュ拰閾炬帴a鏍囩?閫氱敤*/
.btn-blue:hover{ background:#06f; color:#fff}

#message210525 .contact h4{ color:#09f; line-height:50px; text-align:center}
#message210525 .contact .kuai{ margin:15px;}
#message210525 .contact .current .info,#list_message .contact .current h5{ color:#09f!important}
#message210525 .contact .kuai h5{ line-height:40px; border-bottom:1px solid #09f; color:#333; font-size:15px}
#message210525 .contact .kuai .info{ padding-left:25px; background:url(http://www.bootfastui.cn/img/2021/0525/bg_tel.png) left top no-repeat; color:#666; line-height:37px; min-height:80px;}
#message210525 img{ display:none}
#message210525 img:nth-child(1){ display:block}
</style>

HTML+JS代码

   
<section class=" container-fluid bk-bottom" id="lanmu_nav">
  <div class="container">
   <div class="row">
      <div class="col-md-8">
        <div class="daohang">
          <a href="">在线留言</a>
          <a href="" class="current">在线报名</a>

        </div>
      </div>
      <div class="col-md-4  visible-lg visible-md visible-sm text-right">
        <img src="http://www.bootfastui.cn/img/2021/0525/weizhi.jpg" />
        您当期位置：首页 > <span class="blue">在线报名</span>
      </div>
    </div>
  </div>
</section>

<section class="container" id="message210525"><br>

  <div class="biaodan">
    <h2>在线报名</h2>
    <h5>Online Registration</h5>
    <form action="" enctype="multipart/form-data" method="post" class="myform">
      <div class="col-md-6 field">
        <div class="col-md-2"><span class="red">*&nbsp;</span>姓名</div>
        <div class="col-md-10">
          <input type="text" name="username" required size="40" />
        </div>
      </div>

      <div class="col-md-6 field">
        <div class="col-md-2"><span class="red">*&nbsp;</span>电话</div>
        <div class="col-md-10">
          <input type="text" name="tel" required size="40" />
        </div>
      </div>

      <div class="col-md-6 field">
        <div class="col-md-2"><span class="red">*&nbsp;</span>地址</div>
        <div class="col-md-10">
         <input type="text" name="address" required size="40" />
        </div>
      </div>

      <div class="col-md-6 field">
        <div class="col-md-2"><span class="red">*&nbsp;</span>邮箱</div>
        <div class="col-md-10">
          <input type="text" name="email" required size="40" />
        </div>
      </div>

      <div class="col-md-12 field">
        <div class="col-md-1"><span class="red">*&nbsp;</span>内容</div>
        <div class="col-md-11">
          <textarea rows="5" name="content" style="width:100%"></textarea>
        </div>
      </div>

      <div class="col-md-6 field">
        <div class="col-md-2">&nbsp;</div>
        <div class="col-md-10">
          <input type="submit" class="btn-blue" value="提交" />&nbsp;&nbsp;
          <input type="reset" class="btn-blue" value="重置" />
        </div>
      </div>





    </form>
    <div class="clear"></div>
  </div>


  <div class="contact">
    <h4>各大区联系方式</h4>
    <div class="col-md-6 aa">
      <div class="kuai">
        <h5>北京总部</h5>
        <div class="info">
          联系电话：010-57094682/64800545<br />
          联系地址：北京朝阳区安立路洛克时代A座6A03<br />
          qq ：3169037882 /2037251617<br />
          联系人：李老师，程老师 </div>
      </div>
    </div>
    <div class="col-md-6 aa">
      <div class="kuai">
        <h5>河南分公司</h5>
        <div class="info">
          联系电话：0371-55052755/63883206 <br />
          联系地址：郑州市金水区东风路文博东路世博中心1201<br />
          qq ：854270703<br />
          联系人：宋老师 </div>
      </div>
    </div>
    <div class="col-md-6 aa">
      <div class="kuai">
        <h5>江苏分公司</h5>
        <div class="info">
          联系电话：18920209939/18920209686<br />
          联系地址：南京市河西区江东中路河西万达中心A座509<br />
          qq ：<br />
          联系人：杨老师，孙老师 </div>
      </div>
    </div>
    <div class="col-md-6 aa">
      <div class="kuai">
        <h5>武汉代表处</h5>
        <div class="info">
          联系电话：13469955279<br />
          联系地址：武汉市武昌区东湖路105号汉街总部国际D座13A09<br />
          qq ：<br />
          联系人：颜老师 </div>
      </div>
    </div>
    <div class="col-md-6 aa">
      <div class="kuai">
        <h5>长沙办事处</h5>
        <div class="info">
          联系电话：0731-82072535<br />
          联系地址：湖南省长沙市开福区北辰三角洲B1E1区2栋24039室<br />
          qq ：3372846034<br />
          联系人：杨老师 </div>
      </div>
    </div>
  </div>


  <div class="ditu margin15">
    <img src="http://www.bootfastui.cn/img/2021/0525/5b8c9041ca4c1.jpg" width="100%" />
    <img src="http://www.bootfastui.cn/img/2021/0525/5b8c9041ca4c1.jpg" width="100%" />
    <img src="http://www.bootfastui.cn/img/2021/0525/5b8c9041ca4c1.jpg" width="100%" />
    <img src="http://www.bootfastui.cn/img/2021/0525/5b8c9041ca4c1.jpg" width="100%" />
  </div>

</section>

<script type="text/javascript">
  $(function () {
    $('.contact .aa').hover(function () {
      $(this).addClass('current')
      $(this).siblings().removeClass('current');
      $num = $(this).index() - 1;
      $('.ditu img').hide().eq($num).show();

    })


  })
</script>