直接使用代码
图片素材
点击下载本素材所包含的图片，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}
/* 轮播导航 */
.product-nav{position: relative; bottom:-8px;left:0;height:70px;background:#034b54;overflow: hidden;}
.product-nav .fix-box{position: relative; overflow: hidden;width:1090px;margin-left:40px;height:60px;top:5px}
.product-nav .fix-box .links{white-space: nowrap;}
.product-nav .right_ico,.product-nav .left_ico{position: absolute;right:0;top:18px;height:33px;cursor: pointer;width:30px;background: #7c7e84;border-radius: 4px;}
.product-nav .left_ico{left:0;}
.product-nav .right_ico img, .product-nav .left_ico img{width:13px;margin:7px;display: block;}
.product-nav .p-item-nav{display:inline-block; color:#fff;font-size:15px;;margin-right:20px;cursor: pointer;background: #7c7e84;padding:5px 20px;border-radius: 4px;margin-top:15px;;}
.product-nav .current{background: #e60012; }
.product-nav .row{white-space:nowrap;overflow:hidden}
/* 产品分类 */
.com-arctype-name{margin:30px 0;color:#034b54;font-size:22px;font-weight: bold;letter-spacing: 1px;display: inline-block;border-bottom:2px solid #e60012;line-height: 40px;}
.product-index-item{padding:10px 0 60px 0}
.product-index-item-bg2{background: #EBEFF1;}
.product-index-item .l-title{color:#505050;font-weight: bold;font-size: 25px;}
.product-index-item .l-img{margin-top:60px}
.product-index-item .des{line-height: 30px; font-size:15px;color:#505050;letter-spacing:1px;padding-top:0}
.product-index-item .r-links{margin-top:30px}
.com-btn-link2{display:inline-block; color:#fff;font-size:15px;;margin-right:20px;cursor: pointer;background: url('http://www.bootfastui.cn/img/2021/0317/banner55.jpg');padding:7px 25px;border-radius: 4px;margin-top:15px;;}
.com-btn-link2:hover{background: #e60012; color:#fff}
.product-index-item a.right-more{color:#505050;display: inline-block;float: right;line-height:30px;font-size:14px; margin-top:20px}
.product-index-item a.right-more:hover{color:#e60012}
</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>
<nav class="product-nav">
<div class="container">
<div class="row relative">
<div class="fix-box">
<div class="links">
<a href="http://www.bootfastui.cn" class="p-item-nav current">
瞬态电压抑制器 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
静电保护器件 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
陶瓷气体放电管 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
保护用齐纳二极管 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
半导体放电管 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
保护用压敏电阻 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
自恢复保险丝 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
可控硅和双向可控硅 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
二极管和整流器 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
小信号及功率MOSFET </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
集成电路 </a><a href="http://www.bootfastui.cn" class="p-item-nav ">
双极性晶体管 </a>
</div>
</div>
<div class="right_ico"> <img src="http://www.bootfastui.cn/img/2021/0317/ico_right3.png" alt=""></div>
<div class="left_ico"> <img src="http://www.bootfastui.cn/img/2021/0317/ico_left3.png" alt=""></div>
</div>
</div>
</nav>
</section>
<script>
$(function () {
$('.p-item-nav').click(function () {
$('.p-item-nav').removeClass('current')
$(this).addClass('current')
})
var left = 0
$('.right_ico ').click(function () {
left = left - 200
$(".links").animate({ "margin-left": left + 'px' });
})
$('.left_ico ').click(function () {
if (left < 0) {
left = left + 200
$(".links").animate({ "margin-left": left + 'px' });
}
})
})
</script>
<!-- 主体列表 -->
<div class="product-index-item " id="2">
<div class="container">
<div class="row">
<div class="col-md-9 pm">
<a href="http://www.bootfastui.cn">
<div class="com-arctype-name">瞬态电压抑制器 </div>
</a>
<p class="des">
Semiware
的钳位型TVS瞬态抑制二极管系列产品能够有效地保护电子线路中的精密元器件，免受各种浪涌脉冲或者ESD静电的损坏。TVS（瞬态电压抑制管）对过电压峰值具有较快的响应速度。其动态内阻低，钳位性能好。Semiware
提供不同封装的TVS产品，工作电压范围为3.3 ~ 600V(甚至更高)。主要适用于通讯，安防，消费类电子等领域中数据传输线的单向或双向传输。 </p>
<div class="r-links">
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
高可靠性TVS二极管</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
通用TVS二极管</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
符合车规的TVS二极管</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
大功率系列TVS二极管</a>
</div>
<a href="http://www.bootfastui.cn" class="right-more">了解更多</a>
</div>
<div class="col-md-3 ">
<div class="l-img">
<img src="http://www.bootfastui.cn/img/2021/0317/6031cb591ff89.png" width="100%" alt="" style="max-height: 230px;">
</div>
</div>
</div>
</div>
</div>
<!-- item end -->
<div class="product-index-item product-index-item-bg2" id="3">
<div class="container">
<div class="row">
<div class="col-md-9 pm">
<a href="http://www.bootfastui.cn">
<div class="com-arctype-name">静电保护器件 </div>
</a>
<p class="des">
Semiware
的ESD静电保护技术涵盖单路ESD保护、多路ESD保护以及复合型保护等，采用业界更小的封装提供最高级别的保护，同时最大程度地减少对信号完整性的负面影响。产品具有良好的钳位性能和较低的电容(1pF以下)，能满足高速数据接口应用的质量要求。Semiware
在ESD解决方案中为电容、外形结构和脉冲负载能力提供了很高的设计灵活性，可用于手机，TWS，视频监控，通讯，消费类电子等不同的应用需求。 </p>
<div class="r-links">
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
聚合物静电抑制器</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
多层结构静电抑制器</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
单路和多路静电抑制器</a>
</div>
<a href="http://www.bootfastui.cn" class="right-more">了解更多</a>
</div>
<div class="col-md-3 ">
<div class="l-img">
<img src="http://www.bootfastui.cn/img/2021/0317/6031cb591ff89.png" width="100%" alt="" style="max-height: 230px;">
</div>
</div>
</div>
</div>
</div>
<!-- item end -->
<div class="product-index-item " id="4">
<div class="container">
<div class="row">
<div class="col-md-9 pm">
<a href="http://www.bootfastui.cn">
<div class="com-arctype-name">陶瓷气体放电管 </div>
</a>
<p class="des">
Semiware 的气体放电管 (GDTs) 适用于保护人体以及敏感设备以避免被遭受瞬变电压的危害。GDT技术能够处理非常高的浪涌电流，具有非常高的断态绝缘阻力，击穿电压范围从70-3600
V。同时Semiware先进的生产技术，能够提供更小型的封装外形，但是具有更高的浪涌吸收能力，为客户小型化和快速贴片化提供了更好的解决方案。Semiware 的气体放电管 (GDTs)
可满足甚至超越所有气体放电管产业规格制定的标准。
</p>
<div class="r-links">
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
大通流气体放电管</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
适用于电源口防护的陶瓷放电管</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
适用于信号口防护的陶瓷放电管</a>
</div>
<a href="http://www.bootfastui.cn" class="right-more">了解更多</a>
</div>
<div class="col-md-3 ">
<div class="l-img">
<img src="http://www.bootfastui.cn/img/2021/0317/6031cb591ff89.png" width="100%" alt="" style="max-height: 230px;">
</div>
</div>
</div>
</div>
</div>
<!-- item end -->
<div class="product-index-item product-index-item-bg2" id="5">
<div class="container">
<div class="row">
<div class="col-md-9 pm">
<a href="http://www.bootfastui.cn">
<div class="com-arctype-name">保护用齐纳二极管 </div>
</a>
<p class="des">
Semiware
的稳压二极管产品与其他器件一样非常重要，甚至能够在要求更严苛的应用中使用。我们不断技术积累，降低功耗，缩小尺寸，并提升性能和可靠性，使客户更加青睐我们的产品。这让您始终能够满足竞争激烈的市场不断增长的需求。我们广泛的产品组合及技术资源，提供各种电压、封装和配置选项。实际上，我们全面的选择（1500多种产品类型）使您可以在小规模、高密度电路设计中选择定制设计。
</p>
<div class="r-links">
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
通用齐纳二极管</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
小信号Zeners</a>
</div>
<a href="http://www.bootfastui.cn" class="right-more">了解更多</a>
</div>
<div class="col-md-3 ">
<div class="l-img">
<img src="http://www.bootfastui.cn/img/2021/0317/6031cb591ff89.png" width="100%" alt="" style="max-height: 230px;">
</div>
</div>
</div>
</div>
</div>
<!-- item end -->
<div class="product-index-item " id="6">
<div class="container">
<div class="row">
<div class="col-md-9 pm">
<a href="http://www.bootfastui.cn">
<div class="com-arctype-name">半导体放电管 </div>
</a>
<p class="des">
Semiware 的半导体放电管 (TSS) 系列产品具有快速的响应速度和良好的抗峰值过电压的箝位能力。低漏电流(mA~ 100μA)和结电容(10 ~ 100
pf)的特性可以满足数据传输和低功耗电路的质量要求。根据不同的应用需求，Semiware 提供SMD封装和DIP封装类型的半导体放电管产品。Semiware
的半导体放电管主要面向四大主要终端市场：有线基础设施、无线通信、企业存储和工业等，提供多种应用。其多样化的产品组合包括：用于机顶盒／CMTS的半导体、电调制解调器和PON／DSL以太网NIC、光纤解决方案。 </p>
<div class="r-links">
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
通用半导体放电管</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
可编程电路保护器</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
PLED开路保护器</a>
<a href="http://www.bootfastui.cn" class="com-btn-link2 com-img">
高可靠性半导体放电管</a>
</div>
<a href="http://www.bootfastui.cn" class="right-more">了解更多</a>
</div>
<div class="col-md-3 ">
<div class="l-img">
<img src="http://www.bootfastui.cn/img/2021/0317/6031cb591ff89.png" width="100%" alt="" style="max-height: 230px;">
</div>
</div>
</div>
</div>
</div>
