我正在嘗試重新創建類似這樣的東西，但現在遇到了一些問題。我遇到的第一個問題是要居中我的'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; }