Question

我正在尝试使用Foundation的Topbar功能来设计我的导航，但我现在得到的只是一个完全未格式化的项目符号列表。我现在没有自己的CSS或JS代码链接，它是所有基本的外部东西，如jQuery和Foundation。我已经链接了所有Foundation的Javascript和CSS文件，如下所示，我的浏览器控制台反映我没有错误;已找到我在HTML中调用的所有文件。我错过了什么？ Topbar为什么不出现？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <!-- Page metadata. -->
  <meta charset="UTF-8">
  <meta name="viewport" />
  <title>Coding &amp; Design in INFO250</title>
  <!-- Linked CSS files. -->
  <link href="css/external/foundation.min.css" />
  <link href="css/external/normalize.css" />
  <link href="css/app.css" rel="stylesheet" type="text/css" />
  <link href="css/media.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <nav class="top-bar" data-topbar role="navigation">
    <section class="top-bar-section">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">Coding &amp; Design in INFO250</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a>
        </li>
      </ul>

      <ul class="right">
        <li class="active"><a href="#">Home</a>
        </li>
        <li><a href="#">Section 508</a>
        </li>
        <li><a href="#">MySQL</a>
        </li>
      </ul>
    </section>
  </nav>
  <div class="bg-holder splash1">
    <div class="container">
      <h1>Coding &amp; Design</h1>
      <h3>in INFO250</h3>
    </div>
  </div>

  <!-- JavaScript, linked and otherwise. -->
  <script src="js/external/jquery-2.1.3.min.js" type="text/javascript"></script>
  <script src="js/external/fastclick.js" type="text/javascript"></script>
  <!--<script src="js/external/jquery.parallax-scroll.js"></script>
            <script src="js/external/jquery.pagepiling.min.js"></script>
            <script src="js/external/jquery.smooth-scroll.js"></script>-->
  <script src="js/external/foundation.js" type="text/javascript"></script>
  <script src="js/external/foundation.topbar.js" type="text/javascript"></script>
  <script src="js/app.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

</html>

Answer 1

刚发现它无法正常工作，因为我没有在Foundation和Normalize CSS的链接上指定“rel ='stylesheet'”和“type ='text / css'”。

基金会顶栏不起作用 - 我做错了什么？

1 个答案: