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. 如何让<input type="text" />中的文字居中

    高(height)和行高(line-height)相等.不能用vertical-align

  2. ubuntu 安装 rpm 软件包

    1.首先安装alien和fakeroot这两个软件,alien可以将rpm转换为deb包.命令sudo apt-get install alien fakeroot 2.使用alien将rpm包转为d ...

  3. Hadoop2.2.0-64位编译

    本作品由Man_华创作,采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可.基于http://www.cnblogs.com/manhua/上的作品创作. 实验环境:Ubunt ...

  4. Android自动滚动 轮播循环的ViewPager

    主要介绍如何实现ViewPager自动播放,循环滚动的效果及使用.顺便解决ViewPager嵌套(ViewPager inside ViewPager)影响触摸滑动及ViewPager滑动速度设置问题 ...

  5. C语言重要概念汇总

    作者:郭孝星 微博:郭孝星的新浪微博 邮箱:allenwells@163.com 博客:http://blog.csdn.net/allenwells Github:https://github.co ...

  6. linearLayout 和 relativeLayout的属性区别

    LinearLayout和RelativeLayout 共有属性: java代码中通过btn1关联次控件 android:id="@+id/btn1" 控件宽度 android:l ...

  7. CentOS下安装python3.x版本

    现在python都到了3.x版本,但是centos中自带的python仍然是2.7版本的,所以想把python换成3.x版本的. 但是这个地方有个坑,你要是直接编译安装了python3.x之后,估计你 ...

  8. git 工具 - 子模块（submodule）

    From: https://git-scm.com/book/zh/v2/Git-%E5%B7%A5%E5%85%B7-%E5%AD%90%E6%A8%A1%E5%9D%97 子模块 有种情况我们经常 ...

  9. View数据呈现相关技术

    一.了解Razor语法 1.Razor基本语法 a)输出单一变量时不需要加分号做结尾.如: <p>现在时刻:@DateTime.Now</p> b)输出一段含有空白字元或运算子 ...

  10. SRM 626 D1L1: FixedDiceGameDiv1，贝叶斯公式，dp

    题目:http://community.topcoder.com/stat?c=problem_statement&pm=13239&rd=15859 用到了概率论中的贝叶斯公式,而贝 ...