html - <a href > 链接只能以一种方式工作-6ren

html - 链接只能以一种方式工作

转载作者：太空宇宙更新时间：2023-11-04 12:29:11

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

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;
}

我的文件文件夹:

enter image description here

当我尝试检查元素时

enter image description here

最佳答案

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

小写你的文件名。 Main.html 变为 main.html，所有其他 html 文件都相同。
使用适当的<html>打开和关闭标签。这很重要!
你可以使用 <link>包含您的样式的标记 (stylesheet.css)
我添加了“我是主页”和一个标题来表明导航有效
您可以将相同的内容应用到您的 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>