<a href > 链接只能以一种方式工作

Question

我的导航栏似乎遇到了错误。当我从我的 "Technologies" 页面导航到主页时，它起作用了。但是，当我从主页导航到技术页面时，没有任何反应。你能解释一下这个错误吗，因为它真的没有任何意义。

HTML: 首页

<body>

<h1 class = "name"><font color = "#3399FF"> Prog-Assist |  </font><font size = "12"> Where Collaboration is Welcomed</font></h1>

<div id = "header">
    <div id = "gradient">
        <div class = "nav">

    <!-- container-fluid gives full width container of whole viewport -->

    <div class = "container-fluid">


    <ul id = "nav" class= "text-left">
        <li><a href = "Main.html">Home</a></li>
        <li><a href = "Tech.html">Technologies</a></li>
        <li><a href = "#">Programs</a></li>
        <li><a href = "#">Blog</a></li>
    </ul>

    <ul id = "nav" class = "text-right">
        <li><a href = "#"><strong>Sign Up</a></li>
        <li><a href = "#">Sign In</a></li>
        <li><a href = "#">Contact</strong></a></li>
    </ul>

    </div><!-- end container-fluid-->
        </div><!--end nav-->
    </div>
</div> <!-- end header -->

技术页面：

<body>

<h1 class = "name" ><font color = "#3399FF"> Prog-Assist |  </font><font size = "12"> Where Collaboration is Welcomed</font></h1>

<div id = "header">
    <div id = "gradient">
        <div class = "nav">

    <!-- container-fluid gives full width container of whole viewport -->

    <div class = "container-fluid">


    <ul id = "nav" class= "text-left">
        <li><a href = "Main.html">Home</a></li>
        <li><a href = "Tech.html">Technologies</a></li>
        <li><a href = "#">Programs</a></li>
        <li><a href = "#">Blog</a></li>
    </ul>

    <ul id = "nav" class = "text-right">
        <li><a href = "#"><strong>Sign Up</a></li>
        <li><a href = "#">Sign In</a></li>
        <li><a href = "#">Contact</strong></a></li>
    </ul>

    </div><!-- end container-fluid-->

        </div><!--end nav-->
    </div>
</div> <!-- end header -->

CSS 链接：

#nav {

list-style: none;

}

.nav a {

text-decoration: none; /*remove underline*/
text-transform: uppercase;
color: #00002E;

}

.nav li {

display: inline;
float: left;
padding: 10px;

}

.text-left {

float: left;
padding-left: 30px;
}

我的文件夹有文件：

当我尝试检查元素时

Answer 1

解决这个问题的一些步骤：

小写你的文件名。 Main.html 变为 main.html，与所有其他 html 文件相同。
使用正确的<html> 开始和结束标签。这很重要！
您可以使用 <link> 标签来包含您的风格 (stylesheet.css)
我添加了 "I'm the Main Page" 和标题以表明导航有效
您可以将相同的东西应用到您的 tech.html
导航和 css 样式也有效。

文件：main.html

<html>
<head>
    <title>Main Page</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>    
    I'm the Main Page.

    <h1 class = "name">
        <font color = "#3399FF"> Prog-Assist |  </font><font size = "12"> Where Collaboration is Welcomed</font>
    </h1>

    <div id = "header">
        <div id = "gradient">
            <div class = "nav">    
                <!-- container-fluid gives full width container of whole viewport -->    
                <div class = "container-fluid">    
                <ul id = "nav" class= "text-left">
                    <li><a href = "main.html">Home</a></li>
                    <li><a href = "tech.html">Technologies</a></li>
                    <li><a href = "#">Programs</a></li>
                    <li><a href = "#">Blog</a></li>
                </ul>    
                <ul id = "nav" class = "text-right">
                    <li><a href = "#"><strong>Sign Up</a></li>
                    <li><a href = "#">Sign In</a></li>
                    <li><a href = "#">Contact</strong></a></li>
                </ul>    
                </div><!-- end container-fluid-->
            </div><!--end nav-->
        </div>
    </div> <!-- end header -->
  </body>
</html>

<a href > 链接只能以一种方式工作

<a href > Links only work one way

html

css

header

hyperlink