网站布局定位不对

Question

我正在尝试从头开始为我的网站制作一个模板，一切都很顺利，直到我想在我的导航栏和欢迎消息栏下方制作一个新闻栏。出于某种原因，用于新闻的位置超出了导航栏，我不明白为什么！

body {
  margin: 0;
  background: #0e0e0f;
  font-family: Impact;
  font-size: 22px;
}
#navbar {
  text-align: left;
  margin-top: 55px;
}
#navbar ul li {
  display: inline;
  text-align: center;
}
#navbar ul li {
  margin: 10px;
  color: rgba(255, 255, 255, 0.2);
  text-transform: uppercase;
}
#navbar ul li a {
  text-decoration: none;
}
#navbar ul li a:hover {
  color: yellow;
}
#navbar ul li a:visited {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.2);
}
#navbar ul li a:visited:hover {
  text-decoration: none;
  color: yellow;
}
#top-container {
  margin: 0;
  background: black: ;
  background: linear-gradient(black, grey);
  width: 100%;
  height: 650px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
}
#welcome-message {
  margin: 250px 150px 100px 300px;
  color: white;
}
.main-content {
  width: 100%;
  height: 650px;
  background: #1f1f21;
  background-size: cover;
  margin-top: 700px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Placeholder</title>
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
  <div id="top-container">
    <nav id="navbar">
      <ul>
        <li><a href="#Home" class="active">Place Holder</a>
        </li>
        <li><a href="#">Place Holder</a>
        </li>
        <li><a href="#">Place Holder</a>
        </li>
        <li><a href="#">Place Holder</a>
        </li>
        <li><a href="#">Place Holder</a>
        </li>
        <li><a href="#">Place Holder</a>
        </li>
      </ul>
    </nav>
    <h1 id="welcome-message">Welcome to<br>
  Place holder!</h1>
  </div>
  <div class="main-content">
    <h1>News Placeholder</h1>
  </div>
</body>

</html>

Answer 1

我从 #top-container 中删除了 position:absolute，从 .main-content 中删除了 margin-top: 700px;。

您在 #top-container 中的 background: black:; 中有错误。删除 : 以修复它。

您的代码不够漂亮，但这解决了您的问题。这是现场示例：

body {
 margin: 0;
 background: #0e0e0f;
 font-family: Impact;
 font-size: 22px;
}
h1 {
    margin-top: 0;
}
#navbar{
 text-align: left;
 margin-top: 55px;
}

#navbar ul li{
 display: inline;
 text-align: center;
}


#navbar ul li{
    margin: 10px;
    color:rgba(255, 255, 255, 0.2);
    text-transform: uppercase;
}

#navbar ul li a{
    text-decoration: none;
}

#navbar ul li a:hover{
 color: yellow;
}
#navbar ul li a:visited{
    text-decoration: none;
    color:rgba(255, 255, 255, 0.2);
}
#navbar ul li a:visited:hover{
    text-decoration: none;
    color: yellow;
}

#top-container{
 margin: 0;
 background: black;
 background: linear-gradient(black, grey);
 width: 100%;
 height: 650px;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}

#welcome-message{
 margin: 250px 150px 100px 300px;
 color: white;
}

.main-content{
 width: 100%;
 height: 650px;
 background: #1f1f21;
 background-size: cover;
}

<!DOCTYPE html>
<html>
<head>
  <title>Placeholder</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
 <div id="top-container">
 <nav id="navbar">
   <ul>
     <li><a href="#Home" class="active">Place Holder</a></li>
     <li><a href="#">Place Holder</a></li>
     <li><a href="#">Place Holder</a></li>
     <li><a href="#">Place Holder</a></li>
     <li><a href="#">Place Holder</a></li>
     <li><a href="#">Place Holder</a></li>
   </ul>
 </nav>
  <h1 id="welcome-message">Welcome to<br>
  Place holder!</h1>
 </div>
 <div class="main-content">
  <h1>News Placeholder</h1>
 </div>

</body>
</html>

编辑：

要删除两个内容区域之间的 space 栏，请删除 h1 的边距。检查更新的代码。

网站布局定位不对

Website layout not positioning right

html

css

webpage