我目前正在设计一个网站，但在使用导航栏和页眉时遇到了一些问题。我对 CSS 进行了编码，以便导航栏和横幅图像在滚动时保持在页面顶部。
这是成功的，但是正文中的文本超过了导航栏。我已经设置了导航栏周围的所有边距和填充。有没有一种方法可以设置它，使横幅、导航栏和主体都成为一个整体？ 正文明明是例子，明明页面链接还没有填写等等。
查看正在发生的事情的示例。去这里:www.jamiewebguy.com
HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jamie. The Web Guy</title>
<link rel="stylesheet" type="text/css" href="homep.css">
</head>
<body>
<header>
<span class="banner_h">
<img src="Exbanner.jpg" alt "Banner" height="150" width= 100%/>
</span>
<p><ul>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#news">What?</a></li>
<li><a href="#contact">Pricing</a></li>
<li><a href="#about">Contact Us</a></li>
<li><a href="#about">Testimonials</a></li>
<li><a href="#about">About</a></li>
</header>
</ul></p>
<div id="main-content">
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
<h1>Some Heading</h1>
<p>Some Text</p>
<div>A div</div>
</div>
</body>
CSS 代码:
header {
position:fixed;
top: 0;
width: 100%;
}
ul {
position: fixed;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
background-color: #f3f3f3;
border: 1px solid #e7e7e7;
}
a {
display: inline-block;
width: 80px;
text-align: center;
}
li {
width: 100px;
margin: auto;
display: inline;
border-right: 1px solid #bbb;
}
li:last-child {
}
li a
{
display: inline-block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover
{
background-color: #111;
}
.active
{
background-color: #4CAF50;
}
#main-content
{
margin: 300px 0 0 0;
}
最佳答案
您的 html 有误。你有 <img src="Exbanner.jpg" alt "Banner" height="150" width= 100%/>
你需要有 <img src="Exbanner.jpg" alt="Banner" height="150px" width= "100%"/>
那么你有</header>但是没有开口<header>在任何地方
这也弄乱了 <ul> <li>菜单
关于html - 如何阻止我的主体在 HTML/CSS 中与我的导航栏和横幅重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46028417/