直接使用代码
图片素材
点击下载本素材所包含的图片，js文件
css代码
<style>
.com-top { width:100%; height:auto; background: url(http://www.bootfastui.cn/img/2021/0308/bg.jpg) no-repeat center top; padding-top:5px;}
.com-top .box-logo{padding:20px 0}
.inav { width:100%; height:45px; background-color:#00907e;}
.inav ul.top-ul{margin:0;padding:0;background:url(http://www.bootfastui.cn/img/2021/0308/bg_nav.jpg) repeat-x; }
.inav ul.top-ul>li {position:relative;display:inline-block;height:45px; text-align:center;font-size:15px; line-height:45px; background: url(../images/fuxing_11.gif) no-repeat right center;}
.inav ul.top-ul>li>a { display:block; color:#FFF;padding:0 18.5px; }
.inav ul.top-ul>li>a:visited{text-decoration:none;}
.inav ul.top-ul>li>a:hover { background-color:#006635; text-decoration:none;}
.inav ul.top-ul li a.tsy { background-color:#006635; text-decoration:none;}
.inav ul.son-ul{position: absolute;top:45px;left:0;width:100px;z-index:9999;background: #00907e;display:none;width:150px;}
.inav ul.son-ul>li a { display:block; color:#FFF;text-align: left;padding-left:18.5px; border-bottom:1px solid #aaa;background:none }
.inav ul.son-ul>li a:visited{text-decoration:none;}
.inav ul.son-ul>li a:hover { background-color:#006635; text-decoration:none;}
.carousel-indicators{ bottom:20px; }
.carousel-indicators li{ background:#999; border:none;margin-right:10px}
.carousel-indicators li.active{ background:red;margin-right:10px}
</style>
HTML+JS代码
<div class="com-top">
<div class="hidden-xs">
<div class="container">
<div class="box-logo">
<img src='http://www.bootfastui.cn/img/2021/0308/logo.png' width="320" />
</div>
</div>
</div>
<div class="container hidden-xs">
<div class="inav ">
<div class='row'>
<div class="col-md-12">
<ul class="top-ul">
<li><a href="http://bootfastui.cn" class="tsy">网站首页</a></li>
<li class="top-li"><a href="http://bootfastui.cn">医院概况</a>
<ul class="son-ul">
<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>
</li>
<li class="top-li"><a href="http://bootfastui.cn">医院动态</a>
<ul class="son-ul">
<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>
</li>
<li class="top-li"><a href="http://bootfastui.cn">科室介绍</a>
<ul class="son-ul">
<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>
</li>
<li class="top-li"><a href="http://bootfastui.cn">专家介绍</a>
<ul class="son-ul">
<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>
<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>
<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>
</li>
<li class="top-li"><a href="http://bootfastui.cn">领导之窗</a>
<ul class="son-ul">
<li><a href="http://bootfastui.cn">领导之窗</a></li>
</ul>
</li>
<li class="top-li"><a href="http://bootfastui.cn">就医指南</a>
<ul class="son-ul">
<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>
</li>
<li class="top-li"><a href="http://bootfastui.cn">科研教学</a>
<ul class="son-ul">
<li><a href="http://bootfastui.cn">科研教学</a></li>
</ul>
</li>
<li class="top-li"><a href="http://bootfastui.cn">院务公开</a>
<ul class="son-ul">
<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>
</li>
<li class="top-li"><a href="http://bootfastui.cn">党建园地</a>
<ul class="son-ul">
<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>
</li>
<li class="top-li"><a href="http://bootfastui.cn">政策法规</a>
<ul class="son-ul">
<li><a href="http://bootfastui.cn">政策法规</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class='clear'></div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('.top-ul>li').hover(function () {
$(this).find('ul').slideDown('fast');
}, function () {
$(this).find('ul').slideUp('fast');
})
$('.son-ul').hover(function () {
$(this).stop().show();
}, function () {
$(this).slideUp('fast');
})
})
</script>
<!--新头部的结束-->
<!-- 轮播图 -->
<div class="container">
<div class='row'>
<div class="col-md-12">
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators hidden-xs">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active ">
<img src="http://bootfastui.cn/Public/images/banner1.jpg" alt="Second slide" width="100%">
</div>
<div class="item ">
<img src="http://bootfastui.cn/Public/images/banner2.jpg" alt="Second slide"
width="100%">
</div>
</div>
</div>
</div>
</div>
<!-- 轮播图结束 -->
</div>
</div>
<script type="text/javascript">
$(function () {
$(function () {
$('.carousel').carousel({
interval: 3000
});
});
})
</script>
