---
# System prepended metadata

title: 負評救星-當機等候網頁

---

# 負評救星-當機等候網頁
### 設計理念：

相信大家大部分都有玩手遊吧?我設計的是以開放世界類型為主的一個手遊等候畫面，開放世界類型遊戲例如是像原神~~啟動~~、薩爾達傳說、鳴潮等豐富的遊戲內容和自由度高的遊戲性而聞名。這種類型得遊戲擁有自由地探索和進行活動，但相對也因為遊戲平台內存限制，有時候會導致網路變慢，為了撫慰玩家的心情，通常設計了等候頁面，讓玩家在等待過程中能夠得到一些娛樂或信息。
## 用到那些 HTML , CSS?
#### HTML：
HTML是用於結構化網頁的內容，包括文本、圖片、連結等。
1.結構性標記：HTML 用於結構化網頁的內容，透過標籤將不同類型的內容區分開來。
2.元素標籤：HTML 中的元素標籤是基本結構，例如 **<html>、<head>、<body>** 等。
3.容器元素：是一個常用的容器元素，用於將內容組織在一起
4.文本標籤：用於顯示文字內容的標籤，
5.圖片標籤：用於插入圖片的標籤
                        
#### CSS:
用於設計網頁的外觀和風格。
1.選擇器：CSS 使用選擇器來選擇要樣式化的 HTML 元素，如類別選擇器、ID 選擇器等。
2.屬性：CSS 屬性用於設置元素的外觀和風格，如 **color、font-family、background-color** 等。
3.佈局：CSS 可以用於控制元素的佈局和位置，例如 display 屬性、margin 和 padding 屬性等。
4.背景：CSS 可以用於設置元素的背景，包括背景圖片 (background-image)、背景顏色 (background-color) 等。
5.動畫：CSS 可以用於定義元素的動畫效果，如 @keyframes 定義動畫的關鍵幀、animation 屬性設置動畫效果等。                     
    
## Code
:::spoiler Code
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>網站當機等候畫面</title>
    <style>
        body {
            font-family: Arial, sans-serif; /* 設置字體為Arial或sans-serif */
            margin: 0; /* 清除頁面的預設邊距 */
            padding: 0; /* 清除頁面的預設內距 */
            display: flex; /* 使用 Flexbox 佈局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            height: 100vh; /* 設置整個畫面高度為視窗高度 */
            background-image: url('https://s1.pearlcdn.com/TW/Upload/thumbnail/2024/9FIJ2EMXMQ55VBF720240214151849536.400x225.jpg'); /* 替換背景圖片路徑 */
            background-size: cover; /* 背景圖片填滿整個畫面 */
            background-position: center; /* 背景圖片位置居中 */
        }

        .content {
            text-align: center; /* 文字居中對齊 */
            background-color: rgba(255, 255, 255, 0.8); /* 添加半透明的背景色 */
            padding: 20px; /* 內容框內間距 */
            border-radius: 10px; /* 內容框圓角 */
        }

        h1 {
            color: #333; /* 標題文字顏色 */
        }

        p {
            color: #666; /* 段落文字顏色 */
        }

        .loader {
            border: 8px solid #f3f3f3; /* 加載動畫外邊框 */
            border-top: 8px solid #3498db; /* 加載動畫上邊框 */
            border-radius: 50%; /* 加載動畫圓角 */
            width: 60px; /* 加載動畫寬度 */
            height: 60px; /* 加載動畫高度 */
            animation: spin 2s linear infinite; /* 加載動畫旋轉 */
            margin: 20px auto; /* 加載動畫外邊距，自動居中 */
        }

        @keyframes spin {
            0% { transform: rotate(0deg); } /* 加載動畫旋轉初始值 */
            100% { transform: rotate(360deg); } /* 加載動畫旋轉結束值 */
        }

        #photo-container {
            margin-top: 20px; /* 照片容器上邊距 */
        }

        #photo-container img {
            max-width: 100%; /* 照片最大寬度為100% */
            height: auto; /* 自動調整照片高度 */
            margin-bottom: 10px; /* 照片下邊距 */
        }
    </style>
</head>
<body>
<div class="content">
    <h1>遊戲正在加載中</h1>
    <p>請稍等片刻，我們正在處理問題!</p>
    <div class="loader"></div>

    <div id="photo-container">

    </div>
</div>
</body>
</html>

:::




