html - 固定导航栏,白色间隙,为什么?
问题描述
我想问你为什么我想在顶部做固定滚动导航栏时会出现这个空白?在这种情况下,你们有什么建议吗?菜单应该出现在背景图像上。我试图用背景做一些事情,但它没有帮助。
这是差距的图片: https ://ibb.co/RcvM5nS
这是代码:
.background {
background-color: #000000;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 650px;
width: 100%;
}
/*menu*/
#siteNav {
margin: 0 auto;
position: fixed;
width: 100%;
height: 50px;
box-sizing: border-box;
top: 0;
left: 0;
transition: 0.3s;
}
#siteNav.scroll {
background: rgba(0, 0, 0, 0.8);
height: 80px;
padding: 10px 80px;
}
#siteNav .logo {
padding: 10px;
height: 40px;
float: left;
transition: 0.3s;
}
#siteNav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
}
#siteNav ul li a {
line-height: 50px;
padding: 6px 30px;
text-decoration: none;
transition: 0.3s;
color: #ffffff;
}
#siteNav.scroll ul li a {
color: #000000;
}
#siteNav ul li a:focus {
outline: none;
}
<nav id="siteNav">
<img class="logo" src="images/img2-logo.png" alt="">
<ul>
<li><a href="#mission">MISSION</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#products">PRODUCTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<!--header-->
<div class="background">
<header>
<div>
<h1><br><a></a></br>
</h1>
</div>
</header>
</div>
解决方案
问题在于h1
保证金顶部。删除它,它会工作。另外我建议您使用<header>
标签作为包括导航的第一级标签。
无论如何,这是解决方案。
我添加margin:0
到 body 因为这里它的默认边距为 8px
.background {
background-color: #000000;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 650px;
width: 100%;
}
/*menu*/
#siteNav {
margin: 0 auto;
position: fixed;
width: 100%;
height: 50px;
box-sizing: border-box;
top: 0;
left: 0;
transition: 0.3s;
}
#siteNav.scroll {
background: rgba(0, 0, 0, 0.8);
height: 80px;
padding: 10px 80px;
}
#siteNav .logo {
padding: 10px;
height: 40px;
float: left;
transition: 0.3s;
}
#siteNav ul {
list-style: none;
float: right;
margin: 0;
padding: 0;
display: flex;
}
#siteNav ul li {
list-style: none;
}
#siteNav ul li a {
line-height: 50px;
padding: 6px 30px;
text-decoration: none;
transition: 0.3s;
color: #ffffff;
}
#siteNav.scroll ul li a {
color: #000000;
}
#siteNav ul li a:focus {
outline: none;
}
h1 {
margin-top:0;
}
body {
margin:0
}
<nav id="siteNav">
<img class="logo" src="images/img2-logo.png" alt="">
<ul>
<li><a href="#mission">MISSION</a></li>
<li><a href="#clients">CLIENTS</a></li>
<li><a href="#products">PRODUCTS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</nav>
<!--header-->
<div class="background">
<header>
<div>
<h1><br /><a></a>
</h1>
</div>
</header>
</div>
推荐阅读
- python - 检查 asyncio.get_event_loop() 是否已完成?
- r - 有谁知道为什么我的 rmarkdown 标头无法在 pdfout 中成功显示?
- java - BigQuery 加载本地文件不起作用,位置有问题
- javascript - 如何使用 React 禁用重复列表上的单击按钮
- google-drive-api - Google Drive API - 操作评论的 html 内容
- html - 响应式网站:如何在桌面上的列中制作图像/文本,而不是在移动设备上的列中
- python - 初始化一个类?
- .net - System.InvalidProgramException:JIT 编译器遇到内部限制。(CIL/MSIL)
- css - Tailwind CSS 不应用 display: flex on sm:flex
- python - 为什么熊猫(python)从excel导入空行虽然没有数据可循