如何使用 HTML 和 CSS 在网站中添加不同的部分？答案

【问题标题】：How do I add different sections in a website using HTML and CSS?如何使用 HTML 和 CSS 在网站中添加不同的部分？
【发布时间】：2019-03-24 01:19:40
【问题描述】：

我正在制作一个网站 (brickman.glitch.me) 并有一个滚动按钮。如何让它向下滚动到看起来不同的页面？

我尝试过使用 section 标签，但我不是最有经验的，所以我被卡住了。

<section class="company-heading intro-type" id="parallax-one">
  <div class="container">
    <div class="row product-title-info">
      <div class="col-md-12">
        <a class="ct-btn-scroll ct-js-btn-scroll" href="#section2"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
      </div>
    </div>
  </div>
  <div class="parallax" id="parallax-cta" style="background-image:url(https://www.solodev.com/assets/anchor/company-hero2.jpg);"></div>
</section>
<div class="main">
  <section id="section2">
    <div class="container jumbo">
      <div class="jumbotron">
        <p1>test</p1>

我想做这个，让它向下滚动到一个页面，它有不同的背景等，所以它看起来像一个不同的页面。我有一个来自朋友网站 (questallation.glitch.me) 的示例，其中按钮向下滚动。我想尝试制作类似的东西。有什么帮助吗？

提前致谢。

【问题讨论】：

尝试在滚动的section或div上添加样式：overflow;
html/css buttons that scroll down to different div sections on a webpage的可能重复

标签： html css scroll sections

【解决方案1】：

要自动滚动到另一个部分，您可以使用 href="x" 其中 x 是您要滚动到的部分的 ID。

这是一个小例子：

<div style="background-color: green;height: 2000px">
  <a href="#next-section">Hello</>
</div>
<div id="next-section" style="background-color: red; height: 2000px">
  &nbsp;
</div>

【讨论】：

【解决方案2】：

你看过scroll-behavior: smooth吗？没有iOS Safari 支持，但有polyfill。

来自MDN

滚动行为CSS 属性设置滚动行为导航触发滚动时的框或CSSOM滚动 API。

body {
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;  
}

nav {
  background-color: #000;
  display: block;
  padding: 1em 0;
  text-align: center;
}

nav a {
  color: #fff;
  margin: 0 1em;
  text-decoration: none;
}

.scrolling-box {
  background-color: #eaeaea;
  display: block;
  flex-grow: 1;
  overflow-y: scroll;
  scroll-behavior: smooth;
  text-align: center;
  width: 100vw;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

<nav>
  <a href="#1">1</a>
  <a href="#2">2</a>
  <a href="#3">3</a>
</nav>

<div class="scrolling-box">
  <section id="1">Section 1</section>
  <section id="2">Section 2</section>
  <section id="3">Section 3</section>
</div>

jsFiddle

【讨论】：

【解决方案3】：

喏，

我处理了您的原始源代码，因此这个简单的解决方案完全基于您的示例。顺便说一句，它也适用于移动设备。我从你朋友的网站上拿了部分内容，你可以放什么

<html lang="en">
<head>
    <title>Brickman Development: Work In Progress</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="shortcut icon" href="https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrickpfp.png?1553388536776" type="image/x-icon">
</head>

<body>
<div style="width: 100%; height: 100%; background: url('https://cdn.glitch.com/de4d94d3-7979-4904-8198-a53bd85f0d8a%2Fbrick.png?1553389376285'); background-position: 48% 41%; position:relative;">
    <h1 class="line-1 anim-typewriter">
    <mark>Brickman Development: Work In Progress</mark>
    </h1>

    <section class="company-heading intro-type" id="parallax-one">
    <div class="parallax" id="parallax-cta" style="background-image: url('https://www.solodev.com/assets/anchor/company-hero2.jpg');">
    </div>
    <div class="container">
        <div class="row product-title-info">
            <div style="background: #191a1d; position: absolute; bottom: 0; left: 50%" class="col-md-12">
            <a class="ct-btn-scroll ct-js-btn-scroll" href="#information"><img alt="Arrow Down Icon" src="https://www.solodev.com/assets/anchor/arrow-down.png"></a>
            </div>
        </div>
    </div>
    </section>
</div>

<section style="font-size: 38px" class="container">
    <div class="box-container primary row">
        <div class="one-full column">
            <h1 id="information"> About myself:</h1>
        </div>
        <div class="one-full column">
            <h6>
                I am Questallation, I started as a tiny bot that provided some utility commands, and some fun commands for my developer's server.
                Later on, my developer decided to work on the me to have it to specialise in one server. After a few friends
                wanted to me on thier servers, my developer changed the bot completely, and gave me a new name; Questallation.
                I have joined many new servers, and grown since, to what you see me today.
            </h6>
        </div>
    </div>


    <div class="box-container secondary row">
        <div class="one-full column">
            <h1> Commands:</h1>
        </div>
        <div class="one-full column">
            <h6>Please, come and see my commands,
                <a href="/commands">over here.</a>
            </h6>
        </div>
    </div>


    <div class="box-container primary row">
        <div class="one-full column">
            <h1> Credits:</h1>
        </div>
        <div class="one-full column">
            <h6>Theese people helped to improve me, over the times which I have lived:
                <a href="/credits">People over here.</a>
            </h6>
        </div>
    </div>
    </div>
</section>

<br/>
<footer class="center box-container secondary">
    <p class="no-margin"> Questallation | Excigma is not affiliated with discord in any way whatsoever |
        <a href="https://github.com/AlexFlipnote/ModestaCss" target="_blank" rel="noreferrer">CSS framework</a>
    </p>
</footer>

</body>
</html>

希望对你有帮助

祝你有美好的一天，
安东尼诺

【讨论】：