要创建一个简单的加载页面，你可以使用 HTML 和 CSS 来设计。以下是一个基本的加载页面示例：
- HTML 文件 (
index.html):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loading Page</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="loader-container"> <div class="loader"></div> <p>Loading...</p> </div> </body> </html>
- CSS 文件 (
styles.css):
/* styles.css */ body { margin: 0; display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #f0f0f0; } .loader-container { text-align: center; } .loader { border: 8px solid #f3f3f3; border-top: 8px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } p { font-family: Arial, sans-serif; color: #333; font-size: 16px; margin-top: 10px; }
这个例子中，使用了一个简单的旋转的加载动画（CSS 中的 @keyframes），并且有一个显示 “Loading…” 文字的段落。整个页面被居中显示。
你可以将上述代码保存到两个文件中，一个是 index.html，另一个是 styles.css，然后在浏览器中打开 index.html 文件，就可以看到加载页面效果。根据实际需求，你可以对样式进行自定义修改。
