HTML+CSS编写静态网站-09 导航元素

视频教程观看地址：http://study.163.com/course/courseMain.htm?courseId=1003879015上节课，我们已经把网站的最基本结构写好了.现在，让我们开始添加导航，内容和更多的细节。在大多数网站，你可以点击左上角的网站标志回到首页。现在我们的网站上只有一个页面。但是很快，我们将会有多个网页链接在一起。当网站访问者访问另一个网页时，我们要为它添加一个Home链接方便他们回到首页。所以，我将要包装我们的h1和h2元素，在这里键入一个链接属性，然后我们把标题1和标题2放到链接里面：       <header>              <a href = "index.html"><h1>I Love www.oxox.work</h1><h2>Easy and happy to learn</h2>              </a></header>就像这样。链接使用a标签创建。A是anchor的头字母。也就是锚定的意思，因为它可以用于将URL锚定到页面上的某些文本。那么，在这里，我们实际上使用anchor为我们的标题锚定一个链接，来去到另一个页面。在a标签的里面，你会注意到href属性。它是hyper link refence的缩写，也就是“超链接引用”的意思。在引号中，就是我们想要跳转到的HTML文件，也就是我们正在编辑的index.html文件。那么，接下来，在我们的header中，我们将以列表的形式创建导航。第一部分很简单.我们只需添加nav元素，这是导航的简称。你可以使用这个元素来包装任何类型的网站导航，在这里。它没有任何特殊的功能，它只是一个语义语句，表示说：这是我们在页面上的导航。       <header><a href = "index.html"><h1>I Love www.oxox.work</h1><h2>Easy and happy to learn</h2></a><nav></nav></header>在nav元素的里面，我们将创建一个无序的链接列表，像这样。              <nav>                     <ul>                     </ul></nav>ul元素是无序列表的简称,英语是unorder list。这里我说无序，是因为我们也可以创建一个有序列表ol。无序列表看起来像一个项目符号列表，而有序列表看起来像一个数字列表，现在，让我们来添加一些列表项。打开我们的UL元素，在这里，我打算输入一个列表项元素。然后我将键入单词“Vedio”。接着，键入另一个列表项。它是“About”。然后，最后一个列表项，是Contact.              <nav>                     <ul>                            <li>Vedio</li>                            <li>About</li>                            <li>Contact</li>                     </ul></nav>这里，我使用li标签创建了三个列表项元素。在里面我添加了一些文本.让保存我们文件，然后打开index.html看下效果：正如你可以看到，在顶部的标题元素是紫色的下划线。这是由浏览器提供的默认的超链接样式。在下面，我们的导航看起来像一个项目符号列表。现在，我们来为导航里添加一些链接，来使我们的网站访问者能够访问到不同的页面，所以，在Vedio列表项中，我们添加一个超链接。我将链接到index.html，因为我们的主页就是我们的索引页。这里把Vedio包装起来，就像这样。<li><a href = "index.html">Vedio</a></li>现在，我的About页面，我将做同样的事情，这一次，我把它链接到about.html，这个HTML页面将在后面的课程中添加，最后，同样在添加一个contact.html。                     <ul><li><a href = "index.html">Vedio</a></li>                            <li><a href = "about.html">About</a></li>                            <li><a href = "contact.html">Contact</a></li></ul>现在，我们有三个新链接在这里。第一个链接的是我们的主页。其他两个页面是我们的关于页面和我们的联系页面。这两个页面还不存在，我们将在后面来添加。让我们保存并刷新页面：如你所见，现在。对于我们的每一个页面都有超链接。如果你点击链接，现在，他们可能会有一些类型的错误。这里提示：页面或内容不存在，这是因为我们并没有添加这个HTML文件，下节课我们就来继续添加。更多精彩内容尽在视频中！本文固定链接：http://www.oxox.work/web/html-css/nav-element/ | 虚幻大学

查看原文：http://www.oxox.work/web/html-css/nav-element/