CSS 在一个文件中不起作用，但在另一个文件中起作用

Question

我有 2 个不同的 html 文件（位于同一目录中）。一个文件非常适合我的菜单。 http://gyazo.com/3ee7c319ceb57bb1e91efb16cc93c28d

但是，当我将完全相同的代码复制并粘贴到另一个 html 文件中时，菜单如下所示：http://gyazo.com/ac9d43e9dcfada048dc206e735a6a5d0

这是第一个（工作）文件的代码：

<!DOCTYPE html>
<html lang="en" class="no-js">

<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>Boxify: Free HTML5/CSS3 Template by Peter Finlan</title>
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
  <link href="css/styles2.css" rel="stylesheet">
</head>


<body>

  <div class="container">
    <div class="row nav-wrapper">
      <div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
        <p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
      </div>
    </div>


    <div class="overlay overlay-boxify">
      <nav>
        <ul>
          <li><a href="http://goldenhoney.zz.vc/index.php"><i class="fa fa-heart"></i>About</a>
          </li>
          <li><a href="#features"><i class="fa fa-flash"></i>Features</a>
          </li>
        </ul>
        <ul>
          <li><a href="#screenshots"><i class="fa fa-desktop"></i>Screenshots</a>
          </li>
          <li><a href="#download"><i class="fa fa-download"></i>Download</a>
          </li>
        </ul>
      </nav>
    </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/min/scripts-min.js"></script>
</body>

</html>

这是另一个文件的代码（不起作用）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>{$title}</title>
  <link rel="shortcut icon" href="{$url}/favicon.ico" />
  <link href="{$url}/{$theme_path}/{$theme_name}/style.css" rel="stylesheet" type="text/css" />
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  <script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.js"></script>
  <script type="text/javascript" src="{$url}/{$theme_url}/js/jquery.timeago.js"></script>
  <script type="text/javascript" src="{$url}/{$theme_url}/js/functions.js"></script>
  <link rel="shortcut icon" href="../favicon.ico">

**<!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'>
  <link href="css/styles2.css" rel="stylesheet">**
</head>

<body>
  <div class="topbar">
    <div class="header">
      <a href="{$url}">
        <div class="logo"></div>
        <div class="logo-small"></div>
      </a>
      <div class="search-input">
        <input type="text" id="search" placeholder="{$lng->search_for_people}">
      </div>
      <div class="search-container"></div>
      <div class="container">
        **<div class="row nav-wrapper">
          <div class="col-md-6 col-sm-6 col-xs-6 text-right navicon">
            <p></p><a id="trigger-overlay" class="nav_slide_button nav-toggle" href="#"><span></span></a>
          </div>
        </div>
        <div class="overlay overlay-boxify">
          <nav>
            <ul>
              <li><a href="http://goldenhoney.zz.vc/index.php"><i class="fa fa-heart"></i>About</a>
              </li>
              <li><a href="#features"><i class="fa fa-flash"></i>Features</a>
              </li>
            </ul>
            <ul>
              <li><a href="#screenshots"><i class="fa fa-desktop"></i>Screenshots</a>
              </li>
              <li><a href="#download"><i class="fa fa-download"></i>Download</a>
              </li>
            </ul>
          </nav>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/min/scripts-min.js"></script>**
        {$menu}
        <div class="topbar_margin"></div>
        {$content}
        <div class="row-body">
          <div class="footer">

            <div class="footer-container">
              <div class="footer-links">
                <a href="{$url}/index.php?a=page&b=tos">{$lng->terms_of_use}</a> -
                <a href="{$url}/index.php?a=page&b=privacy">{$lng->privacy_policy}</a> -
                <a href="{$url}/index.php?a=page&b=disclaimer">{$lng->disclaimer}</a> -
                <a href="{$url}/index.php?a=page&b=api">{$lng->developers}</a> -
                <a href="{$url}/index.php?a=page&b=contact">{$lng->contact}</a> -
                <a href="{$url}/index.php?a=page&b=about">{$lng->about}</a> -
                <a href="{$url}/index.php?a=admin">{$lng->title_admin}</a>
              </div>
              <div class="footer-languages">
                {$lng->language}: {$language}
              </div>
              <div class="footer-languages">
                Copyright &copy; {$year} {$footer}. {$lng->all_rights_reserved}. {$powered_by}
              </div>
            </div>

          </div>
        </div>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/min/scripts-min.js"></script>
</body>

</html>

Answer 1

您是否尝试过在文件中使用 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> 而不是 <link href="css/bootstrap.min.css" rel="stylesheet">。有时无法正确检测到路径，这就是为什么建议使用 bootstrapcdn 链接 css 文件。

Answer 2

想出来了，而不是：

<script src="js/demo1.js"></script>

我用过：

<script src="http://goldenhoney.zz.vc/themes/dolphin/html/js/demo1.js"></script>

我很开心。但对为什么我之前的代码不起作用感到困惑。

CSS 在一个文件中不起作用，但在另一个文件中起作用

CSS not working in one file, but working in the other

html

css

menu