制作HTML在线简历和创建个人作品集是展示个人技术能力与过往成果的有效方式，整个过程可以分为前期准备、页面开发、功能完善、部署上线四个核心阶段，每个阶段都有明确的操作要点。
前期准备
在开始编写代码前，需要先明确页面的核心内容。在线简历需要包含个人基本信息、教育经历、工作经历、技能清单、项目经验等模块；个人作品集则需要整理过往开发的作品，每个作品要准备名称、简介、技术栈、预览链接、源码链接等信息。
同时可以准备基础的素材，比如个人头像、作品截图、常用的图标资源，避免开发过程中频繁查找素材打断思路。
HTML页面结构搭建
首先创建基础的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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<ul>
<li><a href="#resume">简历</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
<!-- 在线简历模块 -->
<section id="resume" class="resume-section">
<h2>个人简历</h2>
<div class="basic-info">
<h3>基本信息</h3>
<p>姓名：张三</p>
<p>岗位：前端开发工程师</p>
<p>工作年限：3年</p>
</div>
<div class="skill-list">
<h3>技能清单</h3>
<ul>
<li>熟练掌握HTML、CSS、JavaScript</li>
<li>熟悉Vue、React框架</li>
<li>了解Node.js基础开发</li>
</ul>
</div>
</section>
<!-- 个人作品集模块 -->
<section id="portfolio" class="portfolio-section">
<h2>个人作品集</h2>
<div class="portfolio-item">
<h3>电商首页项目</h3>
<p>技术栈：HTML、CSS、JavaScript、Vue</p>
<p>项目简介：实现电商首页的商品展示、轮播图、购物车基础功能</p>
</div>
</section>
<!-- 页脚联系模块 -->
<footer id="contact" class="footer">
<p>联系邮箱：test@ipipp.com</p>
</footer>
<script src="script.js"></script>
</body>
</html>
样式美化
创建style.css文件，为页面添加样式，让布局更合理，视觉效果更舒适。可以设置响应式布局，适配不同尺寸的设备。
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
color: #333;
}
/* 导航栏样式 */
.navbar {
background-color: #2c3e50;
padding: 1rem 0;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
gap: 2rem;
}
.navbar a {
color: #fff;
text-decoration: none;
font-size: 1.1rem;
}
.navbar a:hover {
color: #3498db;
}
/* 简历模块样式 */
.resume-section {
padding: 2rem 10%;
margin: 2rem 0;
background-color: #f9f9f9;
}
.resume-section h2 {
text-align: center;
margin-bottom: 1.5rem;
color: #2c3e50;
}
.basic-info, .skill-list {
margin-bottom: 1.5rem;
}
.skill-list ul {
margin-left: 1.5rem;
}
/* 作品集模块样式 */
.portfolio-section {
padding: 2rem 10%;
}
.portfolio-item {
border: 1px solid #ddd;
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
}
/* 页脚样式 */
.footer {
background-color: #2c3e50;
color: #fff;
text-align: center;
padding: 1.5rem 0;
margin-top: 2rem;
}
/* 响应式适配 */
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
align-items: center;
gap: 1rem;
}
.resume-section, .portfolio-section {
padding: 1.5rem 5%;
}
}
添加交互功能
创建script.js文件，为页面添加简单的交互效果，比如导航栏点击平滑滚动到对应模块，作品集卡片 hover 效果等。
// 导航栏平滑滚动
document.querySelectorAll('.navbar a').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 60,
behavior: 'smooth'
});
}
});
});
// 作品集卡片hover效果
const portfolioItems = document.querySelectorAll('.portfolio-item');
portfolioItems.forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 4px 12px rgba(0,0,0,0.1)';
this.style.transform = 'translateY(-5px)';
this.style.transition = 'all 0.3s ease';
});
item.addEventListener('mouseleave', function() {
this.style.boxShadow = 'none';
this.style.transform = 'translateY(0)';
});
});
部署上线
完成本地开发后，可以将页面部署到免费的静态托管平台，比如GitHub Pages、Netlify等，让其他人可以通过网址访问你的在线简历和作品集。
以GitHub Pages为例，操作步骤为：首先在GitHub创建仓库，将本地的HTML、CSS、JS文件推送到仓库，然后在仓库设置中找到Pages选项，选择对应的分支，等待几分钟即可生成访问链接。
注意事项
- 所有内容要真实准确，不要夸大个人经历和技能水平
- 代码中的特殊字符比如<、>、&都要正确转义，避免出现页面渲染错误
- 如果引用外部资源，确保资源链接有效，避免页面出现加载错误
- 定期更新作品集内容，添加新的项目成果，保持页面内容时效性
HTML在线简历个人作品集CSSJavaScript修改时间：2026-06-09 22:03:58