zoukankan      html  css  js  c++  java
  • HTML5 中的Nav元素详解

    什么是Nav元素

    Nav元素可以用作页面导航的链接组,在导航链接组里面有很多的链接,点击每个链接可以链接到其他页面或者当前页面的其他部分,并不是所有的链接组都要被放在nav元素里面,我们只需要把最主要的、基本的、重要的放在nav元素里面即可。

    比如说页脚底部如果有个版权申明,我们就不建议使用nav元素,而是使用footer元素是最合适的。一个页面中我们可用多个nav元素作为整体或者不同部分的导航

    nav元素的用法

    <body>

    <h1>nav的使用方法</h1>

    <nav>

    <ul>

    <li>

    <a href=nav元素.html>首页</a>

    </li>

    <li>

    <a href=aside元素.html>aside</a>

    </li>

    <li>

    <a href=section元素.html>section</a>

    </li>

    </ul>

    </nav>

    </body>

    Nav元素效果演示图如下:

    如果想实现多层嵌套,我们可以在下面新建一个独立的区块,我们使用article

    <article>

    <header>

    <h2>NAV-1</h2>

    <nav>

    <li>

    <a href=section元素.html>section</a>

    </li>

    <li>

    <a href=”新增的主体结构元素.html>s新增的主体结构元素</a>

    </li>

    </header>

    </article>//这就实现了一层的嵌套

    <article>

    <header>

    <h2>NAV-1</h2>

    <nav>

    <li>

    <a href=section元素.html>section</a>

    </li>

    <li>

    <a href=”新增的主体结构元素.html>s新增的主体结构元素</a>

    </li>

    </header>

    </article>

    Nav多层嵌套效果演示图:

    如果在底部有一些版权信息的话,我们最好加在footer里面。

    <footer>

    <p>

    <a href=/>版权信息</a>

    <a href=/>站点帮助</a>

    <a href=/>联系我们</a>

    </p>

    </foooter>

    Footer效果图如下:

    总结nav元素的方法

    1、传统的导航条

    以腾讯为例:

    2、侧边栏导航

    3、内页导航

    4、翻页操作

    原文链接:http://www.maiziedu.com/wiki/html5/nav/

  • 相关阅读:
    如何让背景图片全屏显示
    浅谈图片如何在页面中居中显示
    clientHeight、offsetHeight 区别 笔记
    使用Flexible实现手淘H5页面的终端适配
    max(min)-device-width和max(min)-width的区别
    HTML5 meta最全使用手册
    常见浏览器兼容性问题与解决方案
    响应式设计的性能优化(转)
    移动H5前端性能优化指南
    SQL Server Profiler使用方法
  • 原文地址:https://www.cnblogs.com/space007/p/6210632.html
Copyright © 2011-2022 走看看