Question

我正在浏览有关如何建立网站的YouTube教程。这是一个很好的信息，但这个人没有提到如何使菜单按钮工作。例如，我有关于我，收藏报价，投资组合和联系我。我的index.html充当了我的关于我。我假设要制作喜欢的引号之类的工作，我需要将index.html复制/粘贴到quotes.html然后它可以点击，但它不起作用。看一下nav标签，我假设我需要使用class =＆＃34; current＆＃34;命令，但我已经看到它们实现的每个教程都使用了列表。我的代码中的导航代码不使用列表，所以我不确定如何将我的html页面菜单链接在一起。

如何制作喜欢的报价之类的东西可以点击，而不是发送给＆＃34;找不到这个网页＆＃34;错误？我知道我必须利用class =＆＃34; current＆＃34;，但我不确定如何将它合并到非列表环境中。我知道我需要为每个菜单项创建一个单独的html文件，但我不确定在这些文件中放入什么来使它们工作。澄清一下，一切都是可点击的，但我不知道如何使用按钮将我发送到新页面。例如，如果我点击Portfolio，它应该使用我的portfolio.html将我发送到该页面，但我不知道如何做到这一点。我怀疑问题在于我处理导航标签的方式。

这是我的index.html代码

    <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
        <title>Website!</title>
        <link rel="stylesheet" type="text/css" href="css/screen_styles.css" />
        <link rel="stylesheet" type="text/css" href="css/screen_layout_large.css" />
        <link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:500px)"
              href="css/screen_layout_small.css" />
        <link rel="stylesheet" type="text/css" media="only screen and (min-width:501px) and (max-width:800px)"
              href="css/screen_layout_medium.css" />
        <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->

    </head>

    <body>

        <div class="page">

            <header>

                <a class="logo" href="#"></a>

            </header>

            <article>

                <h1>Welcome!</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor 
                   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
                   nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
                   <a href="#">Duis aute irure</a> dolor in reprehenderit in voluptate velit esse c
                   illum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
                   proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


            </article>

            <div class="promo_container">

                <div class="promo one">

                    <div class="content">
                        <h3>Promo Heading Here</h3>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
                           dolore eu fugiat nulla pariatur.</p>
                        <p><a class="cta" href="">Visit our blog</a></p>
                    </div>

                </div>

                <div class="promo two">

                    <div class="content">
                        <h3>Promo Heading Here</h3>
                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia 
                           deserunt mollit est laborum.</p>
                        <p><a class="cta" href="">Read the article</a></p>
                    </div>

                </div>

                <div class="promo three">

                    <div class="content">
                        <h3>Promo Heading Here</h3>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit sed do eiusmod tempor 
                           inci did unt.</p>
                        <p><a class="cta" href="">Learn more</a></p>
                    </div>

                </div>
                <div class="clear-fix"></div>

            </div>

            <nav>

                <a href="index.html">About Me</a>
                <a href="quote.html">Favorite Quotes</a>
                <a href="portfolio.html">Portfolio</a>
                <a href="contact.html">Contact Me</a>

            </nav>

            <footer>

                &copy; Your Organization Name

            </footer>

        </div>

    </body>
</html>

这是我的screen_layout_large.css

@charset "UTF-8";

/* Layout (global rules for all sizes) */

body {margin: 0; padding: 0;}

header a.logo {
    display: block;
    position: absolute;
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

nav{
    width: 100%;
    display: block;
    position: absolute;
    background-color: #a6430a;
}

/* Layout Large Screens (default for older browsers) */

header {
    height: 275px;
    background: url(../images/banner_large.jpg) no-repeat right 0px;
}

header a.logo {
    width: 150px;
    height: 85px;
    top: 28px;
    right: 30px;
    background-image: url(../images/logo_large.png);
}

article{padding: 60px 20px 10px 20px;}

.promo_container {padding: 0px 0px 15px 20px;}
.promo_container .promo {
    width: 33%;
    float: left;
    background-position: 0px 3px;
}
.promo_container .promo .content {padding: 0px 30px 0px 70px;}

nav {top: 275px;}
nav a {margin: 12px 0px 10px 20px;}

@media screen and (max-width: 990px){
    footer {padding-left: 20px;}
}

这是我的screen_layout_medium.css

@charset "UTF-8";

/* Layout Medium Screens */

header {height: 200px; background: url(../images/banner_medium.jpg) no-repeat 90% 0px;}
header a.logo {
    width: 115px;
    height: 70px;
    top: 20px; right: 20px;
    background-image: url(../images/logo_medium.png);
}

nav {top: 200px;}
nav a {margin-right: 20px;}

.promo_container {padding: 0px 20px 15px 20px;}

.promo_container .promo {background-position: 0px 0px;}

.promo_container .promo .content {padding: 70px 30px 0px 0px;}

body {background-image: none;}

这是我的screen_layout_small.css

@charset "UTF-8";

/* Layout Small Screens */

header {height: 75px; background: url(../images/banner_small.jpg) no-repeat right 0px;}

header a.logo {
    width: 105px;
    height: 40px;
    top: 16px;
    right: 15px;
    background-image: url(../images/logo_small.png);
}

article {padding: 20px 20px 10px 20px;}

nav {
    position: static;
    padding: 10px 0px 10px 0px;
    background-color: #515673;
}

nav a {
    color: #a6abc5;
    display: block;
    margin: 15px;
    padding: 9px;
    border: 1px solid #a6abc5;
    background: url (../images/mobile_link_arrow.png) no-repeat right center;
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
}
nav a:hover {color: #fff; background-color: rgba(255,255,255,.15);}

.promo_container {padding: 0px;}

.promo_container .promo {
    width: auto;
    float: none;
    padding: 10px 0px 0px 0px;
    background-position: 20px 13px;
    border-top: 1px solid #ccc;
}
.promo_container .promo .content {padding: 0px 20px 5px 90px;}

footer {border-top: 1px solid #a6abc5;}

body {background-image: none;}

Answer 1

anchor代码（<a>）是将网页从一个网页引导到另一个网页的元素。您的锚标记看起来像<a class="logo" href="#">...</a>但它们看起来应该是：<a class="logo" href="index.html">...</a>。

每个页面都必须正确指出每个<a>标记将重定向到哪个文件。

Answer 2

首先你必须知道它是如何工作的链接我会给你一个例子，你想打开google.com可能是什么语法

<a class="logo" href="http://www.google.com">Google</a>

在上面的代码中class指定了必须在此链接上应用的CSS样式，href是指向它的实际链接以及标记内部{{1}当你点击它时，网页上会显示，如果你真的需要了解网页开发，谷歌会打开我会建议你W3schools

Answer 3

您的其他网页是否与您的＆＃39; index.html＆＃39;？带有href属性的anchor tags（）是使链接起作用的原因。但是，如果您未在href中指定正确的路径，则无法找到您尝试重定向到的文件。此外，如果您的网页设计新手，我建议您在http://www.w3schools.com/html/default.asp浏览W3Schools的教程，并在https://www.codecademy.com

上阅读CodeAcademy的教程。

两套教程之间会有一些重叠的内容，但它们会为你提供一个坚实的基础。

Answer 4

所有链接均为<a></a>个标记。如果您尝试链接同一目录中的两个页面，只需将该文件的名称添加到href属性即可。像这样：

<a href="quotes.html">Favorite Quotes</a>

请注意，您要在要单击的元素周围包含<a></a>标记。例如（图像，文本行等）上面所示的链接类型使用所谓的“相对路径”。这意味着您没有在href属性中使用完整的Web域和目录。这是链接页面的最简单方法，尤其是那些位于同一目录中的页面。

如何链接导航按钮

4 个答案: