跟着老师写的 还是布局显示都不一样
我的下边框为什么这么高 还有那个btn怎么显示个句号 而且没有在右边 还有老师的那些图片在哪里下载 我在资料里的课程教辅里 下不了 根本就点击不了 跟个文字一样 不是链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./grid.css">
<link rel="stylesheet" href="./bese.css">
<link rel="stylesheet" href="./index.css">
<title>Document</title>
</head>
<style>
</style>
<body>
<header class="header-container">
<div class="container">
<div class="row">
<div class="header-logo-container col-8 col-md-3">
<a href="./index.html" class="header-logo">
<img src="./img/1.jpg" alt="">
</a>
</div>
<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>
<span class="btn-toggle-bar"></span>
</button>
</div>
<div class="header-nav-container col-md-9 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>
<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>
</div>
</header>
</body>
</html>
index.css
/*-布局 start-*/
/*-header-*/
.header-nav-container {
display: none;
}
.header-container {
background-color: #fff;
border-bottom: 1px solid #dadada;
}
.header-logo-container,
.header-btn-container,
.header-nav-container {
height: 64px;
}
.header-btn-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
/*-布局 end-*/
/*-组件 start*/
/*-组件 end-*/
/*-内容 start-*/
/*-内容 end-*/
正在回答 回答被采纳积分+1
同学你好，解答如下：
1、是css代码没有粘贴完整吗？同学提供的css代码缺了很多，与讲师写的不一样。加上如下代码后：
效果如下:
此时效果就接近视频中的效果了。
建议同学把缺少的代码都补全，再看效果。
2、按钮的样式也缺失，所以效果不对。
3、源码、图片在如下位置下载：
如果下载不了，建议更换浏览器，并重新登录试试。
如果还是不行，建议截图证明，老师再反馈给技术人员，帮同学处理。
祝学习愉快！
-
慕尼黑0510008 #1
加上了老师截图的代码
/*-布局 start-*/
/*-header-*/
.header-logo {
display: flex;
align-items: center;
width: 136px;
height: 100%;
}
.header-nav,
.header-nav-item,
.header-nav-link {
height: 100%;
}
.header-nav-link {
display: flex;
align-items: center;
font-weight: bold;
}
.header-container {
background-color: #fff;
border-bottom: 1px solid #dadada;
}
.header-logo-container,
.header-btn-container,
.header-nav-container {
height: 64px;
}
.header-btn-container {
display: flex;
justify-content: flex-end;
align-items: center;
}
.header-nav {
display: flex;
justify-content: flex-end;
font-size: 14px;
}
/*-布局 end-*/
/*-组件 start*/
/*-组件 end-*/
/*-内容 start-*/
/*-内容 end-*/
然后变成这样子
2022-03-22 16:11:35 -
由于同学的代码不全，所以老师使用了源码中提供的grid.css、base.css测试了同学的代码。效果如下：
怀疑是grid.css、base.css中的代码有影响造成的。
建议同学下载源码，使用源码中的grid.css、base.css测试一下自己的代码。如果不会，可以新建一个问题，把全部代码都粘贴出来，老师们再帮你测试。
2022-03-22 16:28:29
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星