码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 中的Nav元素详解

时间:2016-12-22 14:26:42      阅读:342      评论:0      收藏:0      [点我收藏+]

标签:bsp   元素   line   结构   src   9.png   建议   ima   首页   

 

什么是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/

HTML5 中的Nav元素详解

标签:bsp   元素   line   结构   src   9.png   建议   ima   首页   

原文地址:http://www.cnblogs.com/space007/p/6210632.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!