Antara Muka Papan Pemuka Kewangan Peribadi

? Pecahan CSS (styles.css)

? 1. Tetapan Semula Umum

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

• Tujuan: Tetapkan fon lalai, jidar, padding dan warna latar belakang untuk memastikan penggayaan yang konsisten merentas penyemak imbas.

? 2. Reka Letak Papan Pemuka dengan Flexbox

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

• Penjelasan:
  • paparan: flex: Menjadikan bekas utama sebagai bekas fleksibel, membenarkan bar sisi dan kandungan utama duduk bersebelahan.
  • ketinggian min: 100vh: Memastikan papan pemuka mengambil ketinggian penuh port pandangan.

? 3. Penggayaan Bar Sisi

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

• Konsep Utama:
  • Warna Latar Belakang: Menetapkan tema gelap untuk bar sisi.
  • Pautan: Digayakan dengan kesan tuding menggunakan peralihan untuk perubahan warna yang licin.

? 4. Kandungan Utama dan Tajuk

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

• Flexbox untuk Pengepala:

  • justify-content: space-between: Letakkan tajuk di sebelah kiri dan ikon profil di sebelah kanan.
  • align-item: tengah: Menjajarkan item secara menegak.

• Imej Bulat:

  • jejari sempadan: 50% menjadikan ikon profil membulat.

? 5. Kad Gambaran Keseluruhan

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

• Susun Letak Flexbox:

  • paparan: flex menyusun kad secara mendatar.
  • jurang: 20px mewujudkan jarak antara kad.
  • flex: 1 memastikan kad diagihkan sama rata.

• Teknik Penggayaan:

  • Warna Latar Belakang untuk daya tarikan visual.
  • Bayang Kotak menambah kedalaman pada kad.

? 6. Jadual Transaksi

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

• Penggayaan Jadual:
  • runtuh sempadan: runtuh membuang jarak antara sempadan jadual.
  • Pelapik dan sempadan yang konsisten untuk sel.
  • Baris pengepala (th) digayakan dengan latar belakang gelap untuk kontras.

? Konsep yang Diajar

1. HTML Semantik:
   
   Meningkatkan kebolehbacaan dan struktur.

2. Flexbox:
   
   Memudahkan reka bentuk reka letak, menjadikannya lebih mudah untuk membuat antara muka responsif.

3. Menu Navigasi:
   
   Cara menstruktur dan menggayakan bar sisi dengan pautan.

4. Kad dan Panel:
   
   Mencipta komponen yang menarik secara visual dan boleh digunakan semula.

5. Jadual:
   
   Memformat data secara berstruktur.

6. Kesan Tuding dan Peralihan:
   
   Menambahkan interaktiviti pada pautan navigasi.

Lihat Projek di GitHub

Atas ialah kandungan terperinci Antara Muka Papan Pemuka Kewangan Peribadi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!