老师帮忙检查下

来源：4-4 自由编程

技术为王2383098363

2019-09-16 19:58:11

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/grid.css">
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
a{
text-decoration: none;
}
.nav-item{
line-height: 70px;
margin-left: 20px;
cursor: pointer;
}
.nav-item:hover{
color: red;
}
.nav-content{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}

.container{
height: 70px;
width: 100%;
border-bottom: 1px solid #dadada;
}
.btn-wrap{
width: 70px;
height: 70px;
border-radius: 0 100% 0 0;
background: red;
}
.btn-line{
width: 30px;
height: 4px;
border-radius: 2px;
display: block;
background: #fff;
position: relative;
top: 20px;
margin: 10px 0;
}
.row,.logo-wrap,.head-logo,img{
height: 100%;
}
img{
vertical-align: top;
border: none;
}
.nav-dropdown{
background: #E5E5E5;
overflow: hidden;
height: 0;
transition: all 0.5s;
}

.nav-dropdown-item{
line-height: 40px;
display: block;
border-bottom: 1px solid #B0B0B0;
text-indent: 20px;
color: #666;
font-size: 15px;
}

.no-line{
border: none;
}
.nav-dropdown-item:hover{
color: red;
}
.nav-dropdown-item-active{
height: 122px;
}

</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="btn-wrap col-2 d-md-none" id="btn">
<span class="btn-line"></span>
<span class="btn-line"></span>
</div>
<div class="nav-wrap col-md-5  d-none d-md-block">
<ul class="nav-content">
<li class="nav-item">首页</li>
<li class="nav-item">关于</li>
<li class="nav-item">商业合作</li>
</ul>
</div>
<div class="logo-wrap col-7 col-offset-3 col-md-offset-0 col-md-7">
<a href="#" class="head-logo">
<img src="img 2/logo.png" alt="">
</a>
</div>
</div>
</div>
<div class="nav">
<ul class="nav-dropdown" id="nav">
<li><a href="#" class="nav-dropdown-item">首页</a></li>
<li><a href="#" class="nav-dropdown-item">关于</a></li>
<li><a href="#" class="nav-dropdown-item no-line">商业合作</a></li>
</ul>

</div>

<script>
btn.onclick=function() {
if(nav.classList.contains('nav-dropdown-item-active')){
nav.classList.remove('nav-dropdown-item-active')
}else{
nav.classList.add('nav-dropdown-item-active');
}
}
 
</script>


</body>
</html>

写回答

1回答