老师，我的下拉菜单怎么被图片挡住了啊，还有它的过渡怎么做啊
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,maximum-scale=1,minimum-scale=1,user-scalable=no">
<title>Document</title>
<link rel="stylesheet" href="css.css">
<script type="text/javascript" src="Jquery3.3.3.js"></script>
<script type="text/javascript" src="js.js"></script>
</head>
<body>
<header>
<nav>
<a href="" class="active">前端</a>
<a href="">java</a>
<a href="">ios</a>
<a href="">android</a>
<a href="">php</a>
</nav>
<div class="btn"></div>
<img src="img/1.png">
<p>IMOOC</p>
<button>start</button>
</header>
<section class="second">
<div class="active">关于慕课网</div>
<div>关于课程</div>
<div>核心团队</div>
<div>新增专题</div>
</section>
<section class="third">
<h3>响应式</h3>
<p>当前最领先的响应式自主建站平台，我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。无论您是普通互联网用户，还是专业网站制作人员，都能使用起飞页设计出最具专业水准的网站。想创建一个简单的单页式站点，还是一个专业的公司网站，亦或是一个别具一格的博客？起飞页可以满足您的所有需求。我们是响应式网站的倡导者，所有前端页面代码均采用HTML5和CSS3实现。起飞页提供了海量精美网站模板和成品网站，几乎覆盖了当今各个行业，您只需在模板上进行少量修改，即可完成子级的网站，这一切都是免费的。</p>
</section>
<section class="fourth">
<div class="left">IMOOC</div>
<div class="right">welcome to www.imooc.com</div>
</section>
<section class="fifth">
<p>主打课程</p>
<div>
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
<img src="img/6.jpg" alt="">
</div>
</section>
<footer>
Copyright ©right; 2017 imooc.com All Rights Reserved
</footer>
</body>
</html>
css部分
*{
padding: 0;
margin: 0;
outline: 0;
}
a{
text-decoration:none;
}
header{
width: 100%;
height: 500px;
background-color: #B2C5CC;
text-align: center;
}
nav{
width: 70%;
height: 70px;
color: #757575;
font-size: 18px;
margin: 0 auto;
line-height: 70px;
display:flex;
}
nav a{
color: #757575;
}
nav a.active{
color: #afafaf;
}
nav > a{
display: inline-block;
flex: 1;
}
header p{
color: rgb(255, 255, 255);
}
header img,header button{
display: block;
margin: 0 auto;
padding-top: 40px;
}
header button{
background-color: rgb(255, 255, 255);
width: 200px;
height: 50px;
padding: 8px;
font-size: 15px;
letter-spacing: 3px;
border:none;
margin-top: 50px;
}
.second{
height: 60px;
border-bottom: 1px solid #afafaf;
display: flex;
text-align: center;
}
.second > div{
flex: 1;
height: 60px;
line-height: 60px;
color: #bababa;
font-size: 18px;
}
.second > div.active{
color: #545454;
}
.third{
height: 500px;
text-align: center;
}
.third h3{
font-size: 26px;
letter-spacing: 2px;
margin:90px 0 20px 0;
color: #545454;
}
.third p{
width: 70%;
margin: 0 auto;
text-align:left;
line-height: 30px;
font-size: 14px;
color: #545454;
}
.fourth{
display: flex;
height: 60px;
background-color: #bababa;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}
.fourth > div{
font-size: 14px;
color: #545454;
}
.fifth{
height: 600px;
padding: 60px 35px 30px;
background: url(img/bg.jpg) center center no-repeat;
background-size: 100% 100%;
text-align: center;
}
.fifth p{
margin-left: 28px;
text-align: left;
}
.fifth img{
width: 30%;
height: 150px;
display: inline-block;
margin: 7px;
}
footer{
height: 60px;
line-height: 60px;
font-size: 14px;
text-align: center;
}
@media screen and (max-width:600px){
nav{
flex-direction:column;
width: 100%;
}
nav a{
height: 40px;
line-height: 40px;
display: none;
background-color: #7EA6B1;
}
nav:before{
content: "IMOOC";
width: 100%;
height: 40px;
line-height: 40px;
font-size: 14px;
position: absolute;
left: 0px;
top: 0px;
background-color: #7EA6B1;
}
.btn{
width: 20px;
height: 20px;
background-color: white;
position: absolute;
right: 25px;
top: 10px;
}
.fourth{
flex-direction: column;
justify-content: space-around;
}
.third p{
font-size: 7px;
}
.fifth p{
font-size: 10px;
}
.fifth img{
height: 100px;
}
}
jq部分
$(document).ready(function(){
var abb=true;
$(".btn").click(function(){
if(abb==true){
$("nav > a").css({"display":"block"})
abb=false;
}else{
$("nav > a").css({"display":"none"})
abb=true;
}
})
})
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星