请老师检查，请问有需要优化的吗，谢谢
来源：4-4 自由编程
qq_慕移动3101913
2020-03-12 14:48:07
<!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/index.css">
</head>
<body>
<div class="header">
<div class="container">
<div class="row">
<div class="header-btn 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>
<nav class="header-nav col-12 d-none d-md-block" >
<ul class="header-nav-container">
<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 col-7 col-md-7">
<a href="./4-4index.html">
<img src="../img/logo.png" alt="logo">
</a>
</div>
</div>
</div>
</div>
<!-- 按钮下拉菜单 小屏和超小屏显示，中屏以上隐藏-->
<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 btn = document.getElementById('btn-toggle');
var nav = document.getElementById('nav');
var navExtendedClassName = 'nav-container-extended'; //按钮展开下拉菜单
btn.onclick = function (){
if (nav.classList.contains(navExtendedClassName)) {
nav.classList.remove(navExtendedClassName);
}else { // 展开
nav.classList.add(navExtendedClassName); //add添加
}
};
</script>
</body>
</html>3回答
-
qq_慕移动3101913
提问者
2020-03-12
请不要回答，已重新提问
0 -
qq_慕移动3101913
提问者
2020-03-12
.container {
width: 100%;
margin-right: 50px;
}
/*sm*/
@media (min-width: 576px) {
.container {
width: 100%;
}
}
/*md*/
@media (min-width: 768px) {
.container {
width: 720px;
}
}
/*lg*/
@media (min-width: 992px) {
.container {
width: 960px;
}
}
/*xl*/
@media (min-width: 1200px) {
.container {
width: 1140px;
}
}
.row {
margin-left: -15px;
/* margin-right: -15px; */
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12,
.col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
position: relative;
padding-left: 15px;
padding-right: 15px;
}
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
float: left;
}
.col-1 {
width: 8.33333333%;
}
.col-2 {
width: 16.66666667%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333333%;
}
.col-5 {
width: 41.66666667%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33333333%;
}
.col-8 {
width: 66.66666667%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33333333%;
}
.col-11 {
width: 91.66666667%;
}
.col-12 {
width: 100%;
}
0 -
qq_慕移动3101913
提问者
2020-03-12
/* header */ .header{ background-color: #fff; border-bottom: 1px solid #dadada; } .row, .header-logo, .header-btn, .header-nav { height: 50px; } .header-nav, .header-nav-item, .header-nav-link { height: 100%; } /* header-logo */ .header-logo{ max-width: 600px; /* 图片垂直水平居中*/ display: flex; align-items: center; justify-content: center; } /* header-btn */ .header-btn{ display: flex; justify-content: flex-start; align-items: center; } .btn-toggle { outline:none; width: 50px; height: 100%; padding: 10px; background-color:red; border-top-right-radius: 50px; border: none; cursor: pointer; } .btn-toggle-bar{ display: block; width: 24px; height: 3px; background-color: #DCDCDC; border-radius: 4px; } .btn-toggle-bar + .btn-toggle-bar { margin-top: 5px; } /* header-nav */ .header-nav { width: 300px; height: 100%; font-size: 14px; /* 向左对齐 */ display: flex; justify-content: flex-start; } .header-nav ul{ width: 200px; height: 100%; display: flex; justify-content: space-between; align-items: center; } .header-nav-item { margin-left: 24px; } .header-nav-link{ display: flex; align-items: center; font-weight: bold; } /* 下拉菜单样式 */ .nav-container{ overflow: hidden; position: relative; height: 0; transition: height 0.5s; } .nav-container-extended { top: 0; height: 201px; } .nav-link { display: block; height: 40px; line-height: 40px; border-bottom: 1px solid #808080; padding-left: 15px; background-color: #DCDCDC; }0
相似问题