时间戳

首页 > 解决方案 > “构建产品登陆页面”（FreeCodeCamp）-错误“当我单击导航元素中的 .nav-link 按钮时”

html - “构建产品登陆页面”（FreeCodeCamp）-错误“当我单击导航元素中的 .nav-link 按钮时”

问题描述

再会！

我在做一个页面编程任务，很长一段时间都解决不了“№5”当我点击nav元素中的一个.nav-link按钮时，我被带到了着陆页的相应部分。错误。请告诉我可能是什么问题？

链接项目：https ://codepen.io/vjusmamh-the-lessful/pen/abwzVeG

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./style.css" rel ="stylesheet">
</head>
<body>
    <a name = "start">
    <header id="header">
        </a> <img id ="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png">
        <nav id="nav-bar">
            <a  class="nav-link" href="#Features">Features</a>
            <a class="nav-link" href="#How it works " >How it works</a>
            <a  class="nav-link" href="#Pricing ">Pricing</a>
        </nav>
    </header>
</a>
    <main>
        
        <div id = "contact-block">
            <form id="form" action="https://www.freecodecamp.com/email-submit" method="get">
            <label for="email" id="email-label"> Handcrafted, home-made masterpieces</br></label>
                <input type="email" id="email" name="email" placeholder="Enter your email"></input>
            <div id="button-container">
              <input type="submit" id="submit" value="GET STARTED"></input>
            </div>
          </form>
        </div>
    


        <a name = "Features">
    <div id = "info-block">
        <ul id = "info-list">
            <li id = "info-li"><p><strong>Premium Materials</strong> </br>
                Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p></li>
            <li id = "info-li"> <p><strong>Fast Shipping</strong> </br>
                We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p></li></li>
            <li id = "info-li">Quality Assurance</strong> </br>
                For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p></li> </li>
            
            </ul>
    </div>
    </a>

    <a name = "How it works">
    <div id="video-id">
        <video id="video">
            <source src="https://www.youtube.com/embed/y8Yv4pnO7qc" >
        </video>
    </div>
</a>
 <a name = "Pricing">
    <div id = "columns-block">
        <div id="col">
            <div id="header-col">TENOR TROMBONE</div>
            <div id="h2-col"><p>$600</p></div>
            <div id="col-text"><p>Lorem ipsum. </br>
                Lorem ipsum.</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</br></p></div>
                <div id="col-button">
                    <form id="button-form">
                        <input id = "button" type="button" value="SELECT">
                    </form>
                </div>
        </div>
        <div id="col">
            <div id="header-col">BASS TROMBONE</div>
            <div id="h2-col"><p>$900</p></div>
            <div id="col-text"> <p>Lorem ipsum.</br>
                Lorem ipsum.</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</p></div>
                <div id="col-button">
                    <form id="button-form">
                        <input id = "button" type="button" value="SELECT">
                    </form>
                </div>
        </div>
        <div id="col">
            <div id="header-col">VALVE TROMBONE</div>
            <div id="h2-col"><p>$1200</p></div>
            <div id="col-text"><p>Plays similar to a Trumpet</br>
                Great for Jazz Bands</br>
                Lorem ipsum dolor.</br>
                Lorem ipsum.</p></div>
                <div id="col-button">
                    <form id="button-form">
                        <input id = "button" type="button" value="SELECT">
                    </form>
                </div>

        </div>

    </div>
</a>
    <footer id="footer">
        <nav id="nav-bar">
            <a href ="#start" class ="nav-link">Privacy</a>
            <a href ="#start" class ="nav-link">Terms</a>
            <a href ="#start" class ="nav-link">Contact</a>
        </nav>
    </footer>
</main>

</body>
</html>

您的浏览器信息：

用户代理是：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

挑战：构建产品登陆页面

标签： htmlcss

解决方案

你在哪里：

<a name = "Features">

改成：

<a name = "Features" id="Features">

您必须对页面中的所有锚点执行此操作。

再看一遍后，我发现您将整个部分包装在<a></a>标签中。通常，您只会像这样包装位置标题：

    <a name = "Features" id="Features">Features</a>

推荐阅读