CSS未显示在根目录中答案

【问题标题】：CSS not showing up in root directoryCSS未显示在根目录中
【发布时间】：2015-04-05 04:28:55
【问题描述】：

位于根目录中的索引页的 CSS 不起作用。我正在使用 php 包含一个包含导航栏的标题，但导航栏的 css 不起作用。它可以在其他页面上正常工作，但位于根索引中的任何页面都没有 css。

编辑：通过更改url的路径，然后更改css的文件目录来解决。

Solved
<link rel="stylesheet" type="text/css" href="/bootstrapwebsite/CSS/main.css">

Index.php
    <html>
    <?php    
        include '/includes/header.php';
    ?>
    </html>

header.php
    <html>
    <title>Bootstrap Basics</title>

    <!-- Gather all Required CSS -->
    <link rel="stylesheet" type="text/css" href="../CSS/main.css">
    <link rel="stylesheet" type="text/css" href="../CSS/header.css">
    <link rel="stylesheet" type="text/css"      href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <!-- End the css get -->

    <!-- Gather the jquery -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- End the jquery get -->

    <div>
        <header id="navigationHeader" class="navbar" role="banner">
            <div class="container">
                <nav class="collapse navbar-collapse" role="navigation">
                    <ul class="nav navbar-nav navbar-left mainnav-menu">
                        <li>
                            <a id="logo" href="#"><img src=""></img></a>
                        </li>
                    </ul>

                    <ul id="navbar" class="nav navbar-nav navbar-right">
                      <li>
                        <h4><i class="fa fa-group"></i><a href="http://localhost/bootstrapwebsite/players/players.php">&nbsp;&nbsp;Players&nbsp;&nbsp;</a></h4>
                      </li>      

                      <li>
                        <h4><i class="fa fa-shopping-cart"></i><a href="http://localhost/bootstrapwebsite/shop/shop.php">&nbsp;&nbsp;Shop&nbsp;&nbsp;</a></h4>
                      </li>

                      <li>
                        <h4><i class="fa fa-list-ol"></i><a href="http://localhost/bootstrapwebsite/leaderboards/leaderboards.php">&nbsp;&nbsp;Leaderboards&nbsp;&nbsp;</a></h4>
                      </li>

                      <li>
                        <h4><i class="fa fa-phone"></i><a href="http://localhost/bootstrapwebsite/support/support.php">&nbsp;&nbsp;Support&nbsp;&nbsp;</a></h4>
                      </li> 

                      <li>
                        <h4>
                            <a href="http://localhost/bootstrapwebsite/Registration/login.php"><i class="fa fa-user"></i>&nbsp;&nbsp;Guest&nbsp;&nbsp;</a>
                        </h4>
                      </li>          
                    </ul>
                </nav> 
            </div> <!-- /.container -->
        </header>
    </div>
</html>

<!-- javascript to determine current page and set it as active -->
<script>
$(document).ready(function () {    
    //Get CurrentUrl variable by combining origin with pathname, this ensures that any url appendings (e.g. ?RecordId=100) are removed from the URL
    var CurrentUrl = window.location.origin+window.location.pathname;
    //Check which menu item is 'active' and adjust apply 'active' class so the item gets highlighted in the menu
    //Loop over each <a> element of the NavMenu container
    $('#navbar a').each(function(Key,Value)
        {
            //Check if the current url
            if(Value['href'] === CurrentUrl)
            {
                //We have a match, add the 'active' class to the parent item (li element).
                $(Value).parent().addClass('active');
            }
        });
 });
</script>
<!-- end javascript -->

【问题讨论】：

标签： php html css

【解决方案1】：

问题出在这里：

<link rel="stylesheet" type="text/css" href="../CSS/main.css">
<link rel="stylesheet" type="text/css" href="../CSS/header.css">

如果 PHP 文件在根目录下，它不能访问“..”，因为它不存在。只需将 href 从“../CSS/main.css”更改为“CSS/main.css”，它应该可以正常工作。

【讨论】：

【解决方案2】：

如果您的文件位于 ROOT 目录中，那么您的 CSS 文件必须位于 ROOT 目录中名为“CSS”的文件夹中，因此请将您的代码修改为：

<link type="text/css" rel="stylesheet"  href="CSS/main.css" />
<link type="text/css" rel="stylesheet" href="CSS/header.css" />

【讨论】：

【解决方案3】：

我认为使用 base 标签可能会有所帮助。

<head>
    <base href="websiterootdirectorypath/or/baseurl/" />
</head>

这应该放在任何 CSS 或脚本链接之前的头部。然后在您的 css 或脚本的路径中，您只需引用它们从根目录进入的路径。所以

<link rel="stylesheet" type="text/css" href="CSS/main.css">
<link rel="stylesheet" type="text/css" href="CSS/header.css">

无论页面位于您网站结构中的哪个位置，路径都不会中断。

【讨论】：