gpt4 book ai didi

html - H1 在标题和页面顶部之间留出空间/间隙

转载 作者:太空宇宙 更新时间:2023-11-04 14:00:00 27 4
gpt4 key购买 nike

<分区>

我有一个问题,我的 h1 标签与我的页面顶部分开 - 像这样:enter image description here

我对 HTML 和 CSS 还是很陌生,所以我请求你的帮助。此外,我确实环顾四周以查看有关此的其他帖子,并且我已经尝试了很多,但我似乎无法让它工作。

这是我的 CSS 和 HTML:

html {
height: 100%;
width: 100%;
}

body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}

.header{
background: url("../images/artboard1.jpg") no-repeat top center fixed;
background-size: cover;
height: 100vh;
width: 100%;
margin: 0;
padding: 0;
}

#logo {
color: #ffffff;
font-weight: 700;
font-size: 1rem;
float: left;
padding-left: 40px;
padding-top: 35px;
margin: 0;
}

nav {
float: right;
padding-top: 40px;
padding-right: 40px;
margin: 0;
}
a {
color: #ffffff;
font-weight: 400;
font-size: 80%;
text-decoration: none;
margin: 0 auto;
padding-left: 3rem;
}

.content_top {
margin: 0;
margin-top: 260px;
padding: 4rem 0 8rem 0; }
.sub_title, .under_title {
color: #ffffff;
text-align: center;
}

.sub_title {
font-weight: 400;
font-size: 0.85rem;
padding: 0 0 5px 0;
margin: 0;
}

.logo_middle {
display: block;
margin: 0 auto;
}

.under_title {
font-weight: 400;
font-size: 0.85rem;
padding: 5px 0 5px 0;
margin: 0;
}

.content {
background: url(../images/Untitled-2.png);
background-size: cover;
background-repeat: no-repeat;
background-color: #0D0E12;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

.projekter {
background-color: #0D0E12;
margin: 0 auto;
padding 0 auto;
}
<html>
<head>
<title>Jakob Hoeg</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
</head>

<body>

<div class="header">
<header>
<a href="index.html"><img id="logo" src="images/logo_top.png" draggable="false"/>
<nav>
<a href="#">HJEM</a>
<a href="#">PORTFOLIO</a>
<a href="#">KONTAKT</a>
</nav>

<div class="content_top">
<h4 class="sub_title">HEY, MIT NAVN ER</h4>
<img class="logo_middle" src="images/logo_big.png" draggable="false"/>
<h4 class="under_title">MULTIMEDIEDESIGN STUDERENDE</h4>
</div>
</header>

</div>

<section class="content">
<div id="content_cont">
<h1>Hello</h1>
</div>
</section>

<section class="projekter">
<div id="projekter">
<h1>Hello</h1>
</div>
</section>

</body>
</html>

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