gpt4 book ai didi

html - 网页布局问题

转载 作者:行者123 更新时间:2023-11-28 02:06:50 26 4
gpt4 key购买 nike

我正在处理网页布局。我创造了这个。 https://codepen.io/iamgonge/pen/paOxxb

我不明白为什么 .container .left-side 和 .right-side 元素从浏览器的顶部开始,而不是在标题下方。布局不应该是 header->section(hero)->section(one) 吗?我认为这三个 div 中的任何一个的顶部都将位于标题下方,但事实并非如此。我在这里不明白什么?

body {
font-family: Verdana, Geneva, sans-serif;
margin: 0;
padding: 0;
}

.container {
background: #333338;
display: inline-block;
width: 60%;
height: 800px;
}

header {
position: fixed;
background: #10105f;
width: 100%;
height: 150px;
}

.main-links a {
text-decoration: none;
color: #fff;
font-size: 20px;
text-transform: uppercase;
}

.main-links a:hover {
color: #00843d;
}

.main-links a:active {
color: red;
}

.left-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: left;
}

nav {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
text-align: center;
}

nav ul {
margin: auto;
padding: 0;
display: inline-block;
list-style: none;
color: #fff;
// border: 1px solid #00843D;
width: 60%;
;
}

nav li {
display: inline-block;
margin: 5px -3px;
padding: 5px 10px;
// border: 1px solid#fff;
}

nav li:hover {
background: rgba(255, 255, 255, 0.25);
}

nav li:active {
border-bottom: 2px solid red;
color: red;
}

.nav-left {
float: left;
height: 50px;
width: 20%;
padding-bottom: 96px;
// border: 1px solid #00843D;
}

.nav-right {
float: right;
height: 50px;
width: 20%;
padding-bottom: 96px;
//border: 1px solid #00843D;
}

.nav-center {
position: relative;
padding-bottom: 21px;
margin: 0 auto;
height: 75px;
width: 300px;
// border: 1px solid #00843D;
}

.nav-right p a {
font-size: 16px;
text-decoration: none;
color: #fff;
}

.nav-right p a:hover {
color: #00843d;
}

.nav-right p {
margin: 20px;
padding: 0;
color: #fff;
}

.one {
display: block;
width: 100%;
height: 800px;
background: #080853;
}

.right-side {
display: inline-block;
width: 20%;
background: #4C4C59;
height: 800px;
float: right;
}

.rss-title,
.rss-date {
margin: 0px!important;
}

.rss-feed {
margin: 10px 5px 20px 0px;
}

.rss-date {
padding: 0;
font-size: 12px;
font-style: italic;
}

.hero,
.one {
position: relative;
height: 100%;
}

.success {
display: block;
text-align: center;
margin-top: 20%;
font-size: 69px;
color: #00843d;
// margin-left: auto;
// margin-right: auto;
}

.success:hover {
font-size: 71px;
}

#timestamp {
margin: 10px 5px 20px 0px;
text-align: center;
color: #fff;
font-size: 16px;
}

#timestamp,
.rss-feed {
background: #080853;
padding: 10px;
height: 110px;
}

@media (min-width:1530px) {}
<body>
<header>
<div class="nav-left">
<div id="timestamp"></div>
</div>
<div class="nav-right"></div>
<div class="nav-center"></div>

<nav>
<ul class="main-nav">
<li class="main-links"><a href="#">home</a></li>
<li class="main-links"><a href="#">about</a></li>
<li class="main-links"><a href="#">projects</a></li>
<li class="main-links"><a href="#">portal</a></li>
<li class="main-links"><a href="#">links</a></li>
</ul>
</nav>
</header>
<section="hero">
<div class="left-side"></div>
<div class="right-side"></div>
<div class="container">
<div class="success"></div>
</div>
<!--***Container***-->
</section>
<section class="one"></section>
</body>

最佳答案

原因是你申请了position: fixed;给你的<header>标签。执行此操作时,您必须考虑标题的高度并下推其他元素以恢复布局。

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

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