HTML5 - 经典的上中下三段式布局（并使用<nav>实现侧边导航链接）

2015-08-30 发布：hangge 阅读：5762

这个是一个典型的三段式部局，上下两块分别是网页头部与尾部。中间区域又分为左边的侧边栏区域和右边的内容主体区域。

1，效果图如下：

2，页面元素说明：

（1）在最外层我们添加了一个wrapper，把所有的页面元素都包在里面。好处是便于调整整个页面的最大最小宽度，以及是否让页面居中等。

（2）中间区域，侧边栏是固定宽度，右侧内容区域是自适应宽度。

（3）过去我们会把整个侧边栏都放在一个<div>中，到了HTML5，使用两个针对性更强的元素<aside>和<nav>。

（4）“关于我们”包含在一个<section>元素中。一般以标题开头的内容区块使用<section>，反之则使用<div>。

（5）下面的广告图片区块没有标题，则使用<div>。

3，这里还使用了<main>元素包裹了页面中的主要内容。

（1）本样例用<main>包裹了<article>。如果页面有多个<article>，也同样放置在<main>元素内部。

（2）不能把<main>嵌套到<article>里边。而且一个页面只能有一个<main>元素。

（3）<main>对屏幕阅读器很重要。有了它，屏幕阅读器就可以跳过那些次要的内容，比如页眉，导航菜单，广告，侧边栏等，直达内容。

4，页面代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>航歌</title>
  <link rel="stylesheet" href="hangge.css">
</head>

<body>
<div id="wrapper">
	<header class="SiteHeader">
	  <img src="logo.png" alt="hangge.com">
	  <h1 style="display:none">hangge.com</h1>
	</header>

	<aside class="NavSidebar">
	  <nav>
		<h2>热门文章</h2>
		<ul>
		  <li><a href="...">Swift - 委托（delegate）的介绍，及使用样例</a></li>
		  <li><a href="...">Swift - 让程序挂起后，能在后台继续运行任务</a></li>
		  <li><a href="...">Swift - 产生不重复数字的随机数生成器</a></li>
		  <li><a href="...">More ...</a></li>
		</ul>
	  </nav>
	  
	  <section>
		<h2>关于我们</h2>
		<p>这个是一个简短的介绍。这个是一个简短的介绍。这个是一个简短的介绍。这个是一个简短的介绍。
		</p>
	  </section>
	  
	  <div>
		<img src="ad.png" alt="Luckies cigarette ad: it's toasted">
	  </div>
	</aside>

	<main>
	<article class="Content">
	  <header class="ArticleHeader">
		<h2>欢迎来到hangge.com</h2>
		<h3>航歌 - 做最好的开发者知识平台</h3>
		<p class="Byline">by hangge.com</p>
	  </header>

		<p>前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。</p>
		<br/>
		<h3>小标题1</h3>
		<p>前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。</p>   
		<br/>
		<h3>小标题2</h3>
		<p>前面讲了如何让程序申请后台短时运行。但这个额外延长的时间毕竟有限。</p>
	</article>
	</main>

	<footer>
		<p class="Disclaimer">hangge.com 版权所有,未经允许不得转载</p>
		<p>
		<a href="index.html">关于我们</a>
		<a href="index.html">联系我们</a>
		<a href="index.html">帮助</a>
		</p>
		<p>Copyright © 2015</p>
	</footer>
</div>  
</body>
</html>

5，样式 hangge.css

article, aside, figure, figcaption, footer, header, hgroup, nav, section, summary {   
  display: block;   
}

*{
   margin: 0px;
   padding: 0px;
}

body {
  font-size: medium;
  font-family: "Helvetica","Hiragino Sans GB","Microsoft Yahei", sans-serif;
}

a {
	color: #999;
	text-decoration: none;
	cursor: pointer
}

a:hover {
	color: #5188a6;
	text-decoration: none
}

#wrapper {
	max-width: 853px;
	min-width: 400px;
}

header.SiteHeader {
  padding: 10px;
  background: #000000;  
}

aside.NavSidebar
{  
  padding: 5px 15px 5px 15px;
  width: 203px;
  background-color:#f9f9f9;
  font-size: small;
  float:left;
}

aside.NavSidebar h2 {
  color: #6B6E3F;
  border-bottom: thin #6B6E3F solid;
  margin-bottom: 10px;
  margin-top: 20px;
}

aside.NavSidebar ul {
  padding-left: 15px;
}

aside.NavSidebar li {
  padding-bottom: 8px;
}

aside.NavSidebar img {
  margin-top: 20px;
  border: white solid 4px;
}

.Content {
  padding: 20px;
  margin-left:233px;
}

.Content .LeadIn {
  font-weight: bold;
  font-size: large;
  font-variant: small-caps;
}

.Content h3 {
  color: #24486C;
  margin-bottom: 2px;
  font-size: medium;
}

.Content p {
  margin-top: 0px;
}

header.ArticleHeader {
  padding: 10px;
  margin: 10px;
  text-align: center;
}

header.ArticleHeader h2 {  
  font-size: xx-large;
}

header.ArticleHeader h3 {
  margin-top: 8px;
  font-weight: bold;
}

header.ArticleHeader .Byline {
  margin-top: 8px;
  font-style: italic;
  font-size: small;
}

footer {
  background: #333333;
  color:#c0c0c0;
  padding: 10px;
  text-align: center;
  font-size: x-small;	
  clear:both;
}

footer .Disclaimer {
  font-style: italic;
}

footer p {
  margin: 3px;
}