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元素效果演示图如下:


HTML5-1.png

 


如果想实现多层嵌套,我们可以在下面新建一个独立的区块,我们使用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多层嵌套效果演示图:


HTML5-2.png

 


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


<footer>

<p>

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

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

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

</p>

</foooter>


Footer效果图如下:


HTML5-3.png

 



总结nav元素的方法


1、传统的导航条


以腾讯为例:


HTML5-4.png

 


2、侧边栏导航


HTML5-5.png

 


3、内页导航


HTML5-6.png

 


4、翻页操作



【本文由极速大发PK10独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 rfel.cn
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部