查看 GitHub 上的项目

？ 项目结构

payment-app/
│-- index.html
│-- styles.css
│-- images/
│   └-- credit-card.png

？ 如何使用这个项目

1. 下载或克隆存储库：

   git clone https://github.com/yourusername/simple_interface.git

1. 导航到项目目录：

   cd payment_app_interface

1. 在浏览器中打开index.html文件查看支付App界面。

？ 主要概念和功能

1. HTML 结构:

   • 侧边栏导航：使用 nav 和 ul 制作简单的侧边栏。
   • 主要内容部分：
     • 余额显示带有样式卡片。
     • 付款表格带有输入字段和提交按钮。
     • 交易列表使用 ul 和 li 元素。

2. CSS 样式:

   • Flexbox布局：用于侧边栏和主要内容对齐。
   • 配色方案：侧边栏、按钮和交易类型（收入与支出）的不同颜色。
   • 悬停效果：按钮和侧边栏链接的交互式反馈。
   • 响应式设计：固定宽度的侧边栏，具有灵活的主要内容。

3. 中级技能练习：

   • 复杂布局带有侧边栏和多个部分。
   • 表单样式用于用户输入。
   • 一致的 UI 设计 具有不同的部分和交互元素。