查看 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 設計 具有不同的部分和互動元素。