当前位置：首页 > news >正文

零基础5分钟搞定！用纯HTML+CSS手搓一个简约风个人主页（附完整源码）

news 2026/6/8 5:04:36

零基础5分钟搞定！用纯HTML+CSS手搓一个简约风个人主页（附完整源码）

最近有个朋友问我："想做个个人主页展示自己，但完全不懂编程怎么办？"其实用最基础的HTML+CSS就能快速实现。今天我们就来手把手教你，无需任何框架，5分钟内打造一个简约又专业的个人主页。这个方案特别适合编程新手、自由职业者或想建立个人品牌的朋友。

1. 准备工作：认识HTML和CSS

在开始之前，我们先简单了解下这两个核心技术：

HTML：网页的骨架，负责内容结构
CSS：网页的皮肤，负责样式美化

不需要安装任何软件，只需一个文本编辑器（记事本、VS Code等）和浏览器就能开始。下面是我们的项目文件结构：

my-website/ ├── index.html # 主页面文件 ├── style.css # 样式文件 └── images/ # 存放图片素材

2. 基础HTML结构搭建

我们先创建一个最简单的HTML5文档框架：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人主页</title> <link rel="stylesheet" href="style.css"> </head> <body> <!-- 页面内容将放在这里 --> </body> </html>

这个基础结构包含了：

文档类型声明
语言设置
字符编码
视口设置（确保移动端适配）
标题
CSS文件链接

3. 设计个人主页布局

我们采用经典的"卡片式"布局，包含以下元素：

个人头像
姓名/头衔
简短自我介绍
社交链接

对应的HTML代码如下：

<div class="profile-card"> <img src="images/avatar.jpg" alt="个人头像" class="avatar"> <h1>张三</h1> <h2>前端开发者 & 设计师</h2> <p>热爱创造美观实用的网页体验，专注于HTML/CSS/JavaScript开发。</p> <div class="social-links"> <a href="#" class="github">GitHub</a> <a href="#" class="twitter">Twitter</a> <a href="#" class="linkedin">LinkedIn</a> </div> </div>

4. 用CSS美化页面

现在我们来添加样式，创建一个简约现代的外观。以下是核心CSS代码：

/* 基础重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .profile-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 40px; text-align: center; max-width: 400px; width: 100%; transition: transform 0.3s ease; } .profile-card:hover { transform: translateY(-5px); } .avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; border: 5px solid #f0f0f0; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } h2 { color: #666; font-size: 18px; font-weight: normal; margin-bottom: 20px; } p { color: #777; line-height: 1.6; margin-bottom: 30px; } .social-links { display: flex; justify-content: center; gap: 15px; } .social-links a { padding: 10px 20px; border-radius: 5px; color: white; text-decoration: none; font-weight: bold; transition: opacity 0.3s; } .social-links a:hover { opacity: 0.8; } .github { background: #333; } .twitter { background: #1DA1F2; } .linkedin { background: #0077B5; }

5. 个性化定制指南

现在你已经有了基础代码，接下来是如何快速定制成你自己的主页：

5.1 更换头像

准备一张正方形头像图片（建议至少400×400像素）
将图片放入images文件夹
修改HTML中的图片路径：

<img src="images/your-photo.jpg" alt="你的名字" class="avatar">

5.2 修改文字内容

直接编辑HTML中的这些部分：

<h1>你的名字</h1> <h2>你的职业/头衔</h2> <p>你的个人简介...</p>

5.3 更新社交链接

找到social-links部分，替换href值为你的真实社交账号链接：

<div class="social-links"> <a href="https://github.com/yourname" class="github">GitHub</a> <a href="https://twitter.com/yourname" class="twitter">Twitter</a> <a href="https://linkedin.com/in/yourname" class="linkedin">LinkedIn</a> </div>

5.4 调整配色方案

要更改整体配色，只需修改CSS中的颜色值：

/* 主色调调整 */ .profile-card { background: #你的颜色; } /* 按钮颜色 */ .github { background: #你的颜色; } .twitter { background: #你的颜色; } .linkedin { background: #你的颜色; }

6. 进阶优化技巧

想让你的主页更专业？试试这些增强功能：

6.1 添加响应式设计

确保在各种设备上都能良好显示：

@media (max-width: 480px) { .profile-card { padding: 30px 20px; } .avatar { width: 120px; height: 120px; } .social-links { flex-direction: column; gap: 10px; } }

6.2 添加动画效果

让页面更有活力：

@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .profile-card { animation: fadeIn 0.6s ease-out; }

6.3 添加暗黑模式支持

适应系统偏好设置：

@media (prefers-color-scheme: dark) { body { background: #121212; } .profile-card { background: #1e1e1e; color: white; } h1, h2, p { color: #e0e0e0; } }

7. 完整源码与部署

这是完整的HTML文件代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人主页</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', sans-serif; background: #f5f5f5; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; } .profile-card { background: white; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); padding: 40px; text-align: center; max-width: 400px; width: 100%; transition: transform 0.3s ease; animation: fadeIn 0.6s ease-out; } .profile-card:hover { transform: translateY(-5px); } .avatar { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; border: 5px solid #f0f0f0; } h1 { color: #333; margin-bottom: 10px; font-size: 28px; } h2 { color: #666; font-size: 18px; font-weight: normal; margin-bottom: 20px; } p { color: #777; line-height: 1.6; margin-bottom: 30px; } .social-links { display: flex; justify-content: center; gap: 15px; } .social-links a { padding: 10px 20px; border-radius: 5px; color: white; text-decoration: none; font-weight: bold; transition: opacity 0.3s; } .social-links a:hover { opacity: 0.8; } .github { background: #333; } .twitter { background: #1DA1F2; } .linkedin { background: #0077B5; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 480px) { .profile-card { padding: 30px 20px; } .avatar { width: 120px; height: 120px; } .social-links { flex-direction: column; gap: 10px; } } @media (prefers-color-scheme: dark) { body { background: #121212; } .profile-card { background: #1e1e1e; color: white; } h1, h2, p { color: #e0e0e0; } } </style> </head> <body> <div class="profile-card"> <img src="images/avatar.jpg" alt="个人头像" class="avatar"> <h1>你的名字</h1> <h2>你的职业/头衔</h2> <p>你的个人简介...</p> <div class="social-links"> <a href="https://github.com/yourname" class="github">GitHub</a> <a href="https://twitter.com/yourname" class="twitter">Twitter</a> <a href="https://linkedin.com/in/yourname" class="linkedin">LinkedIn</a> </div> </div> </body> </html>

要部署这个页面，你有几个简单选择：