Question

我有以下目录结构：

我已经张贴了一个标题，该标题会出现在我的所有网页上，内容位于header.html中。

header.html中：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/custom_styles.css"></link>

    <script>     
    $(document).ready(function() 
    {
        var pathname = this.location.pathname;

        if( pathname.indexOf( 'index' ) > -1 )
        {
           $("#homepage").addClass( "active" );
        }
        else if( pathname.indexOf( 'java_archive' ) > -1 ) )
        {
            $("#javapage").addClass( "active");
        }

    });
    </script>
</head>
<body>

<nav class="navbar navbar-inverse navbar-static-top"> <!-- PavanD: navbar-static-top helps in removing the rounded navbar.-->
  <div class="container-fluid" style="background-color:#5F5F5F;"> <!--505050 can also be considered -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
    </div>
    <div id=headerEntries class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li id="homepage"><a href="index.html"><span class="glyphicon glyphicon-home"></span></a></li>
        <li><a href="#">CONCEPTS</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">C++</a></li>
        <li id="javapage"><a href="java_archives/index.html">JAVA</a></li>
        <li><a href="#">ORACLE</a></li>
        <li><a href="#">DATA STRUCTURES</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">REACH US</a></li>          
        <li><a href="about.html">ABOUT</a></li>
        </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span>Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span>Login</a></li>
      </ul>
    </div>
  </div>
</nav>

</body>
</html>

我的index.html如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Programming Pages</title>
    <meta charset="utf-8"></meta>
  <meta name="viewport" content="width=device-width, initial-scale=1"></meta>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></link>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="css/custom_styles.css"></link>
    <script> 
    $(function(){
      $("#headerContent").load("header.html"); 
    });
    </script> 
</head>

<body>
<div id="headerContent"></div>

<div class="container"> <!-- PavanD: Evaluate between container-fluid and container.-->
  <div class="row">
    <div class="col-sm-12 img-rounded" style="background-color:#F1F1F1;">
        <!-- PavanD: img-rounded helps in rounding the intro information -->

<h3 class="text-center">Welcome to the site!</h3>

<p>Getting placed into an established Software Company during Campus Recruitments is the dream of most Engineering students. All it needs is demonstrating technical expertise related to Computer Programming.</p>

<p>Computer Programming is a promising area and has great scope for opportunities. It is often misunderstood as being quite difficult. This is especially true for students who are not
from Computer Science or Information Technology braches. Also, students from Computer Science or Information Technology tend to stick to the programmes which they have had in their programming lab and Engineering curriculum itself is a bit hectic that most do not find time or guidance
to explore these areas. Moreover, there can be multiple solutions to the same problem. All these are very simple yet important things that ultimately help a student in building his technical expertise.</p>

<p>The content of this website is written taking into consideration the above fact. This wesite helps students receive programming guidance in an unorthodox way which is more closer to a students perspective and thus helps the student grasp the concept instead of having to by-heart it.</p>

<p>As it stands now, the website has two broad categories. 
        <li><b>BEGINNERS</b></li><li><b>INTERMEDIATE</b></li></p>        
<p>Students can always post their questions by visting the Reach Me page.</p>

<p class="text-right">Happy Programming,</p>
<p class="text-right">Webmaster.</p>

    </div>
  </div>
</div>    


</body>
</html>

我的java_archives / index.html如下所示：

<!DOCTYPE html>
<html>
  <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script> 
    $(function(){
      $("#headerContent").load("../header.html"); 
    });
    </script> 
  </head> 
  <body> 
     <div id="headerContent"></div>
      <p>Reached Java Page!.</p>
  </body> 
</html>

我注意到在 root / index.html 和 root / java_archives / index.html 中呈现标头的方式有所不同。我想传达的差异可以在下面的屏幕截图中看到：

基本上，我觉得我在css文件夹中的css在java_archives / index.html的评估过程中没有被选中

我的root / css / custom_styles.css看起来像这样：

.navbar-inverse .navbar-nav{

}

.navbar-inverse .navbar-nav > li > a {
    font-family: sans-serif;
  color: #ffffff; /* PavanD: This is the color of the elements when they load. */
}
.navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus {
  background-color: #000000; /* PavanD: When you click the top menu items, they have to be rendered in black.*/
    color: #ffffff; /* PavanD: This is the color of the elements when they are clicked. We want it to be white so this.*/
}

.navbar.navbar-inverse .navbar-nav > .active,
.navbar.navbar-inverse .navbar-nav > .active > a,
.navbar.navbar-inverse .navbar-nav > .active > a:hover,
.navbar.navbar-inverse .navbar-nav > .active > a:focus {
  background-color: #8AC007;
  color: #FFF;
}

li{
    font-family:"Segoe UI",Arial,sans-serif;font-weight:normal;
}

.navbar-nav > li > a {padding-top:10px !important; padding-bottom:10px !important;}
.navbar {min-height:40px !important}

我在这里缺少什么东西吗？我对CSS很新，因此任何输入都会有所帮助。

谢谢，帕。

编辑：以下是对java_archives / index.html的补充。在root / index.html的情况下，这是最重要的一个，我可以看到我的custom_styles.cxx覆盖了bootstrap中的一个。但在第二种情况下，我的样式表被覆盖了。我无法理解为什么会这样发生。

Answer 1

除了 root / java_archives / index.html 文件中缺少的css/custom_styles.css ....

使用相对路径，例如css/custom_styles.css，浏览器会查找java_archives/css/custom_styles.css，而不是尝试在服务器的根目录中找到它。

您需要将子文件夹的路径更新为../css/custom_styles.css或使用固定路径/css/custom_styles.css

Answer 2

只需更新您的 root / java_archives / index.html 代码，如下所示。

    <!DOCTYPE html>
    <html>
      <head> 
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="../css/custom_styles.css"></link>

        <script> 
        $(function(){
          $("#headerContent").load("../header.html"); 
        });
        </script> 
      </head> 
      <body> 
         <div id="headerContent"></div>
          <p>Reached Java Page!.</p>
      </body> 
    </html>

CSS没有包含在子目录中

2 个答案: