老师麻烦看一下有没有需要改进的，谢谢！
来源：4-4 自由编程
喝牛奶对身体好
2020-09-11 00:46:56
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="grid.css">
<title>Document</title>
<style>
/* 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
/* grid样式 */
.container {
width: 100%;
margin-left: auto;
margin-right: auto;
}
/*sm*/
@media (min-width: 576px) {
.container {
width: 100%;
}
}
/*md*/
@media (min-width: 768px) {
.container {
width: 100%;
}
}
/*lg*/
@media (min-width: 992px) {
.container {
width: 100%;
}
}
/*xl*/
@media (min-width: 1200px) {
.container {
width: 100%;
}
}
/* 导航条 */
.header-container {
min-width: 576px;
height: 80px;
position: relative;
}
.header-logo {
height: 100%;
text-align: center;
}
img {
vertical-align: top;
}
/* 按钮 */
.header-btn-container {
display: flex;
align-items: center;
justify-content: flex-start;
position: absolute;
height: 100%;
background-color: red;
border-radius: 0 100% 0 0;
cursor: pointer;
}
.btn-toggle {
background-color: transparent;
padding: 10px;
cursor: pointer;
border: none;
outline: none;
}
.btn-toggle-bar {
background-color: white;
width: 24px;
height: 4px;
display: block;
}
.btn-toggle-bar+.btn-toggle-bar {
margin-top: 4px;
}
/* 头部导航 */
.header-nav-container {
width: 300px;
position: absolute;
height: 100%;
}
.header-nav,
.header-nav-item,
.header-nav-link {
height: 100%;
}
.header-nav {
display: flex;
justify-content: space-around;
}
.header-nav-link {
font-weight: bold;
display: flex;
align-items: center;
}
/* nav */
.nav-container {
background-color: #dfdedf;
padding: 0;
transition: height .8s;
height: 0;
overflow: hidden;
}
.nav-link {
width: 100%;
height: 41px;
display: block;
padding-left: 15px;
display: flex;
align-items: center;
border-bottom: 1px solid #cccbcd;
}
.nav-link:first-child {
bottom: 0;
}
.nav-container-extended {
height: 123px;
}
</style>
</head>
<body>
<header class="header-container">
<div class="container">
<div class="row">
<div class="header-logo col-12">
<img src="logo.png" alt="">
</div>
<div class="header-nav-container 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-btn-container col-md-3 d-md-none">
<button class="btn-toggle">
<span class="btn-toggle-bar"></span>
<span class="btn-toggle-bar"></span>
</button>
</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>
</ul>
</nav>
<script>
var nav = document.getElementById("nav");
var navExtendedClassName = "nav-container-extended";
document.querySelector(".header-btn-container").onclick = function () {
if (nav.classList.contains(navExtendedClassName)) {
nav.classList.remove(navExtendedClassName);
} else {
nav.classList.add(navExtendedClassName);
}
};
</script>
</body>
</html>
1回答
-
好帮手慕夭夭
2020-09-11
同学你好，做的很不错，不用修改了。继续加油，祝学习愉快~
0
相似问题