Размещение большего количества контента на моем веб-сайте

ProgramBox

Размещение большего количества контента на моем веб-сайте

Post author:admin
Запись опубликована:28 октября, 2022
Post category:Вопросы по программированию

#html #jquery #css #twitter-bootstrap #web

#HTML #jquery #css #twitter-bootstrap #веб

Вопрос:

Итак, я новичок в веб-разработке, и я в настоящее время создаю веб-сайт для гипотетического запуска путешествий, поэтому у меня есть домашняя страница / целевая страница, но я не знаю, как добавить контент на свой веб-сайт, в основном я хочу, чтобы контент отображался при прокрутке вниз, в основном, как яхотите новый лист, где я могу разместить больше своего контента, я не знаю, как объяснить, но, например, когда мы посещаем веб-сайт, мы видим экран с домашней страницей, а затем прокручиваем вниз, чтобы показать больше контента. я хочу именно этого, я связываю домашнюю страницу, которую я создал, а такжеcss, пожалуйста, помогите мне с этим.

P.S: — Когда вы запускаете это в html, вы даже можете увидеть текст «Различные туры, которые мы проводим», который должен был быть на моем веб-сайте, на новом свежем экране, а не на той же странице, где у меня есть логотип и все остальное.

Запуск HTML-кода:-

 html {
  scroll-behavior: smooth;
}

body {
  background: url(https://i.pinimg.com/originals/e5/5c/e0/e55ce0b3aa7f8f1c520516dae8f691bf.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#content {
  text-align: center;
  padding-top: 25%;
}

html {
  height: 100%
}

@font-face {
  font-family: 'Gloss And Bloom Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Gloss And Bloom Regular'), url('Gloss_And_Bloom.woff') format('woff');
}

h1 {
  font-family: 'Gloss And Bloom Regular';
  font-size: 7em;
  color: white;
  text-shadow: 0px 4px 3px orange;
}

h3 {
  font-family: 'Satisfy', cursive;
  color: white
}

hr {
  border: 0;
  clear: both;
  display: block;
  width: 400px;
  border-top: 1px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.fade-in {
  animation: fadeIn 3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

#fade-in {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.navbar-brand:hover {
  background-color: yellow;
  color: white;
}

#secondPage {
  text-align: center;
  height: relative;
  float: bottom;
  color: black;
}

#heading {
  float: top;
  margin: 0;
  text-align: center;
  margin: 0 auto;
}

 <title>Wishy Travels</title>
<link href="https://fonts.googleapis.com/css2?family=Satisfyamp;display=swap" rel="stylesheet">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Wishy</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">Sign Up </a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" href="#">Login</a>
        </li>
      </ul>
    </div>
  </div>
</nav>



<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <div id="content">
        <h1 class='fade-in'> Wishy Travels </h1>
        <h3 id="fade-in">Don't listen to what they say, GO SEE.</h3>
        <hr>
        <button type="button" class="btn btn-light">EXPLORE!</button>
      </div>
    </div>
  </div>
</div>

<div id="secondPage">
  <h2>
    <center>THE VARIOUS TOURS WE DO</center>
  </h2>
</div>

<div id="heading">
  The Various Tours we do!
</div>





<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>

Развернуть фрагмент

1. Добавление контента при прокрутке вниз, чтобы избежать длительного времени рендеринга, немного старомодно. Взгляните на новые возможности CSS для достижения этой цели другим способом.

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

Ответ №1:

Хорошо, так что, возможно, мой первый ответ был более уместным. Если вам нужен полноэкранный целевой раздел, используйте настройку высоты окна просмотра (vh), чтобы он занимал 100% окна просмотра. Вы также можете объединить это с привязкой прокрутки css, чтобы гарантировать, что при прокрутке пользователя вниз целевой контент полностью исчезнет из поля зрения.

https://codepen.io/Ma3147/pen/oNzwJNP

 <div class='root'>
   <div class='landing-content'>
      <h1> Landing Page</h1>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
   </div>
   <div class='rest-content'>
      <h2>More Content</h2>
      <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
   </div>
</div>

.root{
   scroll-snap-type: y mandatory;
}
.landing-content{
   width: 100%;
   height: 100vh;
   background: red;
}
.rest-content{
   scroll-snap-align: start;
   background: blue;
   color: white;
   min-height: 100vh;
}
h2 {
    margin-top: 0;
}

https://css-tricks.com/introducing-css-scroll-snap-points/

https://codepen.io/Ma3147/pen/oNzwJNP

Ответ №2:

Существуют различные способы обработки nav в зависимости от используемой вами платформы. Однако, предполагая, что вы используете статические HTML-файлы…

Создайте отдельный файл для каждой страницы и обновите свои <a> теги, чтобы ссылаться на них. Затем поместите содержимое для каждой страницы в каждый файл

Структура файла:

index.html (целевая страница по умолчанию)
about.html

services.html

В вашем html:

   <a href="/about.html">About Page</a>

  <a href="/services.html">Our Services</a>

1. итак, после повторного прочтения вашего вопроса я вижу, что это не то, что вам нужно

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

3. взгляните на мой другой ответ, возможно, это поможет