我现在正在开发一个测试网站，以尝试我在 HTML 和 CSS 中学到的东西。 这次我的目标是创建一个左右分开的两个容器。 左边的容器应该是固定的，右边的容器应该根据内容而拉伸。
我希望它们都有一个 margin-top 和 margin-bottom ，这样设计在所有不同的浏览器中都是一致的。
这是我到目前为止所拥有的：
HTML 代码
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Phillipp Dittloff</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="content-left">
<h1>Phillipp Dittloff</h1>
<h2>Frontend Developer</h2>
<p>I create beautiful experiences<br> for customers.</p>
<br>
<br>
<ul class="nav">
<li><a href="#about">About</a></li>
<li><a href="#experience">Experience</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<ul class="sm-links">
<li><a href="https://github.com/phillippdi" target="_blank" rel="noreferrer"><i class="fa-brands fa-github"></i></a></li>
<li><a href="https://de.linkedin.com/in/phillipp-dittloff-a587402b3" target="_blank" rel="noreferrer"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="#" target="_blank" rel="noreferrer"><i class="fa-brands fa-instagram"></i></a></li>
</ul>
</div>
<div class="content-right">
<div id="about">
<h2 class="mq-headline">About</h2>
<p>
In 2023, everything started out of little curiosity in HTML & CSS. I've gained a lot of knowledge through Online Qualifications and plenty of Udemy Courses. My knowledge so far includes things like <span class="highlight">HTML & CSS and a little JavaScript</span> so far.
<br>
<br>
My goal is to become a fullstack developer although my main focus will be on the frontend part, since my passion is designing and creating beautiful web surfaces for customers. I most enjoy creating a website which is in balance with both, design and code. In my free time, I find new ways to enhance my knowledge as a frontend developer in many ways, such as rebuilding fun themes, etc.
<br>
<br>
When I'm not on the computer, I'm usually hanging out with my family, reading, run after my cats after they did something 🙀 or playing some video games.
</p>
</div>
<div id="experience">
<h2 class="mq-headline">Experience</h2>
<ul>
<li>
<a class="exp-box">
<div class="box-left">
<span class="period">2021 - 2022</span>
</div>
<div class="box-right">
<h3>Bachelor Professional - Business Management</h3>
<p>
Successfully graduated my bachelor professional in business management focusing on IT-processes.
</p>
</div>
</a>
</li>
<li>
<a class="exp-box">
<div class="box-left">
<span class="period">2016 - 2017</span>
</div>
<div class="box-right">
<h3>Apprenticeship - IT Systems Electrician</h3>
<p>
Successfully graduated my Apprenticeship in IT Systems Electronics focusing on IT Hardware such as servers, circuits.
</p>
</div>
</a>
</li>
<li>
<a class="exp-box">
<div class="box-left">
<span class="period">2012 - present</span>
</div>
<div class="box-right">
<h3>Master Sergeant - Military Career</h3>
<p>
Administrating high-frequency radio transmissions in combination with other sources. Work as a leader with personal to manage processes in work.
</p>
</div>
</a>
</li>
<li>
<a class="exp-box">
<div class="box-left">
<span class="period">2007 - 2012</span>
</div>
<div class="box-right">
<h3>Extended Secondary School Qualification</h3>
<p>
Successfully graduated at school before starting my work career.
</p>
</div>
</a>
</li>
</ul>
</div>
<div id="projects">
<h2 class="mq-headline">Projects</h2>
<ul>
<li>
<a class="project-box">
<div class="project-img">
<img src="placeholder-image.jpg" alt="placeholder-image">
</div>
<div class="project-description">
<h3>Example Project</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non vero amet consequatur in veritatis minima at possimus, quis tenetur corporis ut adipisci ipsa.
</p>
</div>
</a>
</li>
<li>
<a class="project-box">
<div class="project-img">
<img src="placeholder-image.jpg" alt="placeholder-image">
</div>
<div class="project-description">
<h3>Example Project</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non vero amet consequatur in veritatis minima at possimus, quis tenetur corporis ut adipisci ipsa.
</p>
</div>
</a>
</li>
<li>
<a class="project-box">
<div class="project-img">
<img src="placeholder-image.jpg" alt="placeholder-image">
</div>
<div class="project-description">
<h3>Example Project</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non vero amet consequatur in veritatis minima at possimus, quis tenetur corporis ut adipisci ipsa.
</p>
</div>
</a>
</li>
<li>
<a class="project-box">
<div class="project-img">
<img src="placeholder-image.jpg" alt="placeholder-image">
</div>
<div class="project-description">
<h3>Example Project</h3>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Non vero amet consequatur in veritatis minima at possimus, quis tenetur corporis ut adipisci ipsa.
</p>
</div>
</a>
</li>
</ul>
</div>
<div id="contact">
<h2 class="mq-headline">Contact</h2>
<form>
<input name="name" type="text" class="feedback-input" placeholder="Name" />
<input name="email" type="text" class="feedback-input" placeholder="Email" />
<textarea name="text" class="feedback-input" placeholder="Comment"></textarea>
<input type="submit" value="SUBMIT"/>
</form>
</div>
<!-- Footer -->
<div id="footer">
<footer>
<ul>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Legal Notice</a></li>
</ul>
</footer>
<p>© 2024 Phillipp Dittloff</p>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/f40fa953b8.js" crossorigin="anonymous"></script>
</body>
</html>
CSS代码
/* Main Styling */
:root {
--p-color: #94A3B8;
--h-color: #E2E8F0;
--a-color: #94A3B8;
--i-color: #94A3B8;
--a-hover-color: #E2E8F0;
--hlt-color: #E2E8F0;
--period-color: #94A3B8;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
margin-top: 100px;
background: linear-gradient(300deg,#0f4c75,#1b262c,#0f4c75);
background-size: 180% 180%;
animation: gradient-animation 27s ease infinite;
background-attachment: fixed;
font-family: "Poppins", sans-serif;
display: flex;
justify-content: center;
}
@keyframes gradient-animation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.wrapper {
width: 60%;
display: grid;
gap: 10px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(auto-fill, 100px);
}
h1 {
font-size: 3rem;
color: var(--h-color);
}
h2 {
font-size: 1.3rem;
font-weight: 500;
color: var(--h-color);
}
h3 {
color: var(--h-color);
}
p {
font-size: 1rem;
color: var(--p-color);
}
a {
cursor: pointer;
}
.mq-headline {
margin-bottom: 30px;
display: none;
}
/* Left Content */
.content-left {
grid-area: 1 / 1 / 4 / 2;
position: fixed;
display: block;
}
.content-left h2 {
margin-bottom: 15px;
}
.nav {
list-style: none;
margin-bottom: 22rem;
}
.nav a {
text-decoration: none;
color: var(--a-color);
transition: 0.2s;
}
ul li a:hover {
color: var(--a-hover-color);
}
.sm-links {
list-style: none;
display: flex;
gap: 25px;
}
.sm-links i {
color: var(--i-color);
font-size: 25px;
transition: 0.2s;
}
.sm-links i:hover {
color: var(--a-hover-color);
}
/* Right Content */
.content-right {
grid-area: 1 / 2 / auto / 3;
margin: 0;
padding: 0;
}
/* About Styling */
#about {
margin-bottom: 100px;
scroll-margin-top: 100px;
}
.highlight {
font-weight: 500;
color: var(--hlt-color);
}
/* Experience Styling */
#experience {
margin-bottom: 200px;
scroll-margin-top: 100px;
}
#experience ul {
list-style: none;
}
.exp-box {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
grid-template-rows: auto;
gap: 10px;
margin-bottom: 4rem;
}
.box-left {
grid-column: 1 / 3;
}
.period {
font-size: 1rem;
font-weight: 300;
color: var(--period-color);
}
.box-right {
grid-column: 3 / 10;
}
h3 {
margin-bottom: 5px;
font-size: 1rem;
font-weight: 500;
}
.box p {
font-size: 0.8rem;
}
/* Projects Styling */
#projects {
margin-bottom: 200px;
scroll-margin-top: 100px;
}
#projects ul {
list-style: none;
}
#projects ul li {
margin-bottom: 4rem;
}
.project-box {
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 10px;
border-radius: 15px;
transition: 0.3s;
margin-bottom: 4rem;
}
.project-img {
grid-column: 1 / 3;
}
.project-img img {
grid-column: 1 / 3;
width: 100%;
border-radius: 15px;
object-fit: cover;
}
.project-description {
grid-column: 3 / 9;
}
.project-description p {
font-size: 0.8rem;
}
/* Form Styling */
#contact {
padding-bottom: 200px;
scroll-margin-top: 100px;
display: flex;
align-items: start;
}
form {
max-width:320px;
align-self: self-start;
}
.feedback-input {
font-family: "Poppins", sans-serif;
font-weight: 300;
color: var(--p-color);
font-size: 1rem;
border-radius: 15px;
line-height: 22px;
/* Opacity Background */
background: rgba(15, 76, 117, 0.15);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(15, 76, 117, 0.3);
transition: all 0.3s;
padding: 13px;
margin-bottom: 15px;
width:100%;
box-sizing: border-box;
outline:0;
}
.feedback-input:focus { border:2px solid #fff; }
textarea {
height: 150px;
line-height: 150%;
resize:vertical;
}
[type="submit"] {
font-family: "Poppins", sans-serif;
width: 100%;
background:#0F4C75;
border-radius:5px;
border:0;
cursor:pointer;
color:#BBE1FA;
font-size:24px;
padding-top:10px;
padding-bottom:10px;
transition: all 0.3s;
margin-top:-4px;
font-weight:500;
/* Box Shadow Effect */
-webkit-box-shadow: 5px 5px 14px -3px rgba(0,0,0,0.25);
box-shadow: 5px 5px 14px -3px rgba(0,0,0,0.25);
}
[type="submit"]:hover { background:#3282B8; }
/* Footer Styling */
#footer {
padding-bottom: 80px;
}
footer {
margin-bottom: 10px;
}
footer ul {
list-style: none;
display: flex;
justify-content: start;
flex-wrap: wrap;
gap: 25px;
}
footer ul li a {
text-decoration: none;
color: var(--a-color);
transition: 0.3s;
font-size: 0.9rem;
font-weight: 500;
}
footer ul li a:hover {
color: var(--a-hover-color);
}
/* Media Queries */
@media (max-width: 480px) {
body {
margin-top: 25px;
}
h1 {
font-size: 2rem;
color: var(--h-color);
}
h2 {
font-size: 1rem;
font-weight: 500;
color: var(--h-color);
}
p {
font-size: 0.9rem;
color: var(--p-color);
}
.mq-headline {
display: block;
}
.wrapper {
width: 90%;
display: flex;
flex-direction: column;
gap: 10px;
grid-template-columns: none;
grid-template-rows: none;
}
.content-left {
grid-area: none;
position:unset;
display: block;
margin-bottom: 100px;
}
.content-left br {
display: none;
}
.nav {
display: none;
}
.sm-links {
margin-top: 25px;
}
.exp-box {
display: flex;
flex-direction: column;
grid-template-columns: none;
grid-template-rows: none;
gap: 10px;
margin-bottom: 4rem;
}
.period {
font-size: 0.8rem;
font-weight: 300;
color: var(--period-color);
}
h3 {
margin-bottom: 5px;
font-size: 0.9rem;
font-weight: 500;
}
.exp-box p {
font-size: 0.9rem;
}
#contact {
padding-bottom: 200px;
scroll-margin-top: 100px;
display: flex;
flex-direction: column;
}
form {
max-width:100%;
align-self: self-start;
}
#footer {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 25px;
}
}
到目前为止，我当然尝试为 .content-right 设置“margin-bottom: 100px”，但没有成功。
我尝试的另一件事是将 .wrapper 包装在另一个容器中以设置 margin-top 和 margin-bottom 但没有成功。
我还尝试在主体上设置 margin-bottom ，因为主体上的 margin-top: 100px 正在工作。
我希望你们中的某个人能看到我没有看到的东西并帮助我！
亲切的问候！
乌蒂尼:)