制作个人简介卡片 — HTML/CSS 初学者项目教程

📖 教程步骤

1 创建 HTML 结构

首先创建卡片的基本 HTML 骨架。使用 <div class="profile-card"> 作为容器，在里面依次放入头像图片、姓名、职位、简介文字和社交链接。

<div class="profile-card">
    <img class="avatar" src="avatar.jpg" alt="用户头像">
    <h2>Alex Chen</h2>
    <p class="title">Frontend Developer</p>
    <p class="bio">Passionate about building beautiful web experiences.</p>
    <div class="social-links">
        <a href="#">GitHub</a>
        <a href="#">Twitter</a>
    </div>
</div>

2 添加渐变背景

给卡片添加一个从左到右的紫色渐变背景，让它看起来更现代、更吸引人。

.profile-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    color: white;
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

3 设计头像样式

使头像变成圆形（border-radius: 50%），并添加一个半透明的边框增加层次感。

.profile-card .avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.4);
    object-fit: cover;
    margin-bottom: 1rem;
}

4 排版与间距

使用 margin 和 opacity 控制文字间距和层次感。标题用大号加粗字体，副标题用半透明效果。

.profile-card h2 { font-size: 1.5rem; margin-bottom: 0.25rem; }
.profile-card .title { font-size: 0.9rem; opacity: 0.8; margin-bottom: 1rem; }
.profile-card .bio { font-size: 0.9rem; line-height: 1.6; opacity: 0.9; margin-bottom: 1.5rem; }

5 社交链接按钮

使用 Flexbox 水平排列社交链接图标，每个图标做成圆形按钮，悬停时背景变亮。

.profile-card .social-links {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}
.profile-card .social-links a {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.profile-card .social-links a:hover {
    background: rgba(255,255,255,0.3);
}

6 完成！

把你的头像照片替换掉 placeholder，修改姓名和简介文字，即可作为你的个人名片使用。整个卡片纯 HTML+CSS 实现，无需 JavaScript。

💡 小技巧：可以尝试不同的渐变颜色组合，或者添加 transform: scale() 悬停动画让卡片更生动。

🪪 制作个人简介卡片

Alex Chen

📖 教程步骤