# 使用现代 CSS 美化你的银行应用

## 项目概述

将你的功能性银行应用转变为视觉上吸引人、专业的网页应用，使用现代 CSS 技术。你将创建一个统一的设计系统，提升用户体验，同时保持无障碍和响应式设计原则。

本任务挑战你应用当代网页设计模式，实现一致的视觉识别，并打造用户既觉得美观又直观易用的界面。

## 说明

### 第一步：设置样式表

**创建你的 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;
   }
   ```
  
### 第二步：设计系统要求

**实现以下核心设计元素：**

#### 颜色调色板
- **主色**：为按钮和高亮选择专业颜色  
- **辅助色**：用于装饰和次要操作的互补色  
- **中性色**：用于文字、边框和背景的灰色调  
- **成功/错误色**：成功状态用绿色，错误用红色  

#### 排版
- **标题层级**：清晰区分 H1、H2 和 H3 元素  
- **正文文本**：易读字体大小（最小16px）和适当行高  
- **表单标签**：清晰、无障碍的文本样式  

#### 布局与间距
- **一致的间距**：使用间距刻度（8px、16px、24px、32px）  
- **网格系统**：表单和内容区有序布局  
- **响应式设计**：移动优先，设定断点  

### 第三步：组件样式

**为以下具体组件设计样式：**

#### 表单
- **输入框**：专业边框，聚焦状态和校验样式  
- **按钮**：悬停效果、禁用状态和加载指示  
- **标签**：清晰定位和必填标识  
- **错误信息**：明显错误样式和有用的提示信息  

#### 导航
- **页头**：简洁且有品牌风格的导航区域  
- **链接**：清晰的悬停状态和激活指示  
- **徽标/标题**：醒目的品牌元素  

#### 内容区
- **板块**：不同区域间清晰视觉分隔  
- **卡片**：使用卡片布局时，包含阴影和边框  
- **背景**：合理使用留白和细腻背景  

### 第四步：增强功能（可选）

**可考虑实现以下高级功能：**  
- **暗黑模式**：在亮色与暗色主题切换  
- **动画效果**：细腻的过渡与微交互  
- **加载状态**：表单提交过程的视觉反馈  
- **响应式图片**：针对不同屏幕尺寸优化图片  

## 设计灵感

**现代银行应用特点：**  
- **简洁、极简设计**，留白充足  
- **专业配色方案**（蓝色、绿色或高级中性色）  
- **清晰视觉层次**，突出号召性用语按钮  
- **无障碍对比度**，符合 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)                   |
|------------------|----------------------------|----------------------------|----------------------------|----------------------------|
| **设计系统**        | 全面实现，颜色、排版及间距一致              | 使用一致样式，设计模式清晰，视觉层次良好          | 基础样式，存在一致性问题或缺失设计元素            | 样式极少，设计不一致或冲突                  |
| **用户体验**        | 创造直观专业界面，极佳可用性与美观性           | 提供良好用户体验，导航清晰，内容易读              | 基本可用，用户体验有待提升                | 可用性差，难以导航或阅读                  |
| **技术实现**        | 使用现代 CSS 技术，代码结构良好，符合最佳实践        | 有效实现 CSS，组织合理，技术适当                  | CSS 功能正常，缺少组织或现代方法             | CSS 实现差，存在技术或浏览器兼容问题           |
| **响应式设计**       | 设计完全响应，适用于所有设备尺寸              | 响应表现良好，部分屏幕尺寸有轻微问题               | 基础响应设计，存在部分布局问题               | 不响应或移动端存在明显问题                 |
| **无障碍**          | 遵循 WCAG 指南，键盘导航和屏幕阅读器支持优秀         | 良好无障碍实践，对比和焦点明显                    | 基本考虑无障碍，部分元素缺失                 | 无障碍差，残障用户难以使用                  |

## 提交指南

**提交内容包括：**  
- **styles.css**：完整样式表  
- **更新后的 HTML**：所有修改的 HTML 文件  
- **截图**：桌面及移动端设计效果图  
- **README**：简述设计选择及配色方案  

**加分项：**  
- **CSS 自定义属性**，便于维护主题  
- **高级 CSS 功能**，如 Grid、Flexbox 或 CSS 动画  
- **性能考量**，如优化 CSS 及文件大小最小化  
- **跨浏览器测试**，确保兼容多种浏览器  

> 💡 **专业小贴士**：从移动端设计开始，再增强大屏体验。移动优先策略确保应用在所有设备上表现良好，并符合现代网页开发最佳实践。

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**免责声明**：  
本文件由人工智能翻译服务[Co-op Translator](https://github.com/Azure/co-op-translator)翻译。虽然我们力求准确，但请注意，自动翻译可能存在错误或不准确之处。应以原文作为权威来源。对于重要信息，建议采用专业人工翻译。因使用本翻译而产生的任何误解或误释，我们不承担任何责任。
<!-- CO-OP TRANSLATOR DISCLAIMER END -->