如何使用HTML和CSS在网站中添加不同的部分？
[英]How do I add different sections in a website using HTML and CSS?
问题描述
我正在建立一个网站（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）的示例，其中按钮向下滚动。 我想尝试做一些与此类似的事情。 有帮助吗？
提前致谢。
3 个解决方案
解决方案1
0 2019-03-24 01:33:15
要自动滚动到另一个部分，您可以使用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"> </div>
解决方案2
0 2019-03-24 02:23:10
你看过scroll-behavior: smooth吗？ 没有iOS Safari支持，但有一个polyfill 。
来自MDN
当导航或
CSSOM滚动API触发滚动时，滚动行为CSS属性设置滚动框的行为。
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>
解决方案3
0 2019-03-24 02:27:42
再见，
我使用了原始源代码，因此这个简单的解决方案完全基于您的示例。 顺便说一下，它也适用于手机。 我从朋友的网站上获取了部分内容，你可以放任何东西
<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>
希望能帮助到你
祝你有美好的一天，
安东尼
如何在 bootstrap 4 中使用 html 和 css 添加水平线
[英]How do i add an horizontal line using html and css in bootstrap 4
如何将我自己的图像添加到以HTML和CSS链接到另一个网站的按钮？
[英]How do i add my own image to a button that links to another website in HTML & CSS?
如何将使用 html/css 制作的模态添加到我的引导程序网站？
[英]How do I add a modal made with html/css to my bootstrap website?
如何在我的 html/css 网站上垂直添加“填充”点导航样式
[英]How do I add a 'fill up' dot navigation style vertically on my html/css website
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.