导航栏各项点击滑至对应区域

麦子网站购买视频

做一个响应式页面：

1.引入

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="css/bootstrap.min.css" />

<script src="js/jquery-2.1.1.js"></script>

<script src="js/bootstrap.min.js"></script>

2.导航栏

导航栏添加链接连接div设置id，

<nav class="nav navbar-default navbar-fixed-top">
<div class="container">
<!--小屏幕按钮和logo-->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.hmtl" class="navbar-brand">彗星</a>
</div>
<!--小屏幕按钮和logo-->
<!--导航-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">首页</a></li>
<li><a href="#luntan">论坛</a></li>
<li><a href="#html5">html5</a></li>
<li><a href="#newCourse">最新课程</a></li>
<li><a href="#connect">联系</a></li>
</ul>
</div>
</div>
</nav>

3.div（section）

<!--home-->
<section id="home">
<div class="lvjing">
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<h1>彗星播报</h1>
<p>ICO投行服务利润诱人，灰色产业链导致ICO币圈内幕交易重重</p>
<img src="img/1-1FR2115145533.jpg" class="img-responsive" />
</div>
<div class="col-md-1"></div>

</div>
</div>
</div>
</section>
<!--luntan-->
<section id="luntan">
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="https://www.baidu.com" >
<img src="img/xn_m_6_markrt_sky.png" alt="" />
<h3>电话adaesgshdfh</h3>
</a>
</div>
<div class="col-md-4">
<img src="img/xn_m_6_markrt_qq.png" alt="" />
<h3>qqhnfgkjhl</h3>
</div>
<div class="col-md-4">
<img src="img/xn_m_6_markrt_sky.png" alt="" />
<h3>地址jghkccggdhbdxjfc</h3>
</div>
</div>
</div>
</section>

4.js

body{
font-family: "微软雅黑";
}
.navbar-default {border: none;
background-color: white;
box-shadow: 0px 2px 8px 0px rgba(50, 50, 50, 0.2);
}
#home{
background: url(../img/CgAGS1iqTeeANqulAAEYlEtxynw937.jpg);
/*height: 500px;*/
background-size: cover;
margin-top: 50px;
color: #ffffff;
text-align: center;
width: 100%;
}
/*背景滤镜透明度*/
.lvjing{
width: 100%;
height: 100%;
background: rgba(0,0,0,0.4);
padding: 90px 0;
}
#home h1{
color: wheat;
}
#home p{
line-height: 30px;
font-weight: 40px;
color: wheat;
}
#home img{
display: inline-block;
margin-top: 30px;
}
#luntan{
padding: 80px 0;
text-align: center;
}
#luntan h3{
font-weight: bold;
}
#luntan a{
text-decoration: none;
}
#luntan .col-md-4:hover{
padding: 15px;
box-shadow: 1px 1px 4px #ccc;
background-color: goldenrod;
}

/*html5*/
#html5 {
background-color: #F8F8F8;
padding: 80px 0;
text-align: center;
}
#html5 .col-md-6{
text-align: left;
}
.maizi-icon{
background: #6ba3d4fa;
color: #fff;
width: 40px;
height: 40px;
border-radius: 50%;
text-align: center;
line-height: 40px;
margin-right: 20px;
}
/*课程*/
#newCourse{
padding-top: 50px;
background-color: #F8F8F8;
text-align: center;

}
#newCourse h2{

font-weight:bold;
padding-bottom:30px ;
}
.course {
margin-left: 20px;
padding-bottom: 50px;
}
.course a{
margin-top: 20px;
display: block;
border: solid 1px #337ab7;
width: 80px;
text-align: center;
text-decoration: none;
margin-left: 80px;
}
.course a:hover{
color:white ;
background-color: #337ab7;
}
/*联系*/
#connect{
background: url(../img/case.jpg) no-repeat;
background-size:cover;
}