- 响应式设计：完美适配桌面、平板和手机等各种设备。
- 现代美观：使用了流行的设计风格，包括渐变背景、卡片布局、平滑滚动和微交互。
- 结构清晰：代码结构遵循 HTML5 语义化标签，易于维护和扩展。
- 功能完整：集成了个人简介、技能展示、项目作品集、联系方式等常见模块。
- 易于定制：只需修改 CSS 和 HTML 中的文本内容即可快速上手。
模块结构说明
模板将整个页面划分为以下几个主要部分：
<header>: 包含导航菜单，方便用户快速跳转到页面不同部分。<section id="hero">: 首屏英雄区，展示你的姓名、职业和一句引人注目的标语。<section id="about">: 关于我，详细介绍你的背景、故事和热情所在。<section id="skills">: 技能专长，使用进度条或标签云等方式可视化你的能力。<section id="portfolio">: 项目作品集，展示你最得意的项目，点击可查看详情。<section id="contact">: 联系方式，提供多种渠道让访客与你取得联系。<footer>: 页脚，通常包含版权信息和社交媒体链接。
完整代码
您可以直接将以下所有代码复制到一个 .html 文件中，然后用浏览器打开即可看到效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">张三 - 前端开发工程师</title>
<!-- 引入 Font Awesome 图标库 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* --- 全局样式和变量 --- */
:root {
--primary-color: #6a11cb;
--secondary-color: #2575fc;
--text-color: #333;
--bg-color: #f4f4f9;
--card-bg: #ffffff;
--font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth; /* 平滑滚动 */
}
body {
font-family: var(--font-family);
line-height: 1.6;
color: var(--text-color);
background-color: var(--bg-color);
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 2rem;
}
h1, h2, h3 {
font-weight: 300;
line-height: 1.2;
margin-bottom: 1rem;
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; text-align: center; margin-bottom: 2rem; }
h3 { font-size: 1.3rem; }
section {
padding: 4rem 0;
}
.btn {
display: inline-block;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
color: #fff;
padding: 0.8rem 1.5rem;
border-radius: 50px;
text-decoration: none;
border: none;
cursor: pointer;
font-size: 1rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* --- 导航栏 --- */
header {
background: #fff;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--primary-color);
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: var(--primary-color);
}
/* --- 首屏英雄区 --- */
#hero {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #fff;
height: 100vh;
display: flex;
align-items: center;
text-align: center;
}
#hero .hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
#hero .hero-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
/* --- 关于我 --- */
#about {
background: #fff;
}
.about-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
align-items: center;
}
.about-img {
text-align: center;
}
.about-img img {
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--primary-color);
}
/* --- 技能 --- */
#skills {
background: var(--bg-color);
}
.skills-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.skill-card {
background: var(--card-bg);
padding: 1.5rem;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
text-align: center;
transition: transform 0.3s ease;
}
.skill-card:hover {
transform: translateY(-10px);
}
.skill-card i {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 1rem;
}
/* --- 作品集 --- */
#portfolio {
background: #fff;
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.portfolio-item {
position: relative;
overflow: hidden;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
cursor: pointer;
}
.portfolio-item img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.portfolio-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
opacity: 0;
transition: opacity 0.5s ease;
}
.portfolio-item:hover .portfolio-overlay {
opacity: 1;
}
.portfolio-item:hover img {
transform: scale(1.1);
}
.portfolio-overlay h3 {
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
/* --- 联系方式 --- */
#contact {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: #fff;
text-align: center;
}
.contact-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2rem;
}
.contact-links a {
color: #fff;
font-size: 2rem;
transition: transform 0.3s ease;
}
.contact-links a:hover {
transform: scale(1.2);
}
/* --- 页脚 --- */
footer {
background: #333;
color: #fff;
text-align: center;
padding: 1.5rem 0;
}
/* --- 响应式设计 --- */
@media (max-width: 768px) {
.nav-links {
display: none; /* 在移动端隐藏导航链接，或用汉堡菜单代替 */
}
.hero-content h1 {
font-size: 2.5rem;
}
.about-content {
grid-template-columns: 1fr;
text-align: center;
}
.contact-links {
flex-wrap: wrap;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<header>
<div class="container">
<nav>
<div class="logo">张三</div>
<ul class="nav-links">
<li><a href="#hero">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#portfolio">作品集</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
</div>
</header>
<main>
<!-- 首屏英雄区 -->
<section id="hero">
<div class="container">
<div class="hero-content">
<h1>你好，我是张三</h1>
<p>一名充满激情的前端开发工程师</p>
<a href="#portfolio" class="btn">查看我的作品</a>
</div>
</div>
</section>
<!-- 关于我 -->
<section id="about">
<div class="container">
<h2>关于我</h2>
<div class="about-content">
<div class="about-img">
<img src="https://via.placeholder.com/250" alt="张三的头像">
</div>
<div class="about-text">
<p>我是一名拥有5年前端开发经验的工程师，专注于创建优雅、高效且用户友好的Web应用，我对新技术充满热情，喜欢探索和解决复杂的技术问题。</p>
<p>在我的职业生涯中，我曾与多个团队合作，成功交付了多个大型项目，我相信，好的代码不仅要功能完善，更要易于维护和扩展。</p>
<p>工作之余，我喜欢阅读技术博客、参与开源项目，并享受户外运动带来的乐趣。</p>
</div>
</div>
</div>
</section>
<!-- 技能 -->
<section id="skills">
<div class="container">
<h2>我的技能</h2>
<div class="skills-grid">
<div class="skill-card">
<i class="fab fa-html5"></i>
<h3>HTML5 / CSS3</h3>
<p>精通语义化标签和现代CSS布局，包括Flexbox和Grid。</p>
</div>
<div class="skill-card">
<i class="fab fa-js-square"></i>
<h3>JavaScript (ES6+)</h3>
<p>熟练掌握原生JS，熟悉异步编程、DOM操作和算法。</p>
</div>
<div class="skill-card">
<i class="fab fa-react"></i>
<h3>React / Vue</h3>
<p>精通React生态系统，包括Hooks、Redux和状态管理。</p>
</div>
<div class="skill-card">
<i class="fab fa-node-js"></i>
<h3>Node.js</h3>
<p>能够使用Node.js和Express构建后端API和中间件。</p>
</div>
</div>
</div>
</section>
<!-- 作品集 -->
<section id="portfolio">
<div class="container">
<h2>我的作品</h2>
<div class="portfolio-grid">
<div class="portfolio-item">
<img src="https://via.placeholder.com/600x400" alt="项目1">
<div class="portfolio-overlay">
<h3>电商平台前端</h3>
<p>使用React和Redux构建的现代化电商网站。</p>
</div>
</div>
<div class="portfolio-item">
<img src="https://via.placeholder.com/600x400" alt="项目2">
<div class="portfolio-overlay">
<h3>数据可视化仪表盘</h3>
<p>基于D3.js和ECharts的交互式数据展示平台。</p>
</div>
</div>
<div class="portfolio-item">
<img src="https://via.placeholder.com/600x400" alt="项目3">
<div class="portfolio-overlay">
<h3>移动端社交App</h3>
<p>使用React Native开发的跨平台社交应用。</p>
</div>
</div>
</div>
</div>
</section>
<!-- 联系方式 -->
<section id="contact">
<div class="container">
<h2>联系我</h2>
<p>有项目想合作？或者只是想打个招呼？随时欢迎！</p>
<div class="contact-links">
<a href="mailto:your.email@example.com"><i class="fas fa-envelope"></i></a>
<a href="https://github.com/yourusername" target="_blank"><i class="fab fa-github"></i></a>
<a href="https://linkedin.com/in/yourusername" target="_blank"><i class="fab fa-linkedin"></i></a>
<a href="https://twitter.com/yourusername" target="_blank"><i class="fab fa-twitter"></i></a>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer>
<div class="container">
<p>© 2025 张三. 保留所有权利.</p>
</div>
</footer>
</body>
</html>
如何使用和定制
- 保存文件：将以上代码保存为
index.html文件。 - ：
- 个人信息：将所有
张三替换成你的名字。 - 职业：将
前端开发工程师替换成你的职业。 - 关于我：修改
#about部分的文本，讲述你的故事。 - 技能：在
#skills部分，你可以修改技能名称、描述和图标（<i>标签内的类名）。 - 作品集：
- 将
#portfolio中的src="https://via.placeholder.com/..."替换成你自己的项目截图链接。 - 修改
alt属性，使其描述图片内容（对SEO和可访问性很重要）。 - 在
.portfolio-overlay中修改项目标题和描述。
- 将
- 联系方式：将
#contact中的邮箱地址、GitHub、LinkedIn 等链接替换成你自己的。
- 个人信息：将所有
- 更换头像：将
#about部分的<img src="...">链接替换为你自己的头像图片。 - 调整颜色和样式：
- 你可以在
<style>标签的开头找到root部分，通过修改 CSS 变量（如--primary-color）来快速改变主题色。 - 如果你想更大幅度的改动,可以直接修改 CSS 样式。
- 你可以在
进一步的优化建议
- 添加简历下载：在
#hero或#about区域添加一个指向你简历PDF文件的下载链接。 - 实现汉堡菜单：在移动端，将导航栏改为一个可点击的汉堡图标，点击后展开导航菜单。
- 添加动画库：可以引入 AOS (Animate On Scroll) 库，让页面在滚动时元素有更丰富的进入动画。
- 集成表单：在
#contact区域添加一个联系表单，让访客可以直接给你发消息（这需要后端支持）。 - SEO优化：添加
<meta name="description" content="...">等标签，以便搜索引擎更好地理解你的页面。
这个模板为你提供了一个坚实的基础,你可以根据自己的需求进行修改和扩展，打造出独一无二的个人展示页面。
