css初级项目实战详解与操作步骤-css教程-PHP中文网

css初级项目实战详解与操作步骤

P粉602998670

发布： 2025-10-03 10:41:02

原创

315人浏览过

创建个人简介卡片需先搭建HTML结构并编写CSS样式，使用Flex布局居中卡片，通过box-sizing、border-radius、阴影等属性美化元素，结合类选择器设置头像、文字、社交链接样式，并可扩展主题色、hover效果及响应式设计。

css初级项目实战详解与操作步骤

想通过一个简单项目掌握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 避免尺寸计算问题。

设计卡片容器

笔目鱼英文论文写作器

写高质量英文论文，就用笔目鱼

查看详情

.card {
  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 效果提升交互体验。