黑马程序员技术交流社区
标题:
学习笔记之nav元素
[打印本页]
作者:
南国之南
时间:
2016-7-11 21:39
标题:
学习笔记之nav元素
nav元素是作为页面导航的链接组，其中的导航元素连接到其他界面或者当前页面的其他部分。但是并不是所有的导航元素都要放进nav元素中，只要将最主要的、基本的连接组元素放进nav元素即可。
nav元素应用：
1、传统导航栏
2、侧边栏导航
3、页内导航
4、翻页导航
下面是传统导航和页内导航的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板页</title>
</head>
<body>
<header >
<p>这里是页面导航部分，根据导航内容跳转到其他页面 </p>
<nav id="daohang">
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">留言</a></li>
</ul>
</nav>
</header>
<div id="main">
<p>这里是页内导航部分，根据导航内容跳转到当前页面的特定部分</p>
<article>
<h1>页内导航</h1>
<header >
<nav>
<ul>
<li><a href="#">W3C的标准</a></li>
<li><a href="#">HTML的历史</a></li>
<li><a href="#">CSS的发展进程</a></li>
</ul>
</nav>
</header>
<section id="one">
<h1>W3C的标准</h1>
<p>内容部分</p>
</section>
<section id="tow">
<h1>HTML的历史</h1>
<p>内容部分</p>
</section>
<section id="three">
<h1>CSS的发展进程</h1>
<p>内容部分</p>
</section>
</article>
</div>
<footer><p>版权声明，盗版必究</p></footer>
</body>
</html>
作者:
梦想追逐者
时间:
2016-7-11 22:11
666666666666666666666666666
作者:
南国之南
时间:
2016-7-11 23:26
梦想追逐者 发表于 2016-7-11 22:11
666666666666666666666666666
来来来，一起分享啊
作者:
草泥马9527
时间:
2016-7-19 01:41
666666666666666666
作者:
ustcerlzy
时间:
2016-8-6 15:05
纯HTML语言写的？
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2