直接使用代码
图片素材
点击下载本素材所包含的图片,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;}
.com-des{font-size:15px;line-height: 28px;color:#666}
.qualitys-item .des{font-size:18px;margin-top:20px;padding-bottom:20px}
/* 图片 */
.com-img .com-hover2{display: none;}
.com-img:hover .com-hover{display: none;}
.com-img:hover .com-hover2{display:inline-block;}
/* 链接框 */
.com-btn-link{display: inline-block;padding:13px 15px;border:1px solid #9e9e9e;color:#454344;margin-right:50px;font-size:14px;font-weight: ;margin-bottom:20px}
.com-btn-link:hover{background: #e60012;color:#fff;}
.com-table th,.com-table td{padding-left:30px!important;font-size:15px}
.com-table thead tr th{ background:url('http://www.bootfastui.cn/img/2021//0321/banner55.jpg'); color:#fff;line-height: 40px;;}
.com-table tbody tr{line-height: 36px;background: #EBEFF1;}
.com-table tbody tr:nth-child(2n){background: #E5E5E5;}
.com-table td{line-height: 38px!important;}
.com-table tbody tr:hover{background: #E5E5E5;}
</style>
HTML+JS代码
<section class="com-lunbo-box " style="background:url(http://www.bootfastui.cn/img/2021/0317/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/0317/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 class="clear"></div>
</section>
<div class="container">
<div class="com-content-box">
<div class="row qualitys-item">
<div class="col-md-7 pm">
<h3 class="com-arctype-name2 " style="margin-top:-00px">质量管理体系</h3>
<div class="com-des">
Semiware
致力于制造超越行业标准的高性能产品,在技术上优于竞争对手,并为我们的客户提供价值和满意度。通过建立和审查关键的质量绩效措施和目标,我们始终专注于质量保证,并不断提高我们的组织绩效和能力,生产高质量的产品。
</div>
<div class="mar-top50">
<a href="http://www.bootfastui.cn" class="com-btn-link com-img">
<img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" width="25" alt="" class="com-hover">
<img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf2.png" width="25" alt="" class="com-hover2">
IATF16949 汽车行业质量体系认证</a>
<a href="http://www.bootfastui.cn" class="com-btn-link com-img">
<img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" width="25" alt="" class="com-hover">
<img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf2.png" width="25" alt="" class="com-hover2">
ISO9001 质量管理体系认证</a>
</div>
</div>
<div class="col-md-4 col-md-offset-1">
<img src="http://www.bootfastui.cn/img/2021/0321/s4.png" alt="" width="100%">
</div>
</div>
</div>
</div>
<!-- 功能框图 -->
<div class="com-content-box com-content-box-bg2">
<div class="container">
<div class="row qualitys-item">
<div class="col-md-6 pm">
<h3 class="com-arctype-name2 " style="margin-top:-00px">可靠性</h3>
<div class="com-des">
Semiware
拥有一批具有丰富经验的高素质专业人才,始终以先进科学的测试方法,严谨高效的工作态度,为公司和客户提供可靠有效的测试结果。可靠性实验室日常测试项目:快速温变、恒温恒湿、HAST、蒸汽老化、盐雾、跌落、振动等。可满足公司产品性能、产品开发、产品特性等研究性测试要求。
</div>
<div class="mar-top50">
<a href="http://www.bootfastui.cn" class="com-btn-link com-img">
<img src="http://www.bootfastui.cn/img/2021/0321/ico_download.png" width="25" alt="" class="com-hover">
<img src="http://www.bootfastui.cn/img/2021/0321/ico_download2.png" width="25" alt="" class="com-hover2">
可靠性实验项目</a>
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<img src="http://www.bootfastui.cn/img/2021/0321/S41.png" alt="" width="100%">
</div>
</div>
</div>
</div>
<div class="container ">
<div class="hidden-xs">
<br /> <br /> <br />
</div>
<div class="row">
<div class="qualitys-item">
<h3 class="com-arctype-name2 " style="margin-top:-00px">失效分析</h3>
<div class="com-des">
如果您遇到产品问题并需要帮助,我们的故障分析团队将提供服务。请与您当地的销售代表联系,以完成我们的《失效分析要求表》,然后将其提交给我们的客户服务部门。我们将努力尽快评估和解决您的问题。
</div>
</div>
<div class="mar-top50">
<a href="http://www.bootfastui.cn" class="com-btn-link com-img">
<img src="http://www.bootfastui.cn/img/2021/0321/ico_download.png" width="25" alt="" class="com-hover">
<img src="http://www.bootfastui.cn/img/2021/0321/ico_download2.png" width="25" alt="" class="com-hover2">
失效分析要求表</a>
</div>
<h3 class="com-arctype-name2">环保及可靠性</h3>
<table class="table table-bordered com-table">
<thead>
<tr>
<th width='25%'>文档名称</th>
<th width='40%'>标题</th>
<th width='15%'>类型</th>
<th width='20%'>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" alt="" width="25">
TSS-Reach.pdf</a></td>
<td>半导体放电管产品Reach认证报告</td>
<td> Quality document</td>
<td>2021-02-10</td>
</tr>
<tr>
<td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" alt="" width="25">
TVS-RoHS.pdf</a></td>
<td>TVS二极管产品RoHS认证报告</td>
<td> Quality document</td>
<td> 2021-02-10</td>
</tr>
<tr>
<td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" alt="" width="25">
TVS-Reach.pdf</a></td>
<td>TVS二极管产品Reach认证报告</td>
<td> Quality document</td>
<td> 2021-02-10</td>
</tr>
</tbody>
</table>
<h3 class="com-arctype-name2">安规认证</h3>
<table class="table table-bordered com-table">
<thead>
<tr>
<th width='25%'>文档名称</th>
<th width='40%'>标题</th>
<th width='15%'>类型</th>
<th width='20%'>日期</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" alt="" width="25">
GDT-UL.pdf</a></td>
<td>陶瓷放电管产品UL认证报告</td>
<td> Safety certification</td>
<td> 2021-02-10</td>
</tr>
<tr>
<td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" alt="" width="25">
CQC-MOV-14D.pdf</a></td>
<td>14D系列压敏电阻CQC认证报告</td>
<td> Safety certification</td>
<td>2021-02-10 </td>
</tr>
<tr>
<td><a href="http://www.bootfastui.cn"><img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" alt="" width="25">
CQC-MOV-10D.pdf</a></td>
<td>10D系列压敏电阻CQC认证报告</td>
<td> Safety certification</td>
<td>2021-02-25 </td>
</tr>
<tr>
<td><a href="http://www.bootfastui.cn" ><img src="http://www.bootfastui.cn/img/2021/0321/ico_pdf.png" alt="" width="25">
CQC-MOV-07D.pdf</a></td>
<td>07D系列压敏电阻CQC认证报告</td>
<td> Safety certification</td>
<td>2021-02-25 </td>
</tr>
</tbody>
</table>
</div>
</div>