Interface de carte de profil personnel-tutoriel CSS-php.cn

Interface de carte de profil personnel

Patricia Arquette

Libérer： 2024-12-17 01:56:25

original

150 Les gens l'ont consulté

Personal Profile Card Interface

Il s'agit d'un projet simple et adapté aux débutants pour vous aider à apprendre le HTML et le CSS en créant une carte de profil élégante qui affiche une photo, nom, rôle et liens vers les réseaux sociaux.

? Aperçu du projet

Ce projet vous apprendra à :

Structurez un document HTML de base.
Appliquez CSS pour styliser votre contenu.
Créez une disposition de carte simple avec des coins arrondis et des ombres.
Ajoutez et stylisez des images, du texte et des liens.
Utilisez Flexbox pour organiser les éléments.

? Structure des fichiers

Votre projet aura deux fichiers :

personal-profile_card/
│-- index.html      ← The HTML structure
└-- styles.css      ← The CSS styling

Copier après la connexion

? Fichier HTML (index.html)

Ce fichier contient la structure (ou squelette) de la page web. Voici à quoi cela ressemble :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Profile Card</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>



<h3>
  
  
  <strong>Explanation of Key Elements</strong>
</h3>

<ol>
<li><p><strong>Profile Card Container</strong> (<div><br>
A box that holds the image, name, role, and social links.</p></li>
<li><p><strong>Image Tag</strong> (<img>)<br><br>
Displays the profile picture.

Copier après la connexion

Headings and Paragraph

for the user's name.
for the user's role.

Links

tags for social media links.

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

Copier après la connexion

Explication des styles clés

Fond et centrage :

Le corps centre la carte de profil à l'aide de Flexbox et définit une couleur d'arrière-plan bleu clair.
Style de la carte de profil :
- background-color : définit un arrière-plan blanc.
- border-radius : Arrondit les coins.
- box-shadow : Ajoute une ombre subtile pour la profondeur.
Style d'image :
- largeur et hauteur : définissez la taille de l’image.
- border-radius : 50 % : Rend l'image circulaire.
Style du texte :

Stylise le nom et le rôle avec différentes tailles et couleurs de police.
Liens sociaux :
- Disposé avec Flexbox pour l'espacement.
- Effet de survol pour changer la couleur du lien.

? Comment utiliser ce projet

Téléchargez les fichiers :

Téléchargez ou copiez les fichiers index.html et styles.css.
Ouvrez le fichier HTML :

Double-cliquez sur le fichier index.html pour l'ouvrir dans votre navigateur.
Modifier le contenu :
- Changez le nom et le rôle.
- Remplacez l'URL de l'image par votre propre photo de profil.
- Mettez à jour les liens vers les réseaux sociaux.
Expérimenter avec CSS :

Essayez de changer les couleurs, les polices et les tailles dans styles.css pour voir comment cela affecte le design !

? Ce que vous apprendrez

Comment créer une mise en page HTML.
Comment styliser des éléments avec CSS.
Comment utiliser Flexbox pour l'alignement.
Comment ajouter des effets de survol pour l'interactivité.

? Prochaines étapes

Ajouter plus de fonctionnalités : incluez une section bio ou un bouton de contact.
Rendre la carte réactive : découvrez comment donner à la carte une belle apparence sur les appareils mobiles.
Ajouter des animations : utilisez des animations CSS pour rendre la carte plus interactive.

Bon codage ! ??

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!