直接使用代码
图片素材
点击下载本素材所包含的图片，js文件
css代码
<style>
/* 第一首页 公用导航 */
ul{ padding:0;list-style:none}
.com-top{background: #fff;width:100%;height: 100px;background:#fff;z-index: 9999; position: fixed;top:0;box-shadow: 0 3px 3px #ccc;}
.com-top-current{box-shadow: 0 3px 3px #ccc;}
.com-top .nav-left{margin-left:197px}
.com-top img.logo{margin-right:10px;vertical-align:middle;float:left;width: 180px;margin:30px 0;margin-left:-13px}
/* 一级导航 */
ul.nav-one{ float:left;padding:0;margin:0; margin-left:0px;}
ul.nav-one>li{ display:inline-block;margin-left:15px; position:relative;padding:0 10px;}
ul.nav-one>li>a{ color:#000; display:inline-block; text-align:center;line-height: 97px;font-size:20px; }
ul.nav-one>li:hover>a {border-bottom:3px solid #E60012;line-height: 97px;}
/* 二级导航 */
.nav-two{ width:1100px; position:absolute; top:100px; left:-35px; z-index:9999 ;background:#ebeff1; padding:0px 0;margin:0; display:none
;padding-bottom:20px;padding-left:30px}
.nav-two h5 a{display:block;margin-top:20px; line-height: 30px;font-size:16px;font-weight:bold;color:#000}
ul.nav-three li{ line-height: 30px;; }
ul.nav-three li a{font-size: 15px;color: #757575;}
.com-top .nav-two a:hover{color:#E60012}
/* 导航右侧 */
.com-top .nav-right{float:right;width:285px;height:100px;text-align: right;display: flex; align-items: center;}
.com-top .nav-right span{display:inline-block;line-height: 30px;border-right:0px solid #fff;padding-right:0px;color:#fff;margin-right:0px;}
.com-top .nav-right a.lang{color:#000;display:inline-block;margin-left:15px;font-size: 15px;}
.com-top .nav-right a.lang:hover{color:#e60012}
.right-btn{display:inline-block; line-height:34px; text-align: center; width: 108px;height:34px;; color:#fff; border:none; margin:10px 0; cursor:pointer; font-size:15px;background:#E60012;border-radius: 5px;}
.right-btn:hover{background:#E60012;color:#fff}
/* 轮播+搜索 */
/* background: url(http://www.bootfastui.cn/img/2021/0307-2/ba3.jpg); background-size: 100% auto; */
.index-lunbo-box{position: relative; height: 350px;overflow: hidden;}
.index-search-position{position:absolute; top:120px;left:0;width: 100%;}
.index-search{width:600px;background:#fff;border-radius:50px;height:45px;}
.carousel-indicators{ top:315px; }
.carousel-indicators li{ background:#eee; border:none;margin-right:10px;width:54px;height:4px;border-radius: 2px;}
.carousel-indicators li.active{ background:#e60012;margin-right:10px;width:54px;height:4px;border-radius: 2px;top:-1px;position: relative;}
@media (min-width:1200px){
.index-lunbo-box{position: relative; height: 340px;overflow: hidden;}
.index-search{padding-top:5px}
.carousel-indicators{ top:315px; }
}
.carousel-inner .item{position: relative;}
/*搜索框*/
.index-form input::-webkit-input-placeholder{color:#A7A7A7}
.index-form input::-moz-placeholder{color:#A7A7A7}
.index-form input:-moz-placeholder{color:#A7A7A7}
.index-form input:-ms-input-placeholder{color:#A7A7A7}
.index-search input{color:#e60012;display: inline-block; width: 515px;border:none;outline: none;margin-left:20px;line-height:30px;font-size:16px;margin-top:0px}
.index-search button{height:40px;width:40px;padding-top:-2px;right:3px;background:none;border:none}
.index-search button img{margin-top:-3px}
.index-right{color:#fff;margin-top:-110px;text-align: right;letter-spacing:1px}
.index-right h3{font-size:32px}
.index-right .des{font-size: 18px;}
.index-right a.r-more{font-size:14px;color:#fff;display: inline-block;margin-top:50px;}
</style>
HTML+JS代码
<div class="clear hidden-xs" style="height:100px;"></div>
<div class="com-top hidden-xs">
<div class="container">
<div class="t-box">
<a href="http://bootfastui.cn"><img src="http://bootfastui.cn/Public/images/logo.png" class="logo" /></a>
<div class="nav-left">
<ul class="nav-one">
<li><a href="http://bootfastui.cn" class="pcmenu ">产品</a>
<div class="nav-two bk" style="border-top:none">
<div class="col-md-3">
<h5> <a>瞬态电压抑制器</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">高可靠性TVS二极管</a>
</li>
<li>
<a href="http://bootfastui.cn">通用TVS二极管</a>
</li>
<li>
<a href="http://bootfastui.cn">符合车规的TVS二极管</a>
</li>
<li>
<a href="http://bootfastui.cn">大功率系列TVS二极管</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>静电保护器件</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">聚合物静电抑制器</a>
</li>
<li>
<a href="http://bootfastui.cn">多层结构静电抑制器</a>
</li>
<li>
<a href="http://bootfastui.cn">单路和多路静电抑制器</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>陶瓷气体放电管</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">大通流气体放电管</a>
</li>
<li>
<a href="http://bootfastui.cn">适用于电源口防护的陶瓷放电管</a>
</li>
<li>
<a href="http://bootfastui.cn">适用于信号口防护的陶瓷放电管</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>保护用齐纳二极管</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">通用齐纳二极管</a>
</li>
<li>
<a href="http://bootfastui.cn">小信号Zeners</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="col-md-3">
<h5> <a>半导体放电管</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">通用半导体放电管</a>
</li>
<li>
<a href="http://bootfastui.cn">可编程电路保护器</a>
</li>
<li>
<a href="http://bootfastui.cn">PLED开路保护器</a>
</li>
<li>
<a href="http://bootfastui.cn">高可靠性半导体放电管</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>保护用压敏电阻</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">插件系列压敏电阻</a>
</li>
<li>
<a href="http://bootfastui.cn">表面贴装压敏电阻</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>自恢复保险丝</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">表面贴装型PPTC</a>
</li>
<li>
<a href="http://bootfastui.cn">引线型自恢复保险丝</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>可控硅和双向可控硅</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">灵敏触发型单向可控硅</a>
</li>
<li>
<a href="http://bootfastui.cn">标准单向可控硅</a>
</li>
<li>
<a href="http://bootfastui.cn">标准双向可控硅</a>
</li>
<li>
<a href="http://bootfastui.cn">四象限双向可控硅</a>
</li>
</ul>
</div>
<div class="clear"></div>
<div class="col-md-3">
<h5> <a>二极管和整流器</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">整流二极管</a>
</li>
<li>
<a href="http://bootfastui.cn">快恢复二极管</a>
</li>
<li>
<a href="http://bootfastui.cn">小信号开关管</a>
</li>
<li>
<a href="http://bootfastui.cn">肖特基二极管</a>
</li>
<li>
<a href="http://bootfastui.cn">整流桥</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>小信号和功率MOSFET</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">小信号Mosfets</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="http://bootfastui.cn" class="pcmenu ">应用</a>
<div class="nav-two bk" style="border-top:none">
<div class="col-md-3">
<h5> <a>汽车电子</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">汽车大灯</a>
</li>
<li>
<a href="http://bootfastui.cn">ADAS</a>
</li>
<li>
<a href="http://bootfastui.cn">车载影音娱乐系统</a>
</li>
<li>
<a href="http://bootfastui.cn">车内照明灯</a>
</li>
<li>
<a href="http://bootfastui.cn">遥控门锁</a>
</li>
<li>
<a href="http://bootfastui.cn">车载电池充电器</a>
</li>
<li>
<a href="http://bootfastui.cn">电池模块</a>
</li>
<li>
<a href="http://bootfastui.cn">储能系统</a>
</li>
<li>
<a href="http://bootfastui.cn">直流快速充电桩</a>
</li>
<li>
<a href="http://bootfastui.cn">交流充电桩</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>网络通讯</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">蜂窝基站</a>
</li>
<li>
<a href="">有源天线和小基站</a>
</li>
<li>
<a href="">基带单元</a>
</li>
<li>
<a href="http://bootfastui.cn">交换机</a>
</li>
<li>
<a href="http://bootfastui.cn">通讯电源</a>
</li>
<li>
<a href="http://bootfastui.cn">机顶盒</a>
</li>
<li>
<a href="http://bootfastui.cn">电话</a>
</li>
<li>
<a href="http://bootfastui.cn">通讯模块</a>
</li>
<li>
<a href="http://bootfastui.cn">室外AP</a>
</li>
<li>
<a href="http://bootfastui.cn">室内AP</a>
</li>
</ul>
</div>
<div class="col-md-3">
<h5> <a>消费类电子</a></h5>
<ul class="nav-three ">
<li>
<a href="http://bootfastui.cn">蓝牙耳机</a>
</li>
<li>
<a href="/applications-info/ e-cigarette">电子烟</a>
</li>
<li>
<a href="http://bootfastui.cn">智能手表</a>
</li>
<li>
<a href="http://bootfastui.cn">手机</a>
</li>
<li>
<a href="http://bootfastui.cn">智能锁</a>
</li>
<li>
<a href="http://bootfastui.cn">平板电脑</a>
</li>
<li>
<a href="http://bootfastui.cn">电脑</a>
</li>
<li>
<a href="http://bootfastui.cn">电动自行车</a>
</li>
<li>
<a href="http://bootfastui.cn">无人机</a>
</li>
<li>
<a href="http://bootfastui.cn">VR眼镜</a>
</li>
</ul>
</div>
</div>
</li>
<li><a href="http://bootfastui.cn" class="pcmenu ">质量</a> </li>
<li><a href="http://bootfastui.cn" class="pcmenu ">支持</a> </li>
<li><a href="http://bootfastui.cn" class="pcmenu ">关于</a> </li>
<li><a href="http://bootfastui.cn" class="pcmenu ">新闻</a></li>
<li><a href="http://bootfastui.cn" class="pcmenu ">人才</a></li>
<li><a href="http://bootfastui.cn" class="pcmenu ">联系</a>
</ul>
</li>
</ul>
</div>
<div class="fright">
<!-- 导航右侧 -->
<div class="nav-right">
<a href="http://bootfastui.cn" class="right-btn fleft radius100">登录/注册</a>
<div class="mar-left30 fright">
<span><a href="http://bootfastui.cn" class="lang"><img src="http://www.bootfastui.cn/img/2021/0307-2/langage2.png"
width="35" alt="">
</a><a href="http://bootfastui.cn" class="lang">简体中文</a></span>
</div>
</div>
<div class="clear"></div>
<script type="text/javascript">
var a = document.body.innerHTML;
document.body.innerHTML = a.replace(/\ufeff/g, "");
$(function () {
$('.pcmenu').hover(function () {
$(this).siblings('.nav-two').slideDown('fast');
}, function () {
$(this).siblings('.nav-two').slideUp('fast');
})
$('.nav-two').hover(function () {
$(this).stop().show();
}, function () {
$(this).slideUp('fast');
})
$('.nav-two li').hover(function () {
$(this).find('ul').stop().show();
}, function () {
$(this).find('ul').hide();
})
})
</script>
</div>
</div>
</div>
</div>
<!-- com-top end -->
<!-- 轮播+搜索 -->
<div class="index-lunbo-box ">
<div id="myCarousel" class="carousel slide pad_010 b_k" data-ride="carousel">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner ">
<div class="item active">
<img src="http://www.bootfastui.cn/img/2021/0307-2/ban2.png" alt="" class="pm" width="100%">
<!-- 搜索 -->
<div class="index-search-position">
<div class="container">
<div class="index-search hidden-xs">
<form class="index-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/0307-2/search.png" width="100%"
alt=""></button>
</form>
</div>
<!-- 右侧内容 -->
<div class="index-right fright">
<h3>保护器件研发</h3>
<p class="des mar-y30">从材料到先进制造工艺，我们完善了十余条<br />电路保护产品线</p>
<a href="http://bootfastui.cn" class="r-more">了解更多 ></a>
</div>
</div>
</div>
</div>
<div class="item ">
<img src="http://www.bootfastui.cn/img/2021/0307-2/ban3.png" alt="" class="pm" width="100%">
<!-- 搜索 -->
<div class="index-search-position">
<div class="container">
<div class="index-search hidden-xs">
<form class="index-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/0307-2/search.png" width="100%"
alt=""></button>
</form>
</div>
<!-- 右侧内容 -->
<div class="index-right fright">
<h3>EMC整改技术与服务 </h3>
<p class="des mar-y30">十余载，我们的EMC工程师为各行业提供了<br />数百次的EMC整改服务</p>
<a href="http://bootfastui.cn" class="r-more">了解更多 ></a>
</div>
</div>
</div>
</div>
<div class="item ">
<img src="http://www.bootfastui.cn/img/2021/0307-2/ban1.png" alt="" class="pm" width="100%">
<!-- 搜索 -->
<div class="index-search-position">
<div class="container">
<div class="index-search hidden-xs">
<form class="index-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/0307-2/search.png" width="100%"
alt=""></button>
</form>
</div>
<!-- 右侧内容 -->
<div class="index-right fright">
<h3>行业解决方案</h3>
<p class="des mar-y30">数年来，我们为各行业提供了1000多个<br />电路保护解决方案</p>
<a href="http://bootfastui.cn" class="r-more">了解更多 ></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!--carousel end -->
</div>
