Persönliche Finanz-Dashboard-Schnittstelle

? CSS-Aufschlüsselung (styles.css)

? 1. Allgemeiner Reset

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

• Zweck: Legt Standardschriftart, Rand, Abstand und Hintergrundfarbe fest, um ein einheitliches Design in allen Browsern sicherzustellen.

? 2. Dashboard-Layout mit Flexbox

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

• Erklärung:
  • display: flex: Macht den Hauptcontainer zu einem Flex-Container, sodass die Seitenleiste und der Hauptinhalt nebeneinander angezeigt werden können.
  • min-height: 100vh: Stellt sicher, dass das Dashboard die volle Höhe des Ansichtsfensters einnimmt.

? 3. Seitenleisten-Styling

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

• Schlüsselkonzepte:
  • Hintergrundfarbe: Legt ein dunkles Thema für die Seitenleiste fest.
  • Links: Stilisiert mit einem Hover-Effekt und einem Übergang für einen sanften Farbwechsel.

? 4. Hauptinhalt und Header

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 für Header:

  • justify-content: space-between: Positioniert den Titel links und das Profilsymbol rechts.
  • align-items: center: Richtet die Elemente vertikal aus.

• Abgerundetes Bild:

  • Randradius: 50 % macht das Profilsymbol kreisförmig.

? 5. Übersichtskarten

.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-Layout:

  • display: flex ordnet die Karten horizontal an.
  • Lücke: 20 Pixel schaffen Abstand zwischen den Karten.
  • Flex: 1 sorgt dafür, dass die Karten gleichmäßig verteilt werden.

• Styling-Techniken:

  • Hintergrundfarbe für visuelle Attraktivität.
  • Box Shadow verleiht den Karten Tiefe.

? 6. Transaktionstabelle

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

• Tischgestaltung:
  • border-collapse: Durch Zusammenklappen wird der Abstand zwischen Tabellenrändern entfernt.
  • Konsistente Polsterung und Ränder für Zellen.
  • Kopfzeile (th) mit dunklem Hintergrund für Kontrast gestaltet.

? Konzepte gelehrt

1. Semantisches HTML:
   
   Verbessert die Lesbarkeit und Struktur.

2. Flexbox:
   
   Vereinfacht das Layout-Design und erleichtert die Erstellung reaktionsfähiger Schnittstellen.

3. Navigationsmenüs:
   
   So strukturieren und gestalten Sie Seitenleisten mit Links.

4. Karten und Tafeln:
   
   Erstellen optisch ansprechender und wiederverwendbarer Komponenten.

5. Tabellen:
   
   Daten strukturiert formatieren.

6. Hover-Effekte und Übergänge:
   
   Hinzufügen von Interaktivität zu Navigationslinks.

Projekt auf GitHub anzeigen

Das obige ist der detaillierte Inhalt vonPersönliche Finanz-Dashboard-Schnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!