直接使用代码
图片素材
点击下载本素材所包含的图片，js文件
css代码
<style>
/* banner图+搜索 */
.com-lunbo-box{background-size:100%!important; background-position: center top; height:300px;margin-top:2px;}
.com-lunbo-box .l-arctype{padding-top:90px}
.com-lunbo-box .l-title{color:#fff;font-size:28px;font-weight: bold;}
.com-lunbo-box .com-tree{margin-top:111px;color:#fff;padding-bottom:20px}
.com-lunbo-box .com-tree a{color:#fff; font-size:16px}
.search-form-box{width:600px;background:#fff;border-radius:50px;height:45px;}
.search-form-box input{color:#e60012;display: inline-block; width: 515px;border:none;outline: none;margin-left:20px;line-height:40px;height:40px;font-size:16px;margin-top:0px}
.search-form-box button{height:40px;width:40px;padding-top:-2px;right:3px;background:none;border:none}
.search-form-box button img{margin-top:-3px}
.search-form input::-webkit-input-placeholder{color:#A7A7A7}
.search-form input::-moz-placeholder{color:#A7A7A7}
.search-form input:-moz-placeholder{color:#A7A7A7}
.search-form input:-ms-input-placeholder{color:#A7A7A7}
/* 主体内容 */
.com-content-box{padding:50px 0}
.com-content-box-bg2{background: #EBEFF1;}
.com-arctype-name2{margin:20px 0;color:#034b54;font-size:22px;font-weight: bold;letter-spacing: 1px;}
.contact-nav-box{margin:0 -30px}
.contact-nav{padding:10px 20px;border:1px solid #ccc;text-align: center; color: #333;cursor: pointer;}
.contact-nav .n-ico2{display: none;}
.contact-nav:hover {background:#ff4654 ; color:#fff}
.contact-current{background:#e60012 ; color:#fff}
.contact-nav img{width:35px;}
.contact-nav h4{display: inline-block;margin-left:10px}
.contact-nav:hover .n-ico1 ,.contact-current .n-ico1{display: none;}
.contact-nav:hover .n-ico2 ,.contact-current .n-ico2{display: inline-block;}
.form-box{background: #f5f6f9; padding:30px 50px;margin:30px -15px}
.form-box .form-item{clear: both;margin-bottom:20px; min-height: 30px;}
.auth-box{border-top:1px dashed #ddd;border-bottom:1px dashed #aaa;padding:10px 0; margin-top:30px}
.auth-box .des{color:#666;margin-bottom:30px}
.tabbox{display: none;}
.btn-submit{background: #e60012;color:#fff;padding:8px 30px;border:none;border-radius: 6px;font-size: 20px;}
.btn-submit:hover{background: #ff3e4d;}
.jianyi .des{color:#555;font-size: 19px;}
.jianyi .fright{color: #424242;}
.form-box .t-table{margin:50px -50px;}
.contact-info span {color:#424242;}
.com-table2{border-top:1px solid #ccc;}
.com-table2 th,.com-table2 td{padding-left:30px!important;font-size:15px}
.com-table2 thead tr th{ background: url('http://www.bootfastui.cn/img/2021/0322/banner55.jpg') no-repeat 100%; color:#f5f5f5;line-height: 40px;font-weight: bold;}
.com-table2 tbody tr{line-height: 36px;background: #EBEFF1;}
.com-table2 tbody tr:nth-child(2n){background: #f3f6f8;}
.com-table2 td{line-height: 38px!important;}
.com-table2 tbody tr:hover{background: #E5E5E5;}
</style>
HTML+JS代码
<section class="com-lunbo-box " style="background:url(http://www.bootfastui.cn/img/2021/0321-4/banner55.jpg) no-repeat;">
<div class="container ">
<div class="row l-arctype">
<div class="col-md-3 pm">
<h3 class="l-title">联系我们</h3>
</div>
<div class="col-md-9">
<div class="fright search-form-box hidden-xs">
<form class="search-form" method="post" enctype="multipart/form-data" action="/search">
<input type="text" name="keyword" autocomplete='off' placeholder="请输入您要搜索的内容...">
<button type="submit"><img src="http://www.bootfastui.cn/img/2021/0321-4/search.png" width="100%" alt=""></button>
</form>
</div>
</div>
<div class="com-tree ">
<a href="http://www.bootfastui.cn">首页</a> > <a href="http://www.bootfastui.cn">联系我们</a>
</div>
</div>
</div>
</div>
</section>
<div class="com-content-box ">
<div class="container">
<div class="row contact-nav-box">
<div class="col-md-20 ">
<div class="contact-nav contact-nav-bg2 contact-current">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c1.png" alt="" class="n-ico1">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c11.png" alt="" class="n-ico2">
<h4>购买咨询</h4>
</div>
</div>
<div class="col-md-20 ">
<div class="contact-nav ">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c2.png" alt="" class="n-ico1">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c22.png" alt="" class="n-ico2">
<h4>技术支持</h4>
</div>
</div>
<div class="col-md-20 ">
<div class="contact-nav contact-nav-bg2">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c3.png" alt="" class="n-ico1">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c33.png" alt="" class="n-ico2">
<h4>代理经销商</h4>
</div>
</div>
<div class="col-md-20 ">
<div class="contact-nav">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c4.png" alt="" class="n-ico1">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c44.png" alt="" class="n-ico2">
<h4>营业据点</h4>
</div>
</div>
<div class="col-md-20 ">
<div class="contact-nav contact-nav-bg2">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c5.png" alt="" class="n-ico1">
<img src="http://www.bootfastui.cn/img/2021/0322/ico_c55.png" alt="" class="n-ico2">
<h4>投诉与建议</h4>
</div>
</div>
</div>
<script>
$(function () {
$('.contact-nav').click(function () {
$('.contact-nav').removeClass('contact-current')
$(this).addClass('contact-current')
var index = $('.contact-nav').index($(this))
if (index == 3) {
$('.tabbox').hide().eq(2).show();
} else if (index == 4) {
$('input.type').val('投诉与建议')
$('.tabbox').hide().eq(0).show();
} else if (index == 0) {
$('input.type').val('购买咨询')
$('.tabbox').hide().eq(0).show();
} else if (index == 1) {
$('input.type').val('技术支持')
$('.tabbox').hide().eq(0).show();
} else if (index == 2) {
$('.tabbox').hide().eq(1).show();
}
})
var type = ""
if (type == 1) {
$('.contact-nav').removeClass('contact-current')
$('.contact-nav').eq(0).addClass('contact-current')
$('input.type').val('购买咨询')
$('.tabbox').hide().eq(0).show();
} else if (type == 2) {
$('.contact-nav').removeClass('contact-current')
$('.contact-nav').eq(1).addClass('contact-current')
$('input.type').val('技术支持')
$('.tabbox').hide().eq(0).show();
} else if (type == 3) {
$('.contact-nav').removeClass('contact-current')
$('.contact-nav').eq(1).addClass('contact-current')
$('input.type').val('技术支持')
$('.tabbox').hide().eq(0).show();
}
})
</script>
<div class="clear"></div>
<!-- 表单 -->
<div class="tabbox" style="display: block;">
<div class="row">
<p class="mar-top30 des f18">
Semiware为您提供帮助。如有疑问，我们的专家可为您解答。请仔细填写以下表格信息，方便我们的相关人员能及时了解您的需求，提交表格后，Semiware工作人员将尽快与您联系，满足您的需求。</p>
</div>
<div class="form-box ">
<form action="/Home//addMessage" method="POST" enctype="multipart/form-data">
<input type="hidden" value="样品及购买" name="product-types" class="type" />
<div class="fright com-color">* 为必填项</div>
<div class="form-item">
<div class="col-md-1 pm">
<span class="com-color">*</span>
<span>姓名</span>
</div>
<div class="col-md-6">
<input type="text" name="name" class="form-control" required>
</div>
</div>
<div class="form-item">
<div class="col-md-1 pm">
<span class="com-color">*</span>
<span>公司名称</span>
</div>
<div class="col-md-6">
<input type="text" name="company" class="form-control" required>
</div>
</div>
<div class="form-item">
<div class="col-md-1 pm">
<span class="com-color">*</span>
<span>电话</span>
</div>
<div class="col-md-6">
<input type="text" name="" class="form-control" required>
</div>
</div>
<div class="form-item">
<div class="col-md-1 pm">
<span class="com-color">*</span>
<span>邮箱</span>
</div>
<div class="col-md-6">
<input type="text" name="email" class="form-control" required>
</div>
</div>
<div class="form-item">
<div class="col-md-1 pm">
<span class="com-color">*</span>
<span>职务</span>
</div>
<div class="col-md-6">
<input type="text" name="job-title" class="form-control" required>
</div>
</div>
<div class="form-item">
<div class="col-md-1 pm">
<span class="com-color">*</span>
<span>内容</span>
</div>
<div class="col-md-10">
<textarea type="text" name="request" class="form-control" rows="4"></textarea>
</div>
<div class="clear"></div>
</div>
<div class="form-item">
<div class="col-md-1 pm">
<span class="com-color">*</span>
<span>验证码</span>
</div>
<div class="col-md-2">
<input type="text" name="verify" class="form-control fleft" required>
</div>
<img src="/admin/index/Verify" alt="验证码" style="cursor:pointer; float:left;"
onclick="javascritp:this.src='/admin/index/Verify?'+Math.random();" />
</div>
<div class="clear"></div>
<div class="clear"></div>
<div class=" clear" style="margin-top:40px">
<button type="submit" class="btn-submit">提交</button>
</div>
</form>
</div>
</div>
<script>
function check() {
var cks = $('input.xieyi:checked');
if (cks.length > 0) {
if ($('input.xieyi:checked').val() == '同意') {
return true;
} else {
alert('不同意提交资料，请知晓')
return false;
}
} else {
alert("请同意收集资料协议");
return false;
}
}
</script>
<!-- 代理经销商 -->
<div class="tabbox jianyi">
<div class="row">
<div class="com-arctype-name2">代理经销商</div>
<p class="des f18">
Semiware为您提供帮助,关于Semiware国内外代理商或经销商信息及其销售产品范围和销售区域，请与我们代理商管理相关人员联系，我们的工作人员将及时给您回复;联系电话：86-21-3463-7345 邮箱：sales17@semiware.com
</p>
<br/>
<div class="t-table">
<table class="table com-table2 ">
<thead>
<tr>
<th width='30%'>公司/部门</th>
<th width='40%'>地址</th>
<th width='15%'>电话</th>
<th width='15%'>邮箱</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="clear"></div>
</div>
<!-- 销售网络 -->
<div class=" tabbox">
<div class="row">
<h3 class="com-arctype-name2">上海总部</h3>
<div class="t-table">
<table class="table com-table2 ">
<thead>
<tr>
<th width='20%'>公司/部门</th>
<th width='40%'>地址</th>
<th width='20%'>电话号码</th>
<th width='20%'>电子邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>供应链管理</td>
<td>上海闵行区浦江科技园沈杜公路3387号</td>
<td>021-3463-7172-8827</td>
<td>tommy.tu@semiware.com</td>
</tr><tr>
<td>人力资源</td>
<td>上海闵行区浦江科技园沈杜公路3387号</td>
<td>021-3463-7172-8828</td>
<td>hr01@semiware.com</td>
</tr><tr>
<td>投诉与建议</td>
<td>上海闵行区浦江科技园沈杜公路3387号</td>
<td>021-3463-7173-8868</td>
<td>lywang@semiware.com</td>
</tr> </tbody>
</table>
</div>
<h3 class="com-arctype-name">生产基地</h3>
<div class="t-table">
<table class="table com-table2">
<thead>
<tr>
<th width='20%'>公司/部门</th>
<th>地址</th>
<th>电话号码</th>
<th>电子邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>赛米微尔-上海</td>
<td>上海闵行区浦江镇沈杜公路3387号</td>
<td>021-3463-7345</td>
<td>lywang@semiware.com</td>
</tr><tr>
<td>赛米微尔-芜湖</td>
<td>芜湖经济技术开发区万春街道欧阳湖路12号</td>
<td>18898355110</td>
<td>wangliyong@semiware.com</td>
</tr> </tbody>
</table>
</div>
<h3 class="com-arctype-name">销售中心</h3>
<div class="t-table">
<table class="table com-table2">
<thead>
<tr>
<th width='20%'>公司/部门</th>
<th>地址</th>
<th>电话号码</th>
<th>电子邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>深圳一部</td>
<td>深圳宝安群力二路1号民俗文化产业园1B03-1B04</td>
<td>0755-2708-3020</td>
<td>sywang@semiware.com</td>
</tr><tr>
<td>深圳二部</td>
<td>深圳宝安群力二路1号民俗文化产业园1B03-1B04</td>
<td>0755-2708-3320</td>
<td>sales10@semiware.com</td>
</tr><tr>
<td>华中地区</td>
<td>湖北省武汉市东湖高新区金融港汇金中心2期11A栋4楼</td>
<td>136-6189-9966</td>
<td>ray@semiware.com</td>
</tr><tr>
<td>华东区域</td>
<td>上海闵行区浦江科技园沈杜公路3387号</td>
<td>021-5484-1002</td>
<td>sales33@semiware.com</td>
</tr> </tbody>
</table>
</div>
<h3 class="com-arctype-name">技术支持</h3>
<div class="t-table">
<table class="table com-table2">
<thead>
<tr>
<th width='20%'>公司/部门</th>
<th>地址</th>
<th>电话号码</th>
<th>电子邮箱</th>
</tr>
</thead>
<tbody>
<tr>
<td>上海</td>
<td>上海闵行区浦江科技园沈杜公路3387号</td>
<td>021-3463-7173-8811</td>
<td>fae03@semiware.com</td>
</tr><tr>
<td>深圳</td>
<td>深圳宝安群力二路1号民俗文化产业园1B03-1B04</td>
<td>0755-2708-3020</td>
<td>fae06@semiware.com</td>
</tr><tr>
<td>武汉</td>
<td>湖北省武汉市东湖高新区金融港汇金中心2期11A栋4楼</td>
<td>153-3712-1940</td>
<td>fae11@semiware.com</td>
</tr><tr>
<td>免费热线</td>
<td>上海闵行区浦江科技园沈杜公路3387号</td>
<td>400-021-5756</td>
<td>fae01@semiware.com</td>
</tr> </tbody>
</table>
</div>
</div>
</div>
</div>
</div>
