css - 如何在导航栏上添加链接？网页格式

Question

所以我刚刚开始制作自己的个人网站，但是，我遇到了导航栏问题。基本上，我希望能够单击导航栏上的标题，然后它会将我引导至页面上与该标题相关的部分。为了让事情更清楚。举个例子，这是我目前的导航栏:

<div class="about"> <a> About &nbsp; &nbsp; &nbsp;  </a> </div>
<div class="blog"> <a> Blog  &nbsp; &nbsp; &nbsp; </a> </div>
<div class="projects"> <a> Projects &nbsp; &nbsp; &nbsp </a> </div>

现在我的导航栏应该看起来像这样: 关于博客元素我网页的其余部分看起来像这样

<h1> About me </h1>
<p> Hi im nikki.. </p>

<h2> Blog </h2>
<p> This is my blog.. </p>

<h3> Projects </h3>
<p> First project last year .... </p>

现在我想要做的是单击导航栏上的关于，然后转到我页面上的关于部分？我该怎么做？

谢谢:)

Answer 1

尝试下面的代码，将样式添加到您的样式表。

    <style>
    .nav:after {
    content:"";
    clear:both;
    display:block;
    }
    .nav li {
     float: left;
     list-style-type: none;
     }
     </style>
     <ul class="nav">
       <li><a href="#about">About</a></li>
       <li><a href="#blog">Blog</a></li>
       <li><a href="#projects">Projects</a></li>
     </ul>
    <div id="about">
      Lorem Ipsum
    </div>
    <div id="blog">
      Lorem Ipsum
    </div>
    <div id="projects">
      Lorem Ipsum
    </div>