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

学习要点

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

实例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         nav{width: 100%;height: 40px;background: #FF6677;text-align: center;padding: 6px}

         /*放在一行*/

         li{display: inline;}

         /*去掉a标签的横线*/

         a{text-decoration: none;}

     </style>

 </head>

 <body>

     <nav><ul>

         <li><a href="">首页</a></li>

         <li><a href="">电脑办公</a></li>

         <li><a href="">平面设计</a></li>

         <li><a href="">设计素材</a></li>

         <li><a href="">电脑办公</a></li>

         <li><a href="">平面设计</a></li>

     </ul></nav>

 </body>

 </html>

html5--2.6新的布局元素(5)-nav的更多相关文章

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

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

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

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

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

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

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

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

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

    html5--2.5新的布局元素(4)-aside/nav 学习要点 了解aside/nav元素的语义和用法 通过实例理解aside/nav元素的用法 aside元素(附属信息) aside元素通常用 ...

  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. linux 系统时间硬件时间同步

    1.设置系统时间:date-s 21/05/2016 date -s 08:21:21 2.系统时间同步到硬件时间: clock --systohc

  2. Linux内存段的分析

        Linux 应用程序的内存分配中,是用 segment(段)进行区别的,使用 size 命令进行查看: size a.out text data bss dec hex filename a. ...

  3. Oracle 修改带数据的字段类型

    http://www.cnblogs.com/LDaqiang/articles/1157998.html由于需求变动,现要将一个类型NUMBER(8,2)的字段类型改为 char.大体思路如下:   ...

  4. ubuntu下编译原生ffmpeg

    本文主要介绍Linux 系统下如何编译Ffmpeg,编译环境是Ubuntu 16.04,Ffmpeg版本是3.4.2.Windows环境 下如何编译ffmpeg前面有博文介绍,也录有视频,感兴趣的同学 ...

  5. Linux Sed命令具体解释+怎样替换换行符&quot;\n&quot;(非常多面试问道)

    Sed Sed是一个强大的文本处理工具 能够採用正则匹配.对文本进行插入删除改动等操作 Sed处理的时候,一次处理一行,每一次把当前处理的存放在暂时缓冲区.处理完后输出缓冲区内容到屏幕,然后把下一行读 ...

  6. Allegro Desgin Compare的用法与网表比较

    转:Allegro Desgin Compare的用法与网表比较 Allegro中自带有Design Compare工具,利用它可以比较明了的看到线路的差异.当然也可以通过SKILL进行比较,不过我们 ...

  7. 转：几款主流pcb软件比较

      原理图设计软件:会ORCAD就可以了,支持的Netlist超多,基本是业界标准. PCB Layout 软件 1.Protel,现在推AltiumDesigner.国内低端设计的主流,国外基本没人 ...

  8. Laravel 5.4---后端数据分页和前端显示分页结果

    后端数据(Eloquent 模型)分页 事先建立好Eloquent 模型和Controller 还有 前台的View.可以参考我之前的文章:Laravel建站03--建立前台文章列表和文章详情 在co ...

  9. vue proxyTable

    Vue-cli proxyTable 解决开发环境的跨域问题 字数474 阅读1685 评论1 喜欢3 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆 ...

  10. OpenCV2马拉松第15圈——边缘检測(Laplace算子，LOG算子)

    收入囊中 拉普拉斯算子 LOG算子(高斯拉普拉斯算子) OpenCV Laplacian函数 构建自己的拉普拉斯算子 利用拉普拉斯算子进行图像的锐化 葵花宝典 在OpenCV2马拉松第14圈--边缘检 ...