Html5页面结构问题

Question

我使用html5创建了一个网页

这是我的代码：

<header>
  <img src="img/logo.png" alt="logo">
  <hr class="hr-style">
  <h1>The Articles</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Articles</a></li>
    </ul>
  </nav>
</header>

<section>
  <article class="article">
    <img src="img/articles.png" alt="articles" />
  </article>
  <aside class="aside">
    <img src="img/agencies.png" alt="agencies" />
  </aside>
</section>

<footer>
</footer>

这是我试过的JSfiddle：请看看我试过的，

http://jsfiddle.net/3jet0dfu/

我需要这样：

我是HTML5新手，我需要知道如何使用html5标记对齐页面。

Answer 1

首先，您需要包含宽度的内容。

Have an example!

在这个示例中，我给身体的宽度与徽标图像（939px）的宽度相同。 margin: 0 auto;将使页面居中。您的问题太广泛，无法为您提供准确的解决方案。

body{
    margin: 0 auto;
    font-family: Raleway, sans-serif;
    width: 939px;
}

最好用边框替换<hr>。例如：

<img src="" alt="" id="logo">

#logo {
    border-bottom: solid 2px #CCC;
    padding-bottom: 50px;
}

我还做了粗略的CSS重置以删除默认边距;然后可以通过将它们添加回每个元素来轻松控制它们。您还可以使用CSS Reset或CSS Normalise（对您的理想解决方案进行一些研究）

* {
    margin: 0;
    padding: 0;
}

如果你想使用百分比，

box-sizing: border-box也很棒。

Here is an excellent run-down on box-sizing.

* {
    box-sizing: border-box;
}

这个简单的更改为您提供了大部分所需的布局。现在您需要更改宽度并根据需要添加边距/填充。