通过制作一个技术文档页面解决问题

Chinese 中文 HTML-CSS
1 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main id="main-doc">
     <nav id="navbar">
       <header>JS Documentation</header>
       <a class="nav-link" href="#introduction">Introduction</a>
       <a class="nav-link" href="#what should you already know">What should you already know</a>
       <a class="nav-link" href="#javasript">Javascript</a>
       <a class="nav-link" href="#hellow world">Hellow world</a>
       <a class="nav-link" href="#variables">Variables</a>
       </nav>
      <section id="introduction" class="main-section">
        <header>Introduction</header>
        <code><em>JavaScript is a cross-platform, object-oriented scripting language. It is a small and lightweight language. Inside a host environment (for example, a web browser), JavaScript can be connected to the objects of its environment to provide programmatic control over them.</em></code>
        <p>JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. Core JavaScript can be extended for a variety of purposes by supplementing it with additional objects; for example:</p>
        <p></p>
        <p></p>
        <ul><li>Client-side JavaScript extends the core language by supplying objects to control a browser and its Document Object Model (DOM). For example, client-side extensions allow an application to place elements on an HTML form and respond to user events such as mouse clicks, form input, and page navigation.</li></ul>
      </section>
      <section id="what_should_you_already_know" class="main-section">
        <header>What should you already know</header>
        <code></code>
        <p></p>
        <p></p>
        <ul><li></li></ul>
      </section>
      <section id="javascript" class="main-section">
        <header>Javascript</header>
        <code></code>
        <p></p>
        <p></p>
        <ul><li></li></ul>
      </section>
      <section id="hellow_world" class="main-section">
        <header>Hellow world</header>
        <code></code>
        <p></p>
        <p></p>
        <ul><li></li></ul>
      </section>
      <section id="variables" class="main-section">
        <header>Variables</header>
        <code></code>
        <p></p>
        <p></p>
        <ul><li></li></ul>
      </section>
      
    </main>
  </body>
</html>

为什么我的what should you know,hellow world,javascrip无法直接导航至相应文本。还有如何将导航栏和文本栏左右并排安放
技术文档页: 制作一个技术文档页面 | freeCodeCamp.org

2

href 和相应的 id 的值应该完全一样，才能跳转。例如，你写的这两句，一个有下划线而一个没有，所以不能跳转。

其他的问题你可以自己检查一下，我看到有的单词写错了，少一个字母。

3

我不理解你的这个问题。不过，如果是关于布局，你需要使用 CSS 的 flex 布局。你的代码里只有 HTML，没有 CSS。

1 Like