? CSS File (styles.css)

This file adds styling to your HTML. Here's what it looks like:

body {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.profile-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.profile-name {
  font-size: 1.5em;
  margin: 10px 0 5px;
  color: #333;
}

.profile-role {
  font-size: 1em;
  color: #777;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-link {
  text-decoration: none;
  color: #008cba;
  font-weight: bold;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: #005f73;
}

Erkl?rung der Schlüsselstile

1. Hintergrund und Zentrierung:
   
   Der K?rper zentriert die Profilkarte mit Flexbox und legt eine hellblaue Hintergrundfarbe fest.

2. Profilkarten-Styling:

   • Hintergrundfarbe: Legt einen wei?en Hintergrund fest.
   • border-radius: Rundet die Ecken ab.
   • box-shadow: Fügt einen subtilen Schatten für Tiefe hinzu.

3. Bildgestaltung:

   • Breite und H?he: Stellen Sie die Bildgr??e ein.
   • Randradius: 50 %: Macht das Bild kreisf?rmig.

4. Textstil:
   
   Gestaltet den Namen und die Rolle mit verschiedenen Schriftgr??en und Farben.

5. Soziale Links:

   • Angeordnet mit Flexbox für den Abstand.
   • Hover-Effekt, um die Linkfarbe zu ?ndern.

? So verwenden Sie dieses Projekt

1. Dateien herunterladen:
   
   Laden Sie die Dateien ?index.html“ und ?styles.css“ herunter oder kopieren Sie sie.

2. ?ffnen Sie die HTML-Datei:
   
   Doppelklicken Sie auf die Datei index.html, um sie in Ihrem Browser zu ?ffnen.

3. Inhalt bearbeiten:

   • ?ndern Sie den Namen und die Rolle.
   • Ersetzen Sie die Bild-URL durch Ihr eigenes Profilbild.
   • Aktualisieren Sie die Social-Media-Links.

4. Experimentieren Sie mit CSS:
   
   Versuchen Sie, Farben, Schriftarten und Gr??en in der Datei ?styles.css“ zu ?ndern, um zu sehen, wie sich das auf das Design auswirkt!

? Was Sie lernen werden

• So erstellen Sie ein HTML-Layout.
• So gestalten Sie Elemente mit CSS.
• So verwenden Sie Flexbox zur Ausrichtung.
• So fügen Sie Hover-Effekte für Interaktivit?t hinzu.

? N?chste Schritte

• Weitere Funktionen hinzufügen: Fügen Sie einen Bio-Bereich oder eine Kontaktschaltfl?che hinzu.
• Machen Sie es responsiv: Erfahren Sie, wie Sie dafür sorgen, dass die Karte auf Mobilger?ten gut aussieht.
• Animationen hinzufügen: Verwenden Sie CSS-Animationen, um die Karte interaktiver zu gestalten.

Viel Spa? beim Codieren! ??

Das obige ist der detaillierte Inhalt vonPers?nliche Profilkartenschnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!