为什么我设置了.nav_container的height为0,ul不消失
如题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式布局</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/grid.css">
</head>
<body>
<header class="header_container">
<div class="container">
<div class="row">
<div class="header_logo_container col-8 col-md-4">
<a href="###" class="header_logo">
<img src="img/1.jpg" alt="pic1">
</a>
</div>
<div class="header_btn_container col-4 d-md-none">
<button type="button" class="btn_toggle" id="btn_toggle">
<span class="btn_toggle_bar"></span>
<span class="btn_toggle_bar"></span>
<span class="btn_toggle_bar"></span>
</button>
</div>
<div class="header_nav-container col-md-8 d-none d-md-block">
<ul class="header_nav">
<li class="header_nav_item"><a href="###" class="header_nav_link">手机&平板</a></li>
<li class="header_nav_item"><a href="###" class="header_nav_link">电视&影音</a></li>
<li class="header_nav_item"><a href="###" class="header_nav_link">生活家电</a></li>
<li class="header_nav_item"><a href="###" class="header_nav_link">电脑办公</a></li>
<li class="header_nav_item"><a href="###" class="header_nav_link">网上商城</a></li>
</ul>
</div>
</div>
</div>
</header>
<nav class="nav_container d-md-none" id="nav">
<ul class="container">
<li><a href="" class="nav_link">手机&平板</a></li>
<li><a href="" class="nav_link">电视&影音</a></li>
<li><a href="" class="nav_link">生活家电</a></li>
<li><a href="" class="nav_link">电脑/办公/储存</a></li>
<li><a href="" class="nav_link">网上商城</a></li>
</ul>
</nav>
</body>
</html>
index.css
/*布局 start*/
.row{display: flex;justify-content: space-around;}
.header_container{
background-color: #fff;
border-bottom: 1px solid #b16464;
}
.header_logo_container,
.header_btn_container,
.header_nav_container{
height: 64px;
}
.header_btn_container{
display:flex;
justify-content:flex-end;
align-items: center;
}
.nav_container{
background-color: red;
height: 0px;
border-bottom: 1px solid #dadada;
transition: all 0.5s;
}
.nav_container_extended{
height:201px;
}
/*布局 end*/
/*组件 start*/
.btn_toggle{
padding: 10px;
background-color: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
}
.btn_toggle:hover{
background-color: #f9f9f9;
}
.btn_toggle_bar{
display: block;
width: 24px;
height: 4px;
background-color: #363636;
border-radius: 2px;
}
.btn_toggle_bar + .btn_toggle_bar{margin-top: 4px;}
.btn_toggle:hover.btn_toggle_bar{background-color: #1428a0;}
/*组件 end*/
/*内容 start*/
.header_logo{width:136px;height: 100%;display: -webkit-flex;
align-items: center;}
.header_nav,.header_nav_item,.header_nav_link{height: 100%;}
.header_nav{display: flex;justify-content: center;font-size: 14px;}
.header_nav_item{margin-left: 24px;}
.header_nav_item:first-child{
margin-left: 0;
}
.header_nav_link{
display: flex;
align-items: center;
font-weight: bold;
}
.nav_link{
display: block;
height: 40px;
line-height: 40px;
font-weight: bold;
}
/*内容 end*/
base. css
*{box-sizing: border-box;margin: 0;padding: 0px;}
body{font-size: 14px;}
li{list-style: none;}
a{text-decoration: none;font-size: 14px;color: #363636;}
a:hover{color:#1428a0}
img{width:100%;height:64px;border: none;display:block;vertical-align:top;}
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星