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. html5，audio音乐播放器

    最终,做了自己原来一直想要实现的事儿.得出的结果是,有些事儿一旦開始做了,那么它就并非非常难. 如今的我,正听着自己的播放器放出的<光辉岁月>写这篇周六清晨的博文.写的不是非常好.但也请各 ...

  2. Android---61---TabHost简单使用

    与TabHost结合使用的组件: TabWidget:代表选项卡的标签条 TabSpec:代表选项卡的一个Tab页面 TabHost不过一个简单的容器,它提供两个方法来创建.加入选项卡 newTabS ...

  3. C# DataTable 总结

    (1)构造函数 DataTable()   不带参数初始化DataTable 类的新实例. DataTable(string tableName)  用指定的表名初始化DataTable 类的新实例. ...

  4. centos配置ip

    /etc/sysconfig/network-scripts/ifcfg-eth0文件做如下修改 DEVICE=eth0 HWADDR=08:00:27:46:1D:E1 TYPE=Ethernet ...

  5. ORACLE物化视图具体解释

    一.物化的一般使用方法物化视图是一种特殊的物理表,"物化"(Materialized)视图是相对普通视图而言的.普通视图是虚拟表.应用的局限性大,不论什么对视图的查询.oracle ...

  6. jquery插件函数传参错误

    1.jquery传参通过json,可能的错误是,参数中的结束符写成了;

  7. Android----SharedPreferences(存储数据)

    SharedPreferences详解 我们在开发软件的时候,常需要向用户提供软件参数设置功能,例如我们常用的微信,用户可以设置是否允许陌生人添加自己为好友.对于软件配置参数的保存,如果是在windo ...

  8. 身份证归属地查询免费api接口代码

    描写叙述 :依据身份证编号 查询归属地信息. 身份证实体类: package org.wx.xhelper.model; /** * 身份证实体类 * @author wangxw * @versio ...

  9. 现在有一张半径为r的圆桌，其中心位于(x,y)，现在他想把圆桌的中心移到(x1,y1)。每次移动一步，都必须在圆桌边缘固定一个点然后将圆桌绕这个点旋转。问最少需要移动几步。

    // ConsoleApplication5.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<vector> ...

  10. HDFS源码分析数据块汇报之损坏数据块检测checkReplicaCorrupt()

    无论是第一次,还是之后的每次数据块汇报,名字名字节点都会对汇报上来的数据块进行检测,看看其是否为损坏的数据块.那么,损坏数据块是如何被检测的呢?本文,我们将研究下损坏数据块检测的checkReplic ...