Question

我正在设计一个视频网站，并且只想询问我当前的html5基础布局的一些建议，想法和改进。

我从谷歌阅读了很多文章，但这令人困惑。我需要一些简单的建议。我是css的新手所以请保持温柔：）

body {
  background: #2b2b2b;
  font: normal 12px Arial, Helvetica, sans-serif;
  color: #777;
  overflow-x: hidden
}
a {
  color: #888;
}
a:active {
  color: #444;
}
header .wrap,
nav,
.contentwrapper,
footer .wrap {
  width: 1000px;
  margin: 0 auto
}
header,
nav,
section,
aside .wrap,
footer {
  background: #333;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #222
}
section {
  border: 1px solid #222
}
header {
  width: 100%;
  line-height: 30px
}
nav li {
  display: inline-block;
}
main {
  float: right;
  width: 820px;
}
aside {
  float: left;
  width: 170px
}
footer {
  line-height: 30px;
}
footer ul {
  font-size: 14px;
}
footer li {
  float: right;
  display: inline-block;
}
footer li.cr {
  float: left
}
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}

<header>
  <div class="wrap">
    <h1>Site title</h1>
  </div>
</header>
<nav>
  <ul class="menu">
    <li><a href="javascript:void(0);" href="#">menu1</a>
    </li>
    <li><a href="javascript:void(0);" href="#">menu2</a>
    </li>
  </ul>
</nav>
<div class="contentwrapper group">
  <main>
    <section>
      <div class="head">
        <h1>Featured Videos</h1>
      </div>
    </section>
    <section>
      <h1>Latest Videos</h1>
    </section>
  </main>
  <aside>
    <div class="wrap">
      category list here
    </div>
    <div class="wrap">
      ads here
    </div>
  </aside>
</div>
<footer>
  <div class="wrap group">
    <ul>
      <li class="cr">website.com &copy; 2014</li>
      <li><a href="./contact">Contact</a>
      </li>
      <li><a href="./rss.xml">Rss</a>
      </li>
      <li><a href="./sitemap.xml">Sitemap</a>
      </li>
      <li><a href="#">Webmaster$</a>
      </li>
    </ul>
  </div>
</footer>

Answer 1

您的所有语法都有效，并且您的CSS看起来很好。只需确保在整个项目中保持代码干净简洁，这样你就不会有50个样式表来知道谁知道（从经验XD说起）。

祝你的项目好运。

Answer 2

否

来自HTML5规范:: DIV

强烈建议作者将div元素视为最后的元素，因为没有其他元素是合适的。使用更合适的元素而不是div元素可以为读者提供更好的可访问性，并使作者更易于维护。

您不应在没有必要的情况下使用DIV个元素，尤其是<div class="wrap"> HEADER，<div class="contentwrapper group">作为MAIN的父级，{{1
。来自代码的内部底部<div class="wrap group">是多余的。

这是一种有效的html5标记方法吗？

2 个答案: