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. 从有序数组中查找某个值 low_bound

    二分搜索 题意: 给定长度为n的单调不下降数列a0, ...an-1和一个数k,求满足ai>=k条件的最小的i. 不存在的情况下输出n. 输入: 5        3 2 3 3 5 6 输出: ...

  2. codeforces 283C

    给 n 中 钱币.以及每两种钱币的关系,表示,ai 的 个数 要大于 bi 组合成一个价值val,求方案数,好奇妙的一个处理方式,不得不说又学到了 #include<stdio.h> #i ...

  3. CentOS 5.5安装SVN(Subversion)

    检查已安装版本 #检查是否安装了低版本的SVN[root@localhost /]# rpm -qa subversion #卸载旧版本SVN[root@localhost modules]# yum ...

  4. ubuntu 安装时遇到 hash sum mismatch 处理方法

    ubuntu安装大软件时,下载经常容易出错,hash sum mismatch是其中一种,说到底还是网络不好,重试很多遍都是这个错误,最后的解决方案是把mismatch说的那个链接用firefox打开 ...

  5. Windows系统的Jenkins持续集成环境

    Windows系统的Jenkins持续集成环境 如题:本文将介绍如何在Windows环境下运用Jenkins部署持续集成环境.之所以写本文,是因为在最近工作当中,学习使用Jenkins时,确实遇到了一 ...

  6. 献给写作者的 Markdown 新手指南及语法

    烈推荐所有写作者学习和掌握该语言.为什么?可以参考: 『为什么作家应该用 Markdown 保存自己的文稿』. 『Markdown写作浅谈』 让你专注于文字而不是排版. 标题 只需要在文本前面加上 # ...

  7. php部分--题目：投票 重点：两个div套用，显示百分比；

    1.建立两个表格:要显示百分比的话,就要在选项表中加上一列标记number 2.链接数据库,并对题目和选项进行显示 <?php $db=new MySQLi("localhost&qu ...

  8. 【BZOJ4843】[Neerc2016]Expect to Wait 排序

    [BZOJ4843][Neerc2016]Expect to Wait Description ls最近开了一家图书馆,大家听说是ls开的,纷纷过来借书,自然就会出现供不应求的情况, 并且借书的过程类 ...

  9. 【BZOJ4568】[Scoi2016]幸运数字 倍增+线性基

    [BZOJ4568][Scoi2016]幸运数字 Description A 国共有 n 座城市,这些城市由 n-1 条道路相连,使得任意两座城市可以互达,且路径唯一.每座城市都有一个幸运数字,以纪念 ...

  10. SCRM从入门到精通01

    [SCRM从入门到精通01]如何基于微信开放接口开发企业的微信CRM? 业内一直都在传说微信是天生的CRM,可是没有人看到过微信CRM的真容.随着微信最新公众平台的改版和开放接口的微信认证开放,微信C ...