锅炉页面导航栏
1.css部分
.header2 li { float: left; list-style-type: none; } .header2 li a{ display: block; text-align: center; width: 281px; height: 50px; margin: auto; color: white; font-size: 20px; line-height: 50px; text-decoration: none; background-color: black; opacity: 0.6; } .header2 li a:hover{ background-color: grey; } .header2 ul dropdown-menu:hover{ display: inline-list-item; background-color: #fff; color: black; }
2.HTML部分
<div class="header2"> <ul class="head"> <!-- <li><a></a></li>--> <li><a href="#">网站首页</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">产品中心</a></li> <li class="dropdown" id="accountmenu"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">客户案例<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#"></a></li> <li><a href="#"></a></li> <li class="divider"></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </li> <li><a href="#">售后服务</a></li> <li><a href="#">联系我们</a></li> </ul></div>
轮播图
1.css部分
.carousel-inner img { width: 100%; height: 100%;
2.HTML部分
<div id="demo" class="carousel slide" data-ride="carousel"> <!-- 指示符 --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- 轮播图片 --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="images/img_3.png"> </div> <div class="carousel-item"> <img src="images/img_4.png"> </div> <div class="carousel-item"> <img src="images/img_5.png"> </div> </div> <!-- 左右切换按钮 --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div>
3.js部分
<script type="text/javascript"> $(document).ready(function(){ $('#myCarousel').carousel() }) </script>