Question

我正在尝试创建一个水平滚动的网站，但感觉我已经走到了尽头。我要创建的网站应该没有水平滚动条，并且在使用导航链接时需要在页面之间“跳转”。

这是我当前拥有的网站的基本版本-Horizontal Scrolling Project

我要实现的目标：

导航链接应该是唯一的导航方式，而滚动应该不会对导航产生任何影响。

每个模块应位于单个页面上，当模块的高度高于页面高度时，它能够滚动到模块底部是非常重要的。导航栏和页脚也应该始终可见。

最后但并非最不重要的一点，它应该能够与Bootstrap 4一起使用。

请注意，我不希望有人为我完成整个项目，而是如果有人可以帮助我或知道我可以签出的任何资源，我将不胜感激！

代码：

<html>
<body>
  <div class="bar">
    <div class="container-fluid">
      <div class="row">
        <div class="col text-left">
          <p></p>
        </div>
        <div class="col text-center">
          <span class="main-link">
            <a href="#" title="Download" target="_blank" class="hover">Download</a>
          </span>
        </div>
        <div class="col text-right">
          <p></p>
        </div>
      </div>
    </div>
  </div>

  <div class="main">
    <div class="container">
      <div class="row">
        <!--MODULE START-->
        <div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
          <p class="title">01</p>
        </div>
        <!--MODULE END-->

        <!--MODULE START-->
        <div class="module col-sm-12 offset-sm-0 col-md-10 offset-md-1 col-10 offset-1 text-center">
          <p class="title">02</p>
        </div>
        <!--MODULE END-->
      </div>
    </div>
  </div>

  <footer class="footer">
    <div class="container">
      <p>Made by Jeroen</p>
    </div>
  </footer>

</body>
</html>

如何创建水平滚动网站？

0 个答案: