Interface du tableau de bord des finances personnelles

? Répartition CSS (styles.css)

? 1. Réinitialisation générale

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

• Objectif : Définit la police, la marge, le remplissage et la couleur d'arrière-plan par défaut pour garantir un style cohérent dans tous les navigateurs.

? 2. Disposition du tableau de bord avec Flexbox

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

• Explication :
  • display: flex : fait du conteneur principal un conteneur flexible, permettant à la barre latérale et au contenu principal de s'asseoir côte à côte.
  • min-height : 100vh : garantit que le tableau de bord occupe toute la hauteur de la fenêtre.

? 3. Style de la barre latérale

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

• Concepts clés :
  • Couleur d'arrière-plan : définit un thème sombre pour la barre latérale.
  • Liens : Stylisé avec un effet de survol utilisant la transition pour un changement de couleur en douceur.

? 4. Contenu principal et en-tête

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 pour l'en-tête :

  • justifier-content : espace-entre : positionne le titre à gauche et l'icône de profil à droite.
  • align-items : center : aligne verticalement les éléments.

• Image arrondie :

  • border-radius : 50 % rend l'icône de profil circulaire.

? 5. Cartes de présentation

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

• Disposition Flexbox :

  • affichage : flex dispose les cartes horizontalement.
  • écart : 20 px crée un espacement entre les cartes.
  • flex : 1 garantit que les cartes sont réparties uniformément.

• Techniques de style :

  • Couleur de fond pour un attrait visuel.
  • Box Shadow ajoute de la profondeur aux cartes.

? 6. Tableau des transactions

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

• Style de table :
  • border-collapse : collapse supprime l'espacement entre les bordures du tableau.
  • Rembourrage et bordure cohérents pour les cellules.
  • Rangée d'en-tête (th) avec un fond sombre pour le contraste.

? Concepts enseignés

1. HTML sémantique :
   
   Améliore la lisibilité et la structure.

2. Flexbox :
   
   Simplifie la conception de la mise en page, facilitant la création d'interfaces réactives.

3. Menus de navigation :
   
   Comment structurer et styliser les barres latérales avec des liens.

4. Cartes et panneaux :
   
   Créer des composants visuellement attrayants et réutilisables.

5. Tableaux :
   
   Formatage des données de manière structurée.

6. Effets de survol et transitions :
   
   Ajout d'interactivité aux liens de navigation.

Afficher le projet sur GitHub

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!