gpt4 book ai didi

html - 主页问题

转载 作者:太空宇宙 更新时间:2023-11-04 11:13:43 28 4
gpt4 key购买 nike

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

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

有什么帮助吗?

An example of what I am looking to make

我的代码:

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

}

最佳答案

Hope this will help you.

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

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

关于html - 主页问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33394691/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com