zoukankan      html  css  js  c++  java
  • nav元素

    将主要的、基本的链接组放进nav元素中。

    nav元素应用场合:

    (1)传统导航条:

    (2)侧边栏导航:

    (3)页内导航:本页面几个主要组成部分<section>之间的跳转

     1          <header>
     2              <h1>HTML5与CSS3的历史</h1>
     3                <nav>
     4                    <ul>
     5                        <li><a href="#HTML5">HTML5的历史</a></li>
     6                        <li><a href="#CSS3">CSS3的历史</a></li>
     7                    </ul>
     8                </nav>
     9            </header>
    10            <section id="HTML5">
    11                <h1>html5的历史</h1>
    12                <p>正文</p>
    13            </section>
    14            <section id="CSS3">
    15                <h1>CSS3的历史</h1>
    16                <p>正文</p>
    17            </section>

    (4)翻页导航:多个页面的前后页或博客前后文的滚动中

    简单的nav元素示例:

     1 <!DOCTYPE html>
     2 <html>
     3   <head>
     4     <title>MyHtml.html</title>
     5     <link href="CSS/test1.css" rel="stylesheet" type="text/css" />
     6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     7     <meta http-equiv="description" content="this is my page">
     8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     9     
    10   </head>
    11   
    12   <body>
    13       <h1>nav元素示例</h1>
    14       <nav>
    15           <ul>
    16               <li><a href="/">主页</a></li>
    17               <li><a href="/">主页</a></li>
    18               <li><a href="/">主页</a></li>
    19               <li><a href="/">主页</a></li>
    20               <li><a href="/">主页</a></li>
    21               <li><a href="/">主页</a></li>
    22           </ul>
    23       </nav>
    24       <article>
    25           <header>
    26               <h1>HTML5与CSS3的历史</h1>
    27               <nav>
    28                   <ul>
    29                       <li><a href="#HTML5">HTML5的历史</a></li>
    30                       <li><a href="#CSS3">CSS3的历史</a></li>
    31                   </ul>
    32               </nav>
    33           </header>
    34           <section id="HTML5">
    35               <h1>html5的历史</h1>
    36               <p>正文</p>
    37           </section>
    38           <section id="CSS3">
    39               <h1>CSS3的历史</h1>
    40               <p>正文</p>
    41           </section>
    42           <footer>
    43               <p>
    44                   <a href="?edit">编辑</a>|
    45                   <a href="?delete">删除</a>
    46               </p>
    47           </footer>
    48       </article>
    49       <footer>
    50           <p><small>版权所有</small></p>
    51       </footer>
    52   </body>
    53 </html>
    54                   
  • 相关阅读:
    Excel电子表格操作
    word文档编辑
    中英文输入
    个人借款合同范本
    Day-8:汇总数据
    Day-7:使用函数处理数据
    Day-6:创建计算字段
    Day-5:通配符过滤
    Day-4:高级数据过滤
    Day-3:过滤数据
  • 原文地址:https://www.cnblogs.com/1305yyf/p/6014050.html
Copyright © 2011-2022 走看看