时间戳

首页 > 解决方案 > 如何创建一个向下跳跃的滚动，以增加视口的大小

html - 如何创建一个向下跳跃的滚动，以增加视口的大小

问题描述

我正在尝试使用 html 和 css 编写一个非常基本的网站。每次滚动时，我希望它滚动窗口的整个长度并出现一个新段落（居中）。我画了一张照片来表达这个想法。这是我到目前为止提出的代码，我正在空白。我已经有将近 2 年没有打开我的文本编辑器了，这是我的第一个项目。我需要帮助。

即使您可以给我语言，以便我可以更好地找到有关如何实现我想要实现的目标的教程……那太棒了。:) 谢谢

现在我的居中文本是固定的，我知道这是一个问题。

html {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;

}

article {
  width: 42.5%;
  margin: auto;

}


p {
  font-size: 12pt;
  font-family: Times New Roman;
}


a {
  text-decoration: none;
}


.content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.menu a {
  display:block;
  color: #000000;
}

.menu a:hover{
  text-decoration: underline;
  color: #000000;
  
}

.menu {
  float: right;
  clear: left;
  text-align: right;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>hellomynameischristian</title>
    <link rel="stylesheet" type="text/css" href="../css/hellomynameischristian.css">

  </head>
  
    <body>
      
      
      
      <div class="menu">
        <a href="../html/hellomynameischristian.html">homepage</a>
        <a href="https://www.behance.net/christianmorgan2">design portfolio</a>
        <a href="https://www.instagram.com/christian.m.morgan/">follow me on ig</a>
      </div>
      
      <div class="content">
         <p>
                     Centered text.


            </p>
          
        
      </div>
           
      
  
   
   
          
    
  
  
  
    </body>
</html>

所需网页布局的草图

标签： htmlcssscroll

解决方案

根据您的草图，我添加了：

  • 一个导航容器，其中的菜单元素将具有和position: fixed，使用适合您需要的值。同样，项目也显示为行。请记住，这些值是添加到标签中的，而不是.top: 20pxright: 20pxdisplay: flex<ul><nav>

  • 三个带有文本内容的 div 容器。每个 div 都有display: flex,justify-content: center和align-items: center, 这将使子元素水平和垂直居中。

  • 每个 div 容器都将具有width: 100%andheight: 100vh，因此请删除您在 CSS 样式中添加到 HTML 的高度和宽度值。

希望这能更清楚你的情况，使用 flexbox，他是你的新朋友。

这是一个片段：

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.part1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #2980b9;
}

.menu {
  display: flex;
  position: fixed;
  top: 20px;
  right: 20px;
}

.menu li {
  margin-left: 10px;
}

.part2 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #2c3e50;
}

.part3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-color: #16a085;
}
  <nav>
    <ul class="menu">
      <li>Home</li>
      <li>Item1</li>
      <li>Item3</li>
      <li>Item4</li>
      <li>Item5</li>
    </ul>
  </nav>

  <section class="part1">
    <p>I am centered</p>
  </section>

  <section class="part2">
    <p>I am centered</p>
  </section>

  <section class="part3">
    <p>I am centered</p>
  </section>

之后，您可以添加这个带有漂亮动画的单页滚动：http: //peachananr.github.io/onepage-scroll/Demo/demo.html

你只需要将你<section>的 's 包装在一个 div 中。

<div class="main">
  <section></section>
  <section></section>
  <section></section>
</div>

推荐阅读