Question

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

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

Answer 1

解决此问题的一些步骤：

小写您的文件名。 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>

<a href=""> Links only work one way</a>

1 个答案: