Question

我正在为我的团队制作一个干净的登陆页面，但我不确定如何执行以下操作：使内容首先出现红色框，然后在其下方显示其他内容，以便用户只需向下滚动即可查看。我希望红色框中的内容也能占据整个屏幕的大小。

我正在寻找类似：http://ironsummitmedia.github.io/startbootstrap-landing-page/

的东西

任何帮助人员？

我的代码：

<body>

        <input type="checkbox" id="navbar-checkbox" class="navbar-checkbox">

    <nav class="menu">
                    <li><a href="#" id="logo-nav"> < /> </a></li>
        <ul>
            <li><a href="#" id="active">Home</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Store</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <label for="navbar-checkbox" class="navbar-handle"></label>
    </nav>

    <div class="content-main">
        <h1>System</h1>
        <p>"A new look into technology"</p>
    </div>

    <div class="otherContent">
        <img src="img/PHP.jpg">
        <h1>Testing</h1>
    </div>

</body>
</html>

CSS: 

      /*Main CSS*/

.content-main{
  position: fixed;
  margin-top: 80px;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
    width:100vw;
  height:100vh;
}

.otherContent{
  width:100vw;
  height:1000px;
  border:1px solid black;
  background:aqua;

  }

Answer 1

希望这会对你有所帮助。

＆＃13;

.landingContent{
  width:100vw;
  height:100vh;
  background:green
  }
.otherContent{
  width:100vw;
  height:1000px;
  border:1px solid black;
  background:aqua;
  
  }

＆＃13;

<div class="landingContent"></div>
<div class="otherContent"></div>

＆＃13;

主页的问题

1 个答案: