我似乎无法消除标题和主要内容之间存在的空白。您将看到导航上方和背景图像下方存在黑色背景。任何帮助都将是极好的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Awesome Landing Page</title>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<header>
<div id="header-container">
<div class="col-3">
<img class="logo" src="Images/logo-dark.png" height="18" width="143">
</div>
<div class="col-3">
<nav>
<ul class="menu">
<li>Home</li>
<li>Features</li>
<li>About</li>
<li>Signup</li>
</ul>
</nav>
</div>
<div class="col-3">
<a href="#" class="getStartedBTN">Get Started</a>
</div>
</div><!-- Header-Container Ends Here -->
</header>
<main>
<section>
<div id="top-section-main">
<div id="top-section-content">
<h1>Awesome looks so good</h1>
<p>Awesome is the landing page you wish you had when you started.</p>
</div>
</div>
</section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</main>
<footer></footer>
</body>
</html>
CSS
html {
font-family: "Lato", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
body {
background-color: black;
margin: 0;
}
header {
height: 80px;
background-color: #ffffff;
}
#header-container {
width: 75%;
margin: auto;
}
.col-3 {
width: 33%;
float: left;
}
.logo {
padding-top: 30px;
}
.menu {
margin-top: 32px;
}
.menu li {
list-style-type: none;
display: inline;
font-size: .85em;
color: #8e8e8e;
padding-right: 30px;
}
.getStartedBTN {
background-color: #6dc77a;
border-radius: 28px;
-moz-border-radius:28px;
-webkit-border-radius:28px;
text-decoration: none;
color: #ffffff;
padding: 10px 26px;
margin-top: 20px;
display: inline-block;
font-size: 17px;
float: right;
}
#top-section-main {
height: 740px;
background-image: url(../Images/friends.jpg);
}