基金会的顶杆坏了——我做错了什么

我正试图使用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>

刚刚发现它不起作用，因为我没有在到Foundation和Normalize css的链接上指定"rel='stylesheet'"one_answers"type='text/css'"。

相关内容

最新更新

热门标签：