html5--2.5新的布局元素(4)-aside/nav

学习要点

  1. 了解aside/nav元素的语义和用法
  2. 通过实例理解aside/nav元素的用法
    1. aside元素（附属信息）
      • aside元素通常用来设置侧边栏。
      • 用于定义article元素之外的内容(比如作者简介，版权声明)，前提是这些内容与article元素内的内容相关。
      • 同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。
    1. nav元素（导航）
      • 用来定义目录、导航栏、超链接
      • 并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
      • 在文章页面中，nav还可以用来给一个文字做一个目录的超链接

实例

一、aside做侧边栏

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>新元素布局</title>

     <style type="text/css">

         header{width: 100%;height: 10%;background: green}

         footer{width: 100%;height: 10%;background: blue;float: left;}

         section{height: 80%;background: DarkGray}

         aside{width: 20%;height: 80%;background: Aquamarine;float: left;}

         section{width: 80%;height: 80%;background: DarkGray;float: left;}

     </style>

 </head>

 <body style="margin: 0;height: 708px">

     <header>header</header>

     <aside>

         aside

     </aside>

     <section>

         section

     </section>

     <footer>footer</footer>

 </body>

 </html>

二、aside添加附加信息

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>2.4课堂演示</title>

 </head>

 <body>

     <aside>

         作者简介：..... <br>

         版权归属........

     </aside>

     <article>

         <header>

             <h3>文章标题</h3>

             <h5>作者：***</h5>

         </header>

         <p>我是正文********************<br>********************<br>********************<br>********************<br></p>

             <section>

                 <article>

                     <header><h4>网友A的评论</h4></header>

                     <p>评论内容......................</p>

                     <footer>发布时间：2015/10/20</footer>

                 </article>

                 <article>

                     <header><h4>网友b的评论</h4></header>

                     <p>评论内容......................</p>

                     <footer>发布时间：2015/10/20</footer>

                 </article>

             </section>

         <footer>

             <p>尾部：阅读：300 评论：80</p>

         </footer>

         <aside>

             <p>名词解释：-------</p>

             <p>本文参考了《****》：-------</p>

         </aside>

     </article>

 </body>

 </html>

三、在article里面做附属信息

html5--2.5新的布局元素(4)-aside/nav的更多相关文章

  1. html5--2.6新的布局元素(5)-nav

    html5--2.6新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素 aside元素通常用来设置侧边栏 ...

  2. html5--2.9新的布局元素(6)-figure/figcaption

    html5--2.9新的布局元素(6)-figure/figcaption 学习要点 了解figure/figcaption元素的语义和用法 通过实例理解figure/figcaption元素的用法 ...

  3. html5--2.9新的布局元素(5)-hgroup/address

    html5--2.9新的布局元素(5)-hgroup/address 学习要点 了解hgroup/address元素的语义和用法 通过实例理解hgroup/address元素的用法 对照新元素布局与d ...

  4. html5--2.7新的布局元素(4)-time

    html5--2.7新的布局元素(4)-time 学习要点 了解微格式的概念 掌握time元素的用法 微格式的概念 HTML5中的微格式,是一种利用HTML5中的新标签对网页添加附加信息的方法,附加信 ...

  5. html5--2.1新的布局元素概述

    html5--2.1新的布局元素概述 学习要点 了解HTML5新标签(元素)的优点 了解本章要学习的新的布局元素 了解本章课程的安排 HTML5新标签的优点: 更注重于内容而不是形式 对人的友好:更加 ...

  6. html5--2.4新的布局元素(3)-section

    html5--2.4新的布局元素(3)-section 学习要点 了解section元素的语义和用法 通过实例理解section元素的用法 article元素和section元素的区别和共同点 art ...

  7. html5--2.3新的布局元素(2)-article

    html5--2.3新的布局元素(2)-article 学习要点 了解article元素的语义和用法 完成一个简单的实例 article元素(标签) 用于定义一个独立的内容区块,比如一篇文章,一篇博客 ...

  8. html5--2.1新的布局元素(1)-header/footer

    html5--2.1新的布局元素(1)-header/footer 学习要点 了解header/footer的语义和用法 使用header/footer进行一个简单的布局 header元素(标签) 用 ...

  9. HTML5中支持新的媒体元素有这些

    HTML5对媒体的支持性很强,支持以下媒体元素: · audio  定义音频 · video  定义视频 · embed  作为外部应用的容器 · source  多种媒体源的支持 · track   ...

随机推荐

  1. srm 541

    资瓷点这里阅读该文章O_o 250 Solution 水题,最暴力的方法枚举就可以 Code #include <bits/stdc++.h> using namespace std; # ...

  2. Android Activity间动画跳转

    本博文主要介绍activity间动画跳转的问题,在这里讲一下怎么设置全部activity的动画跳转和退出跳转.事实上有些软件已经这样做了.比方我们都比較熟悉的大众点评网. 以下我们通过一个实例来看一下 ...

  3. JVM完全指南

    JVM完全指南     一:虚拟机内存图解   JAVA程序运行与虚拟机之上,运行时需要内存空间.虚拟机执行JAVA程序的过程中会把它管理的内存划分为不同的数据区域方便管理.     虚拟机管理内存数 ...

  4. Gunicorn、Supervisor

    简介 Gunicorn来源于Ruby的unicorn项目,是一个Python WSGI HTTP Server,通过pre-fork worker模型来管理和维护worker. 简而言之就是通过多进程 ...

  5. TP 上传excel

    <?php class ExcelAction extends Action{ public function read($filename,$encode='utf-8'){ vendor(' ...

  6. A20地址线问题

    [0]README text description from Zhaojiong's perfect analysis of Linux kernel . [1]A20地址线问题(干货来了) 198 ...

  7. Oracle exp使用正則表達式导出部分表

    假设数据库中有许多张表,而我们又仅仅想导出须要的那几张能够使用例如以下命令 --仅仅导出test1.test2表 exp myname/mypassword@orcl file = d:\my.dmp ...

  8. 不错的iOS相关的主页或站点 (更新于14-06-22)

    近期一直没事在翻一些站点看看资料学习下. 推荐几个不错的站点: http://www.raywenderlich.com/   这个站点有各种各样的教程,可惜是大部分都是英文教程,只是阅读起来还好.每 ...

  9. 首选项框架PreferenceFragment部分源代码分析

    由于要改一些settings里面的bug以及之前在里面有做过勿扰模式,准备对勿扰模式做一个总结,那先分析一下settings的源代码,里面的核心应该就是android3.0 上面的首选项框架Prefe ...

  10. Python 深入剖析SocketServer模块（二）（V2.7.11）

    五.Mix-In混合类 昨天介绍了BaseServer和BaseRequestHandler两个基类,它们只用与派生,所以贴了它们派生的子类代码. 今天介绍两个混合类,ForkingMix-In 和 ...