# 使用現代 CSS 美化您的銀行應用程式

## 專案概述

將您的功能性銀行應用程式轉變為視覺吸引且專業的網頁應用程式，使用現代 CSS 技術。您將建立一個一致的設計系統，提升使用者體驗，同時維持無障礙與響應式設計原則。

此作業挑戰您應用當代網頁設計模式，實現一致的視覺識別，創造出吸引且直觀易用的使用者介面。

## 指示

### 第 1 步：設定您的樣式表

**建立您的 CSS 基礎：**

1. **建立** 一個名為 `styles.css` 的新檔案於您的專案根目錄
2. **在** `index.html` 文件中連結此樣式表：
   ```html
   <link rel="stylesheet" href="styles.css">
   ```
3. **從** CSS 重置和現代預設開始：
   ```css
   /* Modern CSS reset and base styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     color: #333;
   }
   ```

### 第 2 步：設計系統需求

**實作以下核心設計元素：**

#### 色彩調色盤
- **主色調**：選擇專業色彩用於按鈕與重點標示
- **次色調**：互補色用於點綴和次要操作
- **中性色**：灰色用於文字、邊框和背景
- **成功/錯誤色彩**：綠色表示成功狀態，紅色表示錯誤

#### 字體排版
- **標題層級**：清楚區分 H1、H2 和 H3 元素
- **正文文字**：可讀字體大小（最小 16px）與適當行高
- **表單標籤**：清晰且易讀的文字樣式

#### 版面配置與間距
- **一致的間距**：使用間距刻度（8px、16px、24px、32px）
- **格線系統**：表單與內容區域的有序布局
- **響應式設計**：採用行動優先策略與斷點

### 第 3 步：組件樣式

**設計以下特定組件樣式：**

#### 表單
- **輸入欄位**：專業邊框、聚焦狀態與驗證樣式
- **按鈕**：滑鼠懸停效果、禁用狀態與載入指示
- **標籤**：清晰定位及必填欄位標示
- **錯誤訊息**：可見的錯誤樣式與友善提示

#### 導航
- **頁首**：簡潔且具有品牌風格的導航區域
- **連結**：清楚的懸停狀態與作用中指示
- **商標/標題**：獨特的品牌元素

#### 內容區域
- **區塊分隔**：不同區域間明確的視覺分隔
- **卡片**：若使用卡片式佈局，包含陰影與邊框
- **背景**：適度留白和細膩背景運用

### 第 4 步：進階功能（選擇性）

**可考慮實作以下進階功能：**
- **深色模式**：亮色與暗色主題切換
- **動畫效果**：細微的過渡與微互動
- **載入狀態**：表單提交時的視覺回饋
- **響應式圖片**：針對不同螢幕尺寸優化的圖片

## 設計靈感

**現代銀行應用程式特徵：**
- **乾淨、簡約設計**，大量留白
- **專業色彩方案**（藍色、綠色或高雅中性色）
- **清楚視覺層級**，具有醒目的動作呼籲按鈕
- **無障礙對比度** 符合 WCAG 指南
- **行動響應式佈局** 適用於所有裝置

## 技術需求

### CSS 組織
```css
/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */
```

### 無障礙需求
- **色彩對比**：確保一般文字至少有 4.5:1 的對比度
- **聚焦指示**：鍵盤導覽時可見的聚焦狀態
- **表單標籤**：正確關聯輸入欄位
- **響應式設計**：可用於寬度介於 320px 到 1920px 的螢幕

## 評分標準

| 標準 | 優異 (A) | 良好 (B) | 需改進 (C) | 不及格 (F) |
|----------|---------------|----------------|----------------|----------------------|
| **設計系統** | 實作完整設計系統，整體色彩、字體與間距一致 | 使用一致樣式，清楚設計模式與良好視覺層級 | 基本樣式，有部分一致性問題或缺少設計元素 | 樣式簡陋且不一致或衝突 |
| **使用者體驗** | 建立直觀專業介面，具優秀可用性與視覺吸引力 | 提供良好使用體驗，清楚導覽與易讀內容 | 基本可用性，需改進 UX | 可用性差，難以導航或閱讀 |
| **技術實作** | 採用現代 CSS 技術，組織良好，符合最佳實踐 | 有效運用 CSS，組織良好、技術合適 | CSS 正確工作，可能缺乏組織或現代技術 | CSS 實作差，有技術問題或瀏覽器相容問題 |
| **響應式設計** | 完整響應式設計，完美適用各種裝置大小 | 良好響應式行為，少數螢幕尺寸有問題 | 基本響應式，部分佈局有問題 | 不響應式，行動裝置有顯著問題 |
| **無障礙** | 符合 WCAG，鍵盤導航與螢幕閱讀器支持優秀 | 良好無障礙實務，恰當對比與聚焦指示 | 基本無障礙，少部分元素缺失 | 無障礙差，行動不便者難以使用 |

## 提交指南

**請一併提交：**
- **styles.css**：完整樣式表
- **更新的 HTML**：您修改的任何 HTML
- **截圖**：桌面與行動裝置上的設計畫面
- **README**：簡述您的設計選擇與色彩調色盤

**加分項目：**
- **CSS 自訂屬性**，維護便利的主題化
- **先進 CSS 功能**，如 Grid、Flexbox 或 CSS 動畫
- **效能優化**，如精簡 CSS 與檔案大小
- **跨瀏覽器測試**，確保各瀏覽器兼容性

> 💡 **專家秘訣**：先從行動裝置設計開始，再針對較大螢幕強化。此行動優先策略確保您的應用在所有裝置上良好運作，並符合現代網頁開發最佳實踐。

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免責聲明**：  
本文件已使用 AI 翻譯服務 [Co-op Translator](https://github.com/Azure/co-op-translator) 進行翻譯。雖然我們致力於確保準確性，但請注意自動翻譯可能包含錯誤或不準確之處。原始文件的母語版本應被視為具權威性的來源。對於重要資訊，建議聘請專業人工翻譯。我們對因使用本翻譯而產生的任何誤解或誤譯不承擔任何責任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->