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

最新推荐文章于 2023-04-27 11:18:23 发布

沈成才

最新推荐文章于 2023-04-27 11:18:23 发布

阅读量1.6w

点赞数 4

分类专栏： HTML5/CSS3 文章标签： html5 布局导航三段式经典布局

HTML5/CSS3 专栏收录该内容

42 篇文章 1 订阅

订阅专栏

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

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
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
HTML5 - 经典的上中下三段式布局（并使用<nav>实现侧边导航链接）

这个是一个典型的三段式部局，上下两块分别是网页头部与尾部。中间区域又分为左边的侧边栏区域和右边的内容主体区域。1，效果图如下： 2，页面元素说明：（1）在最外层我们添加了一个wrapper，把所有的页面元素都包在里面。好处是便于调整整个页面的最大最小宽度，以及是否让页面居中等。（2）中间区域，侧边栏是固定宽度，右侧内容区域是自适应宽度。（3）过去我们会把整个侧边栏都放在一个<div>中
复制链接

扫一扫