老师，我找了问题，解决不了
来源：4-4 自由编程
木子小可爱
2019-10-16 21:34:30
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>document</title>
<link rel='stylesheet' href='css/grid.css'>
<style type='text/css'>
*{
box-sizing:border-box;
padding:0;
margin:0;
}
li{
list-style:none;
}
a{
text-decoration:none;
color:#363636;
}
body{
font-size:14px;
}
a:hover{
color:#1428a0;
}
img{
width:100%;
border:none;
vertical-align:top;
}
/*布局*/
.header-container{
background:#fff;
border-bottom:1px solid #ccc;
}
.header-logo-container,
.header-btn-container,
.header-nav-container {
height: 60px;
}
.header-btn-container{
display:flex;
align-items: center;
justify-content:flex-start;
}
.nav-container{
height:0;
overflow:hidden;
transition: height .5s;
}
.nav-container-extended{
height:203px;
}
/*组件*/
.btn-toggle{
padding:10px;
cursor:pointer;
background-color:red;
width:60px;
height:100%;
border:none;
border-radius:0 100% 0 0;
}
.btn-toggle-bar{
display:block;
width:20px;
height:4px;
background-color:#fff;
}
.btn-toggle-bar:nth-child(2){
margin-top:8px;
}
/*内容*/
.header-logo{
display:flex;
justify-content:flex-start;
width:200px;
height:100%;
}
.header-nav,
.header-nav-item,
.headr-nav-link{
height:100%;
}
.header-nav{
display:flex;
}
.header-nav-item{
margin-left:14px;
}
.header-nav-link{
display:flex;
justify-content:center;
align-items:center;
font-size:14px;
font-weight:bold;
}
.nav-item{
height:40px;
line-height:40px;
border-bottom:1px solid #666;
background-color:#ccc;
padding-left:20px;
font-size:14px;
font-weight:bold;
}
/*（1）在中屏以上，左侧是导航，中间是图片
（2）在中屏以下，左侧导航变成按钮，点击按钮导航缓缓下滑
任务要求：
1、按照效果视频实现基本布局
2、左侧导航可以使用定位显示在头部上面
3、相关图片可以从资料中进行下载
4、导航缓缓下滑可以使用CSS3过渡完成*/
</style>
</head>
<body>
<header class='header-container'>
<div class='row'>
<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>
</button>
</div>
<div class='header-nav-container col-md-6 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>
</ul>
</div>
<div class='header-logo-container col-8 col-md-6 '>
<a href="#" class='header-logo'>
<img src='img/logo.png' alt='logo'>
</a>
</div>
</div>
</header>
<nav class='nav-container' id='nav'>
<ul class='container'>
<li class='nav-item'><a href='#'>首页</a></li>
<li class='nav-item'><a href='#'>关于</a></li>
<li class='nav-item'><a href='#'>商业合作</a></li>
</ul>
</nav>
<script>
var nav=document.getElementById('nav');
var navExtendedClassName='nav-container-extended';
document.getElementById('btn-toggle').onclick=function(){
if (nav.classList.contains(navExtendedClassName)) {
nav.classList.remove(navExtendedClassName);
} else {
nav.classList.add(navExtendedClassName);
}
};
</script>
</body>
</html>
1回答
-
好帮手慕星星
2019-10-17
同学你好，优化建议：
1、水平方向上出现了滚动条，左侧导航文字没有垂直居中显示：
row类有默认的左右margin值，所以水平方向上会撑开，可以去掉；a标签可以设置高度。如下：
2、浏览视口缩小后，点击按钮显示子菜单：
子菜单宽度水平方向上没有铺满，可以设置宽度，如下：
可以重新测试下，祝学习愉快！
0
相似问题