Как добавить различные разделы на веб-сайт, используя HTML и CSS? - PullRequest
Новая
       57

Как добавить различные разделы на веб-сайт, используя HTML и CSS?

3 голосов
/ 24 марта 2019

Я делаю сайт (brickman.glitch.me) и у меня есть кнопка прокрутки.Как я могу сделать так, чтобы прокрутить вниз на страницу, похожую на другую?

Я пытался использовать тег раздела, но я не самый опытный, поэтому я застрял. 

<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 ]

0 голосов
/ 24 марта 2019

Вы смотрели на scroll-behavior: smooth? iOS поддержка Safari отсутствует, но есть polyfill .

От MDN

Свойство scroll-поведения CSS устанавливает поведение для прокрутки поле, когда прокрутка вызывается навигацией или CSSOM прокруткой API-интерфейсы.

enter image description here

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

0 голосов
/ 24 марта 2019

Ciao,

Я работал над вашим исходным исходным кодом, поэтому это простое решение основано именно на вашем примере.Кстати, это работает и на мобильном телефоне.Я взял содержание раздела с сайта вашего друга, вы можете поставить все, что 

<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>

Надеюсь, это поможет

Хорошего дня,Antonino

0 голосов
/ 24 марта 2019

Чтобы автоматически перейти к другому разделу, вы можете использовать href = "x", где x - это идентификатор раздела, к которому вы хотите перейти.

Вот небольшой пример: 

<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>
...