個人理財儀表板介面

？ 解釋中級個人理財儀表板項目

該專案提供了使用 HTML 和 CSS 建構、樣式化和擴增實境世界介面的實用介紹。它為更複雜的 Web 應用程式提供了基礎，並幫助學習者整合 JavaScript 和響應式設計概念。

讓我們將專案分解為關鍵概念、部分和使用的技術。

?️ 專案概述

目的：

個人財務儀表板旨在顯示財務數據，例如帳戶餘額、最近交易和預算概覽。此專案可幫助學習者了解如何使用高階 CSS 技術建立結構化和樣式化的介面，例如 Flexbox 和 Grid.

關鍵組件：

1. 側邊欄導覽
2. 主要內容區（卡片和交易概覽表）
3. 頁首和頁尾

？ HTML 細分 (index.html)

？ 1. HTML 結構

頁分為不同的語意部分：

• 側邊欄 (
• 主要內容 (
• 標題 (
  )：顯示頁面標題和個人資料圖示。
• 頁腳 (

概念介紹：

1. 語意 HTML:

   • 導覽、頁首、部分、頁尾：提供更好的可讀性和 SEO 優勢。

2. 列表導航:

   • 對於無序列表。
   • 可點選連結的標籤。

3. 造型課程：

   • 元素被指定為側邊欄、主要內容和個人資料圖示等類，以在 CSS 中設定它們的樣式。

---

？ CSS 分解 (styles.css)

？ 1.一般重置

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f9;
  color: #333;
}

登入後複製
• 目的： 設定預設字體、邊距、填滿和背景顏色，以確保跨瀏覽器的樣式一致。

---

？ 2.使用 Flexbox 的儀表板佈局

.dashboard-container {
  display: flex;
  min-height: 100vh;
}

登入後複製
• 說明：
  • display: flex：使主容器成為彈性容器，允許側邊欄和主要內容並排放置。
  • min-height: 100vh：確保儀表板佔據視窗的整個高度。

---

？ 3.側邊欄樣式

.sidebar {
  background-color: #2a3f54;
  color: white;
  padding: 20px;
  width: 250px;
}

.sidebar a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.sidebar a:hover {
  color: #1abc9c;
}

登入後複製
• 關鍵概念：
  • 背景顏色：為側邊欄設定深色主題。
  • 連結：使用過渡效果設定懸停效果以實現平滑的顏色變化。

---

？ 4.主要內容與標題

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}

.profile-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

登入後複製

• 標題彈性盒:

  • justify-content: space- Between：將標題放置在左側，將個人資料圖示放置在右側。
  • align-items: center: 垂直對齊項目。

• 圓形影像：

  • border-radius: 50% 使個人資料圖示呈圓形。

---

？ 5.概覽卡

.overview-cards {
  display: flex;
  gap: 20px;
  margin: 20px 0;
}

.card {
  background-color: #1abc9c;
  color: white;
  padding: 20px;
  border-radius: 10px;
  flex: 1;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

登入後複製

• Flexbox 版面:

  • 顯示：flex 水平排列卡片。
  • 間隙：20px 在卡片之間建立間距。
  • flex: 1 確保卡片均勻分佈。

• 造型技巧：

  • 背景顏色視覺吸引力。
  • 盒子陰影增加了卡片的深度。

---

？ 6.交易表

.transactions table {
  width: 100%;
  border-collapse: collapse;
}

.transactions th, .transactions td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.transactions th {
  background-color: #2a3f54;
  color: white;
}

登入後複製
• 表格樣式：
  • border-collapse：折疊消除表格邊框之間的間距。
  • 單元格的內邊距和邊框一致。
  • 標題行（第）採用深色背景樣式以形成對比。

---

？ 教授概念

1. 語意 HTML:
   
   提高可讀性和結構。

2. Flexbox:
   
   簡化佈局設計，更輕鬆地建立響應式介面。

3. 導覽選單:
   
   如何使用連結建立側邊欄並設定其樣式。

4. 卡片和麵板：
   
   建立具有視覺吸引力且可重複使用的元件。

5. 表格:
   
   以結構化方式格式化資料。

6. 懸停效果與轉換:
   
   為導航連結添加互動性。

在 GitHub 上查看專案