主页 / 问题 / 816169
Accepted
Даша Варшавская
Asked:2020-04-19 08:13:27 +0000 UTC2020-04-19 08:13:27 +0000 UTC

逐页站点

  • 772

同事们晚安。我们需要您在网站开发方面的经验。如何正确实现网站逐页布局？也就是说，例如，您有一个 Main 页面，上面有 nav、main、footer，并且此页面是全屏的，下面没有任何内容，也没有滚动。我将附上一个示例页面以获取更易于理解的问题。以下是如何正确实现这一点，这种类型的网站叫什么？在此处输入图像描述

css3

1 个回答

  1. Best Answer

    您可以使用 jQuery Tab ...查看三个页面（带有假数据）合二为一.. 熟练地处理此问题，您可以做好事

    * {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

ul a {
  font-size: 14px;
  color: #fbfbfb;
}

li,
a {
  outline: none !important;
}

ul {
  display: flex;
  height: 20vh;
  background: linear-gradient(45deg, darkblue, lightblue);
  background-position: center center;
  align-items: flex-end;
  justify-content: flex-end;
}

li {
  padding: .4vw .8vw;
}

.page {
  height: 100%;
  overflow: hidden;
}

.items {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5vh;
}

.item {
  width: 70%;
  height: 70%;
  margin: 0 auto;
}

.item p {
  font-size: .9em;
  font-family: Helvetica;
  font-weight: 600;
  padding: 2vw;
  text-align: center;
}

img {
  display: block;
  width: 380px;
  margin: 1vh auto;
}

h2 {
  text-align: center;
}

.item-blog {
  width: 100%;
  height: 80%;
  overflow-y: auto;
  position: relative;
  padding: 1em;
}

.post {
  text-align: left!important;
  background: #fbfbfb;
  padding: 6px;
  margin: 10px 0;
}

.post h3 {
  padding: 6px;
}

.header-post {
  display: flex;
  justify-content: space-between;
  background: lightgreen;
  align-items: center;
}

.spans span {
  font-size: 14px;
}

.spans span:last-child {
  font-weight: 900;
  font-family: Helvetica;
}
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $(".page").tabs();
  });
</script>

<div class="page">
  <ul>
    <li><a href="#a">О нас</a></li>
    <li><a href="#b">Комьюнити</a></li>
    <li><a href="#c">Блог</a></li>
    <li><a href="#d">Кодим</a></li>
    <li><a href="/">Обсуждения</a></li>
  </ul>
  <div class="items">
    <div id="a" class="item">
      <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt molestias earum doloribus eveniet? Enim modi consequatur ipsam maxime nam officia eveniet, adipisci et temporibus ad quo, doloremque error aliquam repellendus quaerat cupiditate magni
        quam? Eius eligendi dolorem nihil officia minima repellendus sapiente! Mollitia cupiditate, ea fugiat dolores recusandae atque explicabo dicta maiores? Explicabo, dolore aspernatur! Quo, molestiae! Id, facilis neque natus hic perferendis ex aut,
        inventore dolore libero et laborum exercitationem in atque vel minus. Ullam maxime dignissimos dicta et laboriosam fugit officia, distinctio atque saepe voluptas similique aliquid quisquam doloremque assumenda sapiente! Itaque, quod esse odio
        sunt dignissimos placeat.</p>
    </div>
    <div id="b" class="item">
      <img src="http://4555000.com/wp-content/uploads/busty-babes/Boney-busty-girl-tits.jpg" alt="">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit quisquam ab quas quibusdam nostrum assumenda reiciendis. Voluptatem debitis accusantium doloribus ut pariatur quibusdam odio dolorum, fugiat consequuntur ipsum iusto sit!</p>
    </div>
    <div id="c" class="item item-blog">
      <h2>Блог Invisible Cumunite</h2>
      <div class="blog">
        <div class="post">
          <div class="header-post">
            <h3><a href="">Название поста</a></h3>
            <p class="spans">
              <span>Имя фамилия</span>
              <span>Дата и время публикации</span>
              <span> &#8730; </span>
            </p>
          </div>
          <p>Далеко-далеко за словесными горами в стране гласных, и согласных живут рыбные тексты. Которое алфавит строчка составитель реторический имеет вдали снова переулка знаках вопрос использовало своего то, возвращайся, предупредила если лучше они
            решила? </p>
        </div>

        <div class="post">
          <div class="header-post">
            <h3><a href="">Название поста</a></h3>
            <p class="spans">
              <span>Имя фамилия</span>
              <span>Дата и время публикации</span>
              <span></span>
            </p>
          </div>
          <p>Далеко-далеко за словесными горами в стране гласных, и согласных живут рыбные тексты. Которое алфавит строчка составитель реторический имеет вдали снова переулка знаках вопрос использовало своего то, возвращайся, предупредила если лучше они
            решила? </p>
        </div>

        <div class="post">
          <div class="header-post">
            <h3><a href="">Название поста</a></h3>
            <p class="spans">
              <span>Имя фамилия</span>
              <span>Дата и время публикации</span>
              <span></span>
            </p>
          </div>
          <p>Далеко-далеко за словесными горами в стране гласных, и согласных живут рыбные тексты. Которое алфавит строчка составитель реторический имеет вдали снова переулка знаках вопрос использовало своего то, возвращайся, предупредила если лучше они
            решила? </p>
        </div>

        <div class="post">
          <div class="header-post">
            <h3><a href="">Название поста</a></h3>
            <p class="spans">
              <span>Имя фамилия</span>
              <span>Дата и время публикации</span>
              <span></span>
            </p>
          </div>
          <p>Далеко-далеко за словесными горами в стране гласных, и согласных живут рыбные тексты. Которое алфавит строчка составитель реторический имеет вдали снова переулка знаках вопрос использовало своего то, возвращайся, предупредила если лучше они
            решила? </p>
        </div>

      </div>
      <div id="d" class="item"></div>
    </div>
  </div>

    • 0

相关问题