RError.com

RError.com Logo RError.com Logo

RError.com Navigation

  • 主页

Mobile menu

Close
  • 主页
  • 系统&网络
    • 热门问题
    • 最新问题
    • 标签
  • Ubuntu
    • 热门问题
    • 最新问题
    • 标签
  • 帮助
主页 / 问题 / 816169
Accepted
Даша Варшавская
Даша Варшавская
Asked:2020-04-19 08:13:27 +0000 UTC2020-04-19 08:13:27 +0000 UTC 2020-04-19 08:13:27 +0000 UTC

逐页站点

  • 772

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

css3
  • 1 1 个回答
  • 10 Views

1 个回答

  • Voted
  1. Best Answer
    user33274
    2020-04-19T14:14:54Z2020-04-19T14:14:54Z

    您可以使用 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

相关问题

Sidebar

Stats

  • 问题 10021
  • Answers 30001
  • 最佳答案 8000
  • 用户 6900
  • 常问
  • 回答
  • Marko Smith

    是否可以在 C++ 中继承类 <---> 结构?

    • 2 个回答
  • Marko Smith

    这种神经网络架构适合文本分类吗?

    • 1 个回答
  • Marko Smith

    为什么分配的工作方式不同?

    • 3 个回答
  • Marko Smith

    控制台中的光标坐标

    • 1 个回答
  • Marko Smith

    如何在 C++ 中删除类的实例?

    • 4 个回答
  • Marko Smith

    点是否属于线段的问题

    • 2 个回答
  • Marko Smith

    json结构错误

    • 1 个回答
  • Marko Smith

    ServiceWorker 中的“获取”事件

    • 1 个回答
  • Marko Smith

    c ++控制台应用程序exe文件[重复]

    • 1 个回答
  • Marko Smith

    按多列从sql表中选择

    • 1 个回答
  • Martin Hope
    Alexandr_TT 圣诞树动画 2020-12-23 00:38:08 +0000 UTC
  • Martin Hope
    Suvitruf - Andrei Apanasik 什么是空? 2020-08-21 01:48:09 +0000 UTC
  • Martin Hope
    Air 究竟是什么标识了网站访问者? 2020-11-03 15:49:20 +0000 UTC
  • Martin Hope
    Qwertiy 号码显示 9223372036854775807 2020-07-11 18:16:49 +0000 UTC
  • Martin Hope
    user216109 如何为黑客设下陷阱,或充分击退攻击? 2020-05-10 02:22:52 +0000 UTC
  • Martin Hope
    Qwertiy 并变成3个无穷大 2020-11-06 07:15:57 +0000 UTC
  • Martin Hope
    koks_rs 什么是样板代码? 2020-10-27 15:43:19 +0000 UTC
  • Martin Hope
    Sirop4ik 向 git 提交发布的正确方法是什么? 2020-10-05 00:02:00 +0000 UTC
  • Martin Hope
    faoxis 为什么在这么多示例中函数都称为 foo? 2020-08-15 04:42:49 +0000 UTC
  • Martin Hope
    Pavel Mayorov 如何从事件或回调函数中返回值?或者至少等他们完成。 2020-08-11 16:49:28 +0000 UTC

热门标签

javascript python java php c# c++ html android jquery mysql

Explore

  • 主页
  • 问题
    • 热门问题
    • 最新问题
  • 标签
  • 帮助

Footer

RError.com

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

帮助

© 2023 RError.com All Rights Reserve   沪ICP备12040472号-5