我正在尝试重新创建类似这样的东西，但现在遇到了一些问题。我遇到的第一个问题是要居中我的'main' div，我这样做：
body{
background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.main {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
但是由于'position: fixed'，我的背景不再显示，而我在body中添加了背景。
我遇到的另一个问题是在我想要重新创建的网站上，有两个相邻的p元素，但是我无法使用这段代码将我的两个p元素放在一起：
p{
margin: 0;
display:inline;
float:left;
}
这是我的p元素和整个html的样子：
<!DOCTYPE html>
<html>
<head>
<title>练习网站</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/c934cb6477.js" crossorigin="anonymous"></script>
</head>
<body>
<main class="container">
<!-- <header>
<div class="header">
</div>
</header> -->
<div class="main">
<h1>嘿，我是测试</h1>
<h2>学生软件开发者。</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
<footer class="bg-dark text-center text-white footer fixed-bottom">
<div class="container p-4 pb-0">
<section class="mb-4">
<!-- Linkedin -->
<a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
><i class="fab fa-linkedin-in"></i
></a>
<!-- Github -->
<a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
><i class="fab fa-github"></i
></a>
<!-- CV -->
<a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"
><i class="fa-regular fa-address-card"></i
></a>
</section>
</div>
<!-- 版权 -->
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
©
<span id="current-year"></span>
版权所有：
<a class="text-white">测试</a>
</div>
</footer>
</main>
<script src="/Files/Js/function.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
</body>
</html>
而不是绝对定位您的主要内容，您可以将display: flex应用于body元素，并将其设置为100vh，以覆盖视口。然后背景将重新出现。
对于您的p元素，同样，将它们包裹在一个具有display: flex的div中，然后像下面的示例一样将它们并排放置。
body { background: linear-gradient(110deg, #fdcd3b 60%, #ffed4b 60%); background-size: cover; height: 100vh; display: flex; /*display flex allows you the center the main element in the middle of your page */ align-items: center; justify-content: center; } .main { /* not needed */ } .inline-container { display: flex; gap: 1rem; } .inline { display: block; }<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <script src="https://kit.fontawesome.com/c934cb6477.js" crossorigin="anonymous"></script> <main class="container"> <!-- <header> <div class="header"> </div> </header> --> <div class="main"> <h1>嘿，我是测试</h1> <h2>学生软件开发人员。</h2> <div class="inline-container"> <p class="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <p class="inline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquam arcu et urna placerat dignissim. Nulla nec sollicitudin lorem, at maximus lorem. Cras porta quis sapien ut ornare. Nullam nec sem molestie, scelerisque sapien sit amet, dignissim ex. Sed eget felis gravida, maximus risus a, sodales libero. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </div> </div> <footer class="bg-dark text-center text-white footer fixed-bottom"> <div class="container p-4 pb-0"> <section class="mb-4"> <!-- Linkedin --> <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i class="fab fa-linkedin-in"></i></a> <!-- Github --> <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i class="fab fa-github"></i></a> <!-- CV --> <a class="btn btn-outline-light btn-floating m-1" href="#" target="_blank" role="button"><i class="fa-regular fa-address-card"></i></a> </section> </div> <!-- 版权 --> <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);"> © <span id="current-year"></span> 版权所有： <a class="text-white">测试</a> </div> </footer> </main> <script src="/Files/Js/function.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>我理解你的思路，但不幸的是，它并不完全正确。你看，初始页面的设计与一开始完全不同：
创建者并没有将主要的div居中，而是给body添加了一个padding为
64px，然后将wrapper div的宽度设为100%，高度设为100% - 64px * 2。所以，要做到这一点：body{ padding:64px; } .wrapper{ height:calc(100vh - 64px * 2); width:100%; border: 1px solid black; }