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

該專案提供了使用 HTML 和 CSS 建構(gòu)、樣式化和擴增實境世界介面的實用介紹。它為更複雜的 Web 應(yīng)用程式提供了基礎(chǔ)，並幫助學(xué)習(xí)者整合 JavaScript 和響應(yīng)式設(shè)計概念。

讓我們將專案分解為關(guān)鍵概念、部分和使用的技術(shù)。

?? 專案概述

目的：

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

關(guān)鍵組件：

1. 側(cè)邊欄導(dǎo)覽
2. 主要內(nèi)容區(qū)（卡片和交易概覽表）
3. 頁首和頁尾

？ HTML 細分 (index.html)

？ 1. HTML 結(jié)構(gòu)

頁分為不同的語意部分：

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

概念介紹：

1. 語意 HTML:

   • 導(dǎo)覽、頁首、部分、頁尾：提供更好的可讀性和 SEO 優(yōu)勢。

2. 列表導(dǎo)航:

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

3. 造型課程：

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

---

？ CSS 分解 (styles.css)

？ 1.一般重置

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

• 目的： 設(shè)定預(yù)設(shè)字體、邊距、填滿和背景顏色，以確?？鐬g覽器的樣式一致。

---

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

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

• 說明：
  • display: flex：使主容器成為彈性容器，允許側(cè)邊欄和主要內(nèi)容並排放置。
  • min-height: 100vh：確保儀表板佔據(jù)視窗的整個高度。

---

？ 3.側(cè)邊欄樣式

.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;
}

• 關(guān)鍵概念：
  • 背景顏色：為側(cè)邊欄設(shè)定深色主題。
  • 連結(jié)：使用過渡效果設(shè)定懸停效果以實現(xiàn)平滑的顏色變化。

---

？ 4.主要內(nèi)容與標題

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：將標題放置在左側(cè)，將個人資料圖示放置在右側(cè)。
  • 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：折疊消除表格邊框之間的間距。
  • 單元格的內(nèi)邊距和邊框一致。
  • 標題行（第）採用深色背景樣式以形成對比。

---

？ 教授概念

1. 語意 HTML:
   
   提高可讀性和結(jié)構(gòu)。

2. Flexbox:
   
   簡化佈局設(shè)計，更輕鬆地建立響應(yīng)式介面。

3. 導(dǎo)覽選單:
   
   如何使用連結(jié)建立側(cè)邊欄並設(shè)定其樣式。

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

5. 表格:
   
   以結(jié)構(gòu)化方式格式化資料。

6. 懸停效果與轉(zhuǎn)換:
   
   為導(dǎo)航連結(jié)添加互動性。

在 GitHub 上查看專案