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

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

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

  • 4
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值