不同页面的导航栏

Question

我知道这个问题听起来很愚蠢，但我是初学者所以请听我说完。我有一个带有文本但没有链接的导航栏（关于、项目等没有供用户访问的页面）。如何为用户添加页面以点击导航栏并转到它们（例如，当用户点击 "About" 时，他将转到我制作的关于页面）。我正在使用 HTML5 和 CSS3。感谢您的帮助！

列表代码：

    <ul class = "list"> 

        <a href = ""><li>Welcome |</li></a>
        <a href = ""><li>About |</li></a>
        <a href = ""><li>Projects</li></a>

    </ul>

Answer 1

创建一个文件夹。打开文本编辑器并粘贴以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
  </head>
  <body>
    <ul> 
      <li><a href="welcome.html">Welcome</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
    <h1>Welcome</h1>
  </body>
</html>

在刚创建的文件夹中将文件另存为 "welcome.html"。

创建另一个文本文档并粘贴以下代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>About</title>
  </head>
  <body>
    <ul> 
      <li><a href="welcome.html">Welcome</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
    <h1>About</h1>
  </body>
</html>

将该文件另存为 "about.html" 在同一文件夹中。

在浏览器中打开 "welcome.html"，看看它是否有效。

属性 href 是文件在您计算机上的路径。

不同页面的导航栏

Nav bar with different pages

html

css

navbar