Question

我对html的世界很陌生，我正在从一本书和youtube中学习它。

我正在尝试创建这个单页设计。 This one right here

我开始时只使用了html并得到了一些lorem ipsum来检查我在哪里。一切都很顺利..

然后我开始尝试让这些部分成形并让它们粘在一起，但这就是它出错的地方。而我无法弄清楚问题是什么！（除了我当然是一个职业新手）

@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
 * {
  color: white;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 100%;
  background-color: #333333;
}
nav {
  float: right;
}
nav ul {
  list-style-type: none;
}
nav li {
  float: left;
  margin-right: 5px;
  font-family: 'Amatic SC', cursive;
  font-size: 1.5em;
  letter-spacing: 0.1em;
}
section {} h1 {
  font-family: 'Amatic SC', cursive;
  font-size: 800%;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 0;
  line-height: 1em;
}
h3 {
  font-family: 'Amatic SC', cursive;
  font-size: 300%;
  text-align: center;
  margin-top: 0;
  line-height: 1em;
}
#home {
  background-color: #334960;
}
#about {
  background-color: #f17c72;
}
#portfolio {
  background-color: #32ac97;
}
#contact {
  background-color: #7f4c75;
}
#blog {
  background-color: #3f9fc9;
}
footer {
  background-color: #334960;
}

<div id="page">
  <header>
    <nav>
      <ul>
        <li><a href="#">Home</a>
        </li>
        <li><a href="#">About</a>
        </li>
        <li><a href="#">Portfolio</a>
        </li>
        <li><a href="#">Contact</a>
        </li>
        <li><a href="#">Blog</a>
        </li>
      </ul>
    </nav>
  </header>
  <section id="home">
    <!-- Home section -->
    <h1>My name</h1>
    <h3>Someday i will be a front end developer</h3>
  </section>

  <section id="about">
    <!-- About section -->
    <h1>About</h1>
    <aside>
      <img src="http://placehold.it/300x450">
    </aside>
    <article id="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta diam ante, eu vestibulum risus vestibulum id. Curabitur sed est arcu. Sed auctor ornare eros, ut vulputate felis tempor sit amet. Donec egestas turpis at quam vestibulum, non varius
      augue finibus. Curabitur eu tellus id lectus porttitor pretium quis vitae massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ante diam, feugiat pharetra imperdiet eu, finibus in purus. Sed dapibus
      quam ut efficitur euismod. Nunc vel urna sem. Integer id massa euismod, iaculis sem eget, congue enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque pretium urna a magna suscipit, in semper ex
      euismod. Nullam sit amet quam auctor, viverra tellus non, imperdiet magna. Integer ante massa, sollicitudin et metus ac, dictum iaculis nisl. Fusce urna velit, sagittis quis lorem quis, fermentum mollis nulla.</article>
  </section>

  <section id="portfolio">
    <!-- Portfolio section -->
    <h1>Portfolio</h1>
    <article id="left">
      <img src="http://placehold.it/200x200">
    </article>
    <article id="mid">
      <img src="http://placehold.it/200x200">
    </article>
    <article id="right">
      <img src="http://placehold.it/200x200">
    </article>
    <!-- row -->
    <article id="left">
      <img src="http://placehold.it/200x200">
    </article>
    <article id="mid">
      <img src="http://placehold.it/200x200">
    </article>
    <article id="right">
      <img src="http://placehold.it/200x200">
    </article>
    <!-- row -->
  </section>

  <section id="contact">
    <!-- Contact section -->
    <h1>Contact</h1>
    <article id="contactform">
      <form name="sentMessage" id="contactForm" novalidate>
        <div class="control-group form-group">
          <div class="controls">
            <label>Voor en achternaam:</label>
            <input type="text" class="form-control" id="name" required data-validation-required-message="Please enter your name.">
            <p class="help-block"></p>
          </div>
        </div>
        <div class="control-group form-group">
          <div class="controls">
            <label>Telefoonnummer:</label>
            <input type="tel" class="form-control" id="phone" required data-validation-required-message="Please enter your phone number.">
          </div>
        </div>
        <div class="control-group form-group">
          <div class="controls">
            <label>E-mail Adres:</label>
            <input type="email" class="form-control" id="email" required data-validation-required-message="Please enter your email address.">
          </div>
        </div>
        <div class="control-group form-group">
          <div class="controls">
            <label>Uw bericht:</label>
            <textarea rows="10" cols="100" class="form-control" id="message" required data-validation-required-message="Please enter your message" maxlength="999" style="resize:none"></textarea>
          </div>
        </div>
        <div id="success"></div>
        <!-- For success/fail messages -->
        <button type="submit" class="btn btn-primary">Verstuur</button>
      </form>
    </article>
  </section>

  <section id="blog">
    <!-- Blog section -->
    <h1>Blog</h1>
    <blog>
      <h2 class="blogtitle">Blog title</h2>
      <p class="blogtitlesub">By admin</p>
      <p>Integer facilisis at dolor eu accumsan. Quisque sollicitudin sem justo, a blandit sem accumsan non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis dui libero. In hac habitasse platea dictumst. Curabitur tincidunt metus
        sed leo facilisis venenatis quis sit amet mi. Nullam sed ipsum mi. Quisque sapien turpis, porttitor eget ornare vitae, vestibulum vel enim. Fusce quis porta justo, vel sodales nisl. Sed feugiat, turpis suscipit sollicitudin convallis, diam neque
        tempor nunc, sed dapibus orci odio id felis. Donec nisl erat, lacinia eu ipsum non, dictum accumsan augue. Vivamus eu justo facilisis, semper elit nec, blandit sem. Nam suscipit eu sem vitae ornare. Integer a nisi non risus dictum porta quis sed
        massa. Nulla facilisi.</p>
      <a href="#">Read More</a>
    </blog>
    <hr>
    <blog>
      <h2 class="blogtitle">Blog title</h2>
      <p class="blogtitlesub">By admin</p>
      <p>Integer facilisis at dolor eu accumsan. Quisque sollicitudin sem justo, a blandit sem accumsan non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis dui libero. In hac habitasse platea dictumst. Curabitur tincidunt metus
        sed leo facilisis venenatis quis sit amet mi. Nullam sed ipsum mi. Quisque sapien turpis, porttitor eget ornare vitae, vestibulum vel enim. Fusce quis porta justo, vel sodales nisl. Sed feugiat, turpis suscipit sollicitudin convallis, diam neque
        tempor nunc, sed dapibus orci odio id felis. Donec nisl erat, lacinia eu ipsum non, dictum accumsan augue. Vivamus eu justo facilisis, semper elit nec, blandit sem. Nam suscipit eu sem vitae ornare. Integer a nisi non risus dictum porta quis sed
        massa. Nulla facilisi.</p>
      <a href="#">Read More</a>
    </blog>
    <hr>
    <blog>
      <h2 class="blogtitle">Blog title</h2>
      <p class="blogtitlesub">By admin</p>
      <p>Integer facilisis at dolor eu accumsan. Quisque sollicitudin sem justo, a blandit sem accumsan non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque quis dui libero. In hac habitasse platea dictumst. Curabitur tincidunt metus
        sed leo facilisis venenatis quis sit amet mi. Nullam sed ipsum mi. Quisque sapien turpis, porttitor eget ornare vitae, vestibulum vel enim. Fusce quis porta justo, vel sodales nisl. Sed feugiat, turpis suscipit sollicitudin convallis, diam neque
        tempor nunc, sed dapibus orci odio id felis. Donec nisl erat, lacinia eu ipsum non, dictum accumsan augue. Vivamus eu justo facilisis, semper elit nec, blandit sem. Nam suscipit eu sem vitae ornare. Integer a nisi non risus dictum porta quis sed
        massa. Nulla facilisi.</p>
      <a href="#">Read More</a>
    </blog>
    <hr>
  </section>

  <footer>
    Copyright by ME</footer>
</div>

这可能是什么问题？

Answer 1

将h1和h3设置为margin:0;您拥有h标签的默认边距，这样做会重置它们。

Answer 2

我认为这是因为你的<h1>标签。当您的浏览器解析<h*>标记时，它通常会在标题的顶部和底部添加边距。它是许多浏览器的默认行为。您已将margin-bottom设置为0，因此您只需执行相同的margin-top：

h1 {
    margin-top: 0;
}

无法将节div分开

2 个答案: