我尝试了一些修复，甚至转向 chatGPT-4o（在我查看互联网和文档之后）
我想将此作为我的错误页面，我从正在修复的页面重定向，以确保使用我的项目的人知道它们要么已损坏，要么正在处理。我主要做倒计时，但我也做其他事情！ CSS 不是我的强项，但我想走出我的舒适区，所以我尝试了它，我不打算浪费我一生中花费的 10 多个小时只是为了回到我的舒适区并只做 html。
我的 html 代码中心： https://dateclock.w3spaces.com/hub.html
这是代码：
<!DOCTYPE HTML>
<html lang="en">
<head>
<div class="page-setup">
<link rel="icon" href="https://th.bing.com/th/id/OIP.0Z295SNshKyJSCHaQNNjcAHaHa?rs=1&pid=ImgDetMain">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CD ERR PAGE</title>
<style>
body {
background-color: #ff0000; /* set background color to red */
text-align: center; /* center the text */
margin :0; /*remove default margin */
padding: 0; /* remove default padding*/
}
.content {
padding: 20px; /*add padding to create space around content */
box-sizing: border-box; /*include padding in width calculation */
}
h1 {
font-size: 24px; /* Adjust as needed */
color: white; /* Customize the color */
}
p {
font-size: 16px; /* Adjust as needed */
color: white; /* cusomize as needed */
}
footer{
position: relative; /* Ensure footer content is contained */
width: 100%; /* Full width */
height: 50px; /* set fixed height for iframe container */
overflow: hidden; /* Hide any overflow */
}
.iframe-container {
width: 730px; /* occupy full width of container*/
max-width: 100%; /* set limit for width */
height: 500px; /* set height for iframe content */
border: 3px solid white; /* add a 3px solid white border */
display: flex;
justify-content: center; /* center the iframe content */
align-items: center; /* ensure the content is centered */
}
iframe {
display: block;
width: 100%; /* width of footer */
height: 100%; /* full height of footer*/
border: none;
}
</style>
</div>
</head>
<body>
<div class="content">
<h1>Sorry, this countdown is currently broken or is being worked on.</h1>
<p><b>You can check out my <a href="https://dateclock.w3spaces.com/hub.html" target="_blank">HTML hub</a>.</b></p>
<p><b>This issue will be resolved shortly.</b></p>
</div>
<footer>
<div class="iframe-container">
<iframe src="https://cdn.dribbble.com/users/1120320/screenshots/3898259/error.gif"></iframe>
</div>
</footer>
</body>
</html>
为什么使用 Iframe 并将其放置在页脚中？我不知道，但这是解决方案：
body {
background-color: #ff0000; /* set background color to red */
text-align: center; /* center the text */
margin :0; /*remove default margin */
padding: 0; /* remove default padding*/
}
.content {
display: flex;
flex-direction: column;
align-items:center;
box-sizing: border-box; /*include padding in width calculation */
}
h1 {
font-size: 24px; /* Adjust as needed */
}
p {
font-size: 16px;
}
p,h1{
color: white;
}
.pic-container {
width: 730px; /* occupy full width of container*/
max-width: 100%; /* set limit for width */
height: 500px; /* set height for iframe content */
border: 3px solid white; /* add a 3px solid white border */
display: flex;
justify-content: center; /* center the iframe content */
align-items: center; /* ensure the content is centered */
}
#MyPicture{
width: 100%; /* width of footer */
height: 100%; /* full height of footer*/
background-image:url("https://cdn.dribbble.com/users/1120320/screenshots/3898259/error.gif");
border: none;
}<div class="content">
<h1>Sorry, this countdown is currently broken or is being worked on.</h1>
<p><b>You can check out my <a href="https://dateclock.w3spaces.com/hub.html" target="_blank">HTML hub</a>.</b></p>
<p><b>This issue will be resolved shortly.</b></p>
<div class="pic-container">
<div id="MyPicture"></div>
</div>
</div>