# 負評救星-當機等候網頁 ### 設計理念： 相信大家大部分都有玩手遊吧?我設計的是以開放世界類型為主的一個手遊等候畫面，開放世界類型遊戲例如是像原神~~啟動~~、薩爾達傳說、鳴潮等豐富的遊戲內容和自由度高的遊戲性而聞名。這種類型得遊戲擁有自由地探索和進行活動，但相對也因為遊戲平台內存限制，有時候會導致網路變慢，為了撫慰玩家的心情，通常設計了等候頁面，讓玩家在等待過程中能夠得到一些娛樂或信息。 ## 用到那些 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> :::