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. poj1691--Painting A Board(拓扑+dfs)

    题目链接:点击打开链接 题目大意:一个矩形由n个小矩形组成,如今要给小矩形染色,可是颜料会向下滑,为了防止弄乱颜料,所以要先染上面的矩形,后然染以下的矩形.每一次改变颜色都要用一个新的刷子.问最小用多 ...

  2. 环信ONE SDK架构介绍

    环信ONE SDK架构介绍 摘要 环信即时通讯SDK自2014年6月正式公布2.0版本号至今已走过一个年头.从主要的单聊功能,到群聊功能,再到聊天室的实现.SDK无论是功能.稳定性,还是易集成性都在一 ...

  3. 【Excle数据透视】如何创建多条件汇总的数据透视表

    创建多条件的数据透视表,源数据如下: 插入数据透视表 根据需求拖拽字段(统计该地区下销售人员销售业绩) 数据透视结果 数据透视表布局的各个区域说明 区域 说明 数值 用于显示汇总值数据 行标签 用于将 ...

  4. 【Python】创建和使用类

    面向对象编程是最有效的软件编写方法之一 创建Dog类 class Dog(): '''一次模拟小狗的简单测试''' def __init__(self,name,age): self.name = n ...

  5. OPENCV中数字图像处理知识运用

    cvZero():是让矩阵的值都为0,有初始化的作用,或者说清零~比如说:IplImage img=cvCreateImage(cvSize(640,480),IPL_DEPTH_8U,1);%创建一 ...

  6. java使用Runtime.exec()运行windwos dos或linux shell命令

    使用Runtime.exec()运行windwos dos或linux shell命令,按实际情况具体测试     实例代码: package com.bookoo.test.command; imp ...

  7. C# Excel

    using System.IO;using System.Text;namespace iLIS.Common{ ///<summary> ///生成Excel文档内容 /// 存入工作流 ...

  8. 怎样给filter加入自己定义接口

    .在Cfilter类的定义中实现Interface接口的函数的定义: //-----------------------Interface methods----------------------- ...

  9. android利用apkplug框架实现主应用与插件通讯(传递随意对象)实现UI替换

    时光匆匆,乍一看已半年过去了,经过这半年的埋头苦干今天最终有满血复活了. 利用apkplug框架实现动态替换宿主Activity中的UI元素.以达到不用更新应用就能够更换UI样式的目的. 先看效果图: ...

  10. JVM完全指南

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