还有没有要优化的地方

来源：4-4 自由编程

福徐贵

2020-11-18 17:38:46

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

test.css
.header-container {
background: #fff;
border: 1px solid #dadada;
}

.header-logo-container,
.header-nav-container,
.header-btn-container {
height: 64px;
}

.header-logo-container {
display: flex;
justify-content: center;
}

.header-logo {
width: 200px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
}

.btn-toggle {
padding: 20px;
border: none;
cursor: pointer;
height: 64px;
background-color: red;
border-radius: 0px 80px 0px 0px;
}

.btn-toggle-bar {
display: block;
width: 24px;
height: 4px;
background-color: #fff;
border-radius: 3px;
}

.btn-toggle-bar+.btn-toggle-bar {
margin-top: 2px;
}

.btn-toggle:hover .btn-toggle-bar {
background-color: #1428a0;
}

.header-nav,
.header-nav-item,
.header-nav-link {
height: 100%;
}

.header-nav {
display: flex;
justify-content: flex-start;
font-size: 90px;
}

.header-nav-item {
margin-left: 24px;
}

.header-nav-link {
display: flex;
align-items: center;
font-weight: bold;
}

.nav-link {
display: block;
width: 100%;
background: rgb(225, 225, 225);
border-bottom: 1px solid #dadada;
}

.nav-container {
height: 0;
overflow: hidden;
transition: height 0.5s;
position: relative;
top: -1px;
}

.nav-link {
height: 20px;
}

.nav-container-extended {
height: 61px;
top: 0px;
}



base.css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}

body {
font-size: 14px;
}

li {
list-style: none;
}

a {
font-size: 14px;
color: #363636;
text-decoration: none;
}

a:hover {
color: #1428a0;
}

img {
vertical-align: top;
width: 100%;
border: none;
}


test.html

<!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/grid.css">
<link rel="stylesheet" href="css/test.css">
</head>

<body>
<header class="header-container">
<div class="container">
<div class="row">
<div class="header-btn-container col-4 d-md-none">
<div class="header-btn">
<button type="button" class="btn-toggle" id="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</div>
</div>
<nav class="header-nav-container d-none col-md-4 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>
</nav>
<div class="header-logo-container col-8">
<a href="test.html" class="header-logo">
<img src="./img/logo2.png" alt="logo">
</a>
</div>
</div>
</div>
</header>
<nav class="nav-container" 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>
</ul>
</nav>
<script>
const btnToggle = document.querySelector('#btn-toggle');
const navExtendedClassName = 'nav-container-extended';
const nav = document.querySelector('#nav');
btnToggle.addEventListener('click', function () {
if (nav.classList.contains(navExtendedClassName)) {
nav.classList.remove(navExtendedClassName)
} else {
nav.classList.add(navExtendedClassName)
}
})
</script>
</body>

</html>