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

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

background: black:;内#top-container内有错误。删除:以修复它。

你的代码并不漂亮，但这解决了你的问题。这是现场的例子：

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>

编辑：

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

网站布局没有正确定位

1 个答案: