老师帮忙检查下
来源：4-4 自由编程
vivi_li
2020-06-11 16:36:23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕课网之栅格系统</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/grid.css">
<style>
.header-container{
height: 100px;
width: 100%;
border-bottom: 1px solid #ddd;
}
.container{
height: 100%;
}
.header-nav-btn{
height: 100%;
width: 100px;
border-radius: 0 100px 0 0;
background-color: #f00;
align-items: center;
cursor: pointer;
}
.btn-toggle{
padding: 10px;
background-color: transparent;
border: none;
border-radius: 4px;
cursor: pointer;
height: 100%;
}
.header-nav-btn-bar{
display: block;
width: 40px;
height: 4px;
border-radius: 2px;
background-color: #ccc;
}
.header-nav-btn-bar+.header-nav-btn-bar{
margin-top: 10px;
}
.header-logo{
height: 100%;
display: flex;
justify-content: flex-end;
}
.header-logo a{
width: 200px;
height: 100%;
display:flex;
align-items: center;
}
.header-logo img{
height: 80px;
}
.header-nav-container{
height: 100%;
}
.header-nav{
display: flex;
justify-content: flex-start;
align-items: center;
height: 100%;
}
.header-nav-item{
margin-left: 15px;
height: 100%;
}
.header-nav-item:first-child{
margin-left: 0;
}
.header-nav-link{
height: 100%;
display: flex;
font-weight: bold;
font-size: 14px;
align-items: center;
}
.nav-container{
height: 0;
transition: height .5s;
overflow: hidden;
background-color: #ccc;
}
.nav-container li{
height: 50px;
line-height: 50px;
border-bottom: 1px solid #ddd;
}
.nav-container li:last-child{
border: none;
}
.nav-container li a{
display: block;
height: 100%;
}
.header-nav-extended{
height: 150px;
}
</style>
</head>
<body>
<header class="header-container">
<div class="container">
<div class="header-nav-btn col-4 d-md-none">
<button type="button" class="btn-toggle" id="btn">
<span class="header-nav-btn-bar"></span>
<span class="header-nav-btn-bar"></span>
</button>
</div>
<div class="header-nav-container d-none d-md-block col-md-6">
<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 col-8 col-md-6"><a href="###"><img src="logo.png" alt=""></a></div>
</div>
</header>
<nav class="nav-container d-md-none" id="nav" >
<div class="container">
<ul>
<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>
</div>
</nav>
</body>
<script>
var nav =document.getElementById('nav');
var navExtendedClassName='header-nav-extended';
document.getElementById('btn').onclick=function () {
if (nav.classList.contains(navExtendedClassName)){
nav.classList.remove(navExtendedClassName);
}else {
nav.classList.add(navExtendedClassName)
}
}
</script>
</html>
/*base*/
/*css reset*/
*{
box-sizing: border-box;
}
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 14px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
font-size: 14px;
color: #363636;
}
a:hover{
color: #1428a0;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
width: 100%;
vertical-align: top;/*解决内联块对齐问题*/
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
1回答
-
好帮手慕久久
2020-06-11
同学你好，代码中的问题如下：
1. 在小屏下，左侧按钮左侧有间隙：
原因是“container”有默认的左右padding。需要将内容都放在“.row”元素中，如下：
2. 点击按钮后，按钮周围有轮廓线，如下：
建议去除，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
