您的位置：首页 > Web前端 > HTML5

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

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

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;
}


原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_848.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航