如何使用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.