CSS文件在特定文件夹中时未加载答案

【问题标题】：CSS file not loading while being in a specific folderCSS文件在特定文件夹中时未加载
【发布时间】：2016-04-16 08:31:00
【问题描述】：

我有以下代码：

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Accueil</title>

    <link rel="stylesheet" href="css/header-search.css" />
    <link rel="stylesheet" href="css/header.css" />

</head>

<body>

    <header class="header-two-bars">

        <div class="header-first-bar">
            <div class="header-limiter">
                <h1><a href="#">Jeannot<span>Boutique</span></a></h1>

                <div class="member-area-buttons">
                    <a href="form-register.html" class="signup-button">Sign Up</a>
                    <a href="form-login.html" class="login-user">Log In</a>
                </div>


                <div class="container-1">
                    <span class="icon"><i class="fa fa-search"></i></span>
                    <input type="search" id="search" placeholder="Search..." />
                </div>
            </div>

            <div class="clear"></div>
        </div>

        <div class="header-second-bar">
            <div class="header-limiter">
                <nav>
                    <a href="#"><i class="fa fa-male"></i> Accueil</a>
                    <a href="#" class="selected"><i class="fa fa-female"></i> Chaussures</a>
                    <a href="#"><i class="fa fa-folder-o"></i> Vêtements</a>
                    <a href="#"><i class="fa fa-pencil"></i> Accessoires</a>
                    <a href="#"><i class="fa fa-check"></i> Sur mesure</a>
                    <a href="#" style="color: pink;"><i class="fa fa-pencil"></i> Blog</a>
                    <a href="#" style="color: pink;"><i class="fa fa-check"></i> Promo</a>
                </nav>
                <div class="nav-social-media">
                    <a href="#" style="background-color:#3b5998;"><i class="fa fa-facebook"></i></a>
                    <a href="#" style="background-color:#55acee;"><i class="fa fa-twitter"></i></a>
                    <a href="#" style="background-color:#dd4b39;"><i class="fa fa-google-plus"></i></a>
                    <a href="#" style="background-color:#125688;"><i class="fa fa-instagram"></i></a>
                </div>
                <div class="clear"></div>
            </div>
        </div>

    </header>
</body>

基本上，我有一个我的 css 文件所在的文件夹。当我从css文件夹加载文件header.css时，它没有任何效果，但是一旦与index.html在同一位置，一切都完美了。

我一直在努力寻找答案，但没有办法。我的文件系统结构如下：

请帮我找出我的代码有什么问题。

PS：我已经使用了 W3 Validator，一切正常。

【问题讨论】：

您的 index.html 位于何处。它是否在存在 css 文件夹的同一文件夹中..
你的文件夹结构是什么？
请检查您的目录...您的 css 文件保存在哪里，您从哪里调用此 css 文件？ 解决方案：在浏览器中打开Inspect Element/Inspect，然后点击控制台查看错误。您是否在html源文件中写入了正确的文件名拼写？
| -css ---header.css ---footer.css -images -index.html
我已经用虚拟样式进行了测试，它们工作得很好。尝试清除浏览器历史记录并刷新页面。

标签： html css

【解决方案1】：

https://stackoverflow.com/a/9480801

添加
type="text/css"
到你的链接标签

虽然这在现代浏览器中可能不再需要，但 HTML4 规范声明这是一个必需的属性。

你可以试试这个：

指定 href="./style.css" 中的 .指定当前目录

【讨论】：

【解决方案2】：

使用

<link rel="stylesheet" href="/css/header-search.css" />
<link rel="stylesheet" href="/css/header.css" />

而不是

<link rel="stylesheet" href="css/header-search.css" />
<link rel="stylesheet" href="css/header.css" />

【讨论】：