创建个人简介卡片需先搭建HTML结构并编写CSS样式，使用Flex布局居中卡片，通过box-sizing、border-radius、阴影等属性美化元素，结合类选择器设置头像、文字、社交链接样式，并可扩展主题色、hover效果及响应式设计。
想通过一个简单项目掌握CSS基础用法？下面带你一步步完成一个“个人简介卡片”页面，涵盖常用CSS属性与布局技巧，适合初学者动手练习。
1. 项目目标：创建一个美观的个人简介卡片
我们要实现一个居中的卡片，包含头像、姓名、职业、一段简介和社交媒体图标。整体风格简洁现代，使用HTML搭建结构，CSS进行样式美化。
2. 第一步：搭建HTML结构
创建一个index.html文件，写入以下内容：
说明： 使用语义化标签让结构清晰，为后续样式添加类名（class）便于控制样式。
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>个人简介卡片</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="card">
<img src="avatar.jpg" alt="头像" class="avatar" />
<h2 class="name">张三</h2>
<p class="title">前端开发者</p>
<p class="bio">热爱编程，专注于Web技术学习与实践。</p>
<div class="social">
<a href="#">GitHub</a>
<a href="#">LinkedIn</a>
</div>
</div>
</body>
</html>
提示： 头像图片可从网络下载一张圆形图片命名为 avatar.jpg 放在同一目录下。
3. 第二步：编写CSS样式
创建style.css文件，逐步添加样式。
重置默认样式与设置基础字体
* {margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
说明： 使用 Flex 布局让卡片在页面居中。box-sizing:border-box 避免尺寸计算问题。
设计卡片容器
width: 300px;
padding: 24px;
background-color: white;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
text-align: center;
}
设置头像样式
.avatar {width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 16px;
border: 3px solid #e0e0e0;
}
说明： object-fit:cover 保证图片不变形；border-radius:50% 实现圆形头像。
美化文字内容
.name {font-size: 22px;
color: #333;
margin-bottom: 4px;
}
.title {
font-size: 16px;
color: #666;
margin-bottom: 12px;
}
.bio {
font-size: 14px;
color: #555;
line-height: 1.5;
margin-bottom: 16px;
}
社交链接区域样式
.social a {color: #0077cc;
text-decoration: none;
font-size: 14px;
margin: 0 10px;
}
.social a:hover {
text-decoration: underline;
}
说明： 添加 hover 效果提升交互体验。
4. 最终效果与优化建议
保存所有文件后，在浏览器打开 index.html，你应该看到一个居中的白色卡片，包含头像和信息，整体清爽美观。
可以尝试的扩展练习：
- 修改主题色，比如换成蓝色或紫色边框
- 给卡片添加 hover 效果：鼠标移上时阴影变大
- 使用 @media 查询实现移动端适配
- 引入图标字体（如Font Awesome）替换文字链接
基本上就这些。这个小项目覆盖了选择器、盒模型、Flex布局、圆角、阴影、字体、伪类等核心CSS知识点，动手改一改参数，理解会更深刻。
