gpt4 book ai didi

html - 您如何在 CSS 中制作一个页面的空白空间(只有标题)后跟一个 div?

转载 作者:太空宇宙 更新时间:2023-11-04 12:31:25 25 4
gpt4 key购买 nike

我有一个一直在处理的网页,我想要一个静态背景。这个想法是让页面最初只显示标题和背景,然后向下滚动以获取内容(一个填满浏览器整个宽度并具有填充背景的 div)。该页面的顶部有一个导航栏,它已经跨越了整个屏幕宽度。我的问题是,你如何使这成为可能?这是我试过的代码,它并没有达到目的。我对 main 中的 CSS 一无所知。

HTML:

<body>
<div class="wrapper">
<div class="navbar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>


<div class="topspace">
<h1 class="mainTitle">Title</h1>
</div>
<div class="main">
Bottom content<br /><br /><br /><br /><br /><br />
</div>
</div>
</body>

CSS:

body {
font-family: sans-serif;
margin: 0;
border: 0;
padding: 0;
}

.navbar {
background-color: #708090;
margin: 0 0 auto;
border: 0;
padding: 0;
}

.navbar ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}

.navbar ul li {
display: inline-block;
margin: 0;
padding: 0;
}

.navbar ul li a {
text-decoration: none;
color: #DDD;
display: block;
padding: 5px 10px;
border: 0;
}

.navbar ul li a:hover {
color: #FFF;
background-color: #222;
}

.topspace {
position: absolute;
top: 40px;
bottom: 0px;
right: 0px;
left: 0px;
}

.mainTitle {

margin-left: auto;
margin-right: auto;
padding-top: 40%;
color: #B22222;
}

.wrapper {
border:0;
margin: 0;
padding:0;
background: rgba(0, 100, 100, 0.6);
}

这是此代码的 JSFiddle,尽管它在我的浏览器上显示的并不完全相同 http://jsfiddle.net/xpkayL9t/

最佳答案

关于html - 您如何在 CSS 中制作一个页面的空白空间(只有标题)后跟一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27614463/

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