Question

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

编辑：通过更改网址的路径，然后更改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 -->

The result of the page

Answer 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”，它应该可以正常工作。

Answer 2

如果您的文件位于ROOT目录中，那么您的CSS文件必须位于名为＆＃34; CSS＆＃34;的文件夹中。它位于ROOT目录中，因此请将代码修改为：

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

Answer 3

我认为使用基本标签可能对此有所帮助。

<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">

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

CSS没有显示在根目录中

3 个答案: