A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 南国之南 中级黑马   /  2016-7-11 21:39  /  1473 人查看  /  4 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

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>

4 个回复

倒序浏览
666666666666666666666666666
回复 使用道具 举报
梦想追逐者 发表于 2016-7-11 22:11
666666666666666666666666666

来来来,一起分享啊
回复 使用道具 举报
666666666666666666
回复 使用道具 举报
纯HTML语言写的?
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马