上一篇
怎么用HTML制作简单的个人简历？
使用HTML制作个人简历需掌握基础标签（如`
、
、`）构建结构，通过CSS美化样式，关键步骤包括：设计响应式布局，分区块展示个人信息、教育经历、技能与项目经验，添加联系方式和作品集链接，最后部署至GitPages或服务器在线访问。
专业个人简历网页设计与实现
下面是一个符合E-A-T原则、SEO优化且美观的个人简历HTML实现：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="资深网页设计师张明的专业简历，展示设计技能、项目经验和专业背景">
<meta name="keywords" content="网页设计师简历, UI/UX设计师, 前端开发, 个人简历, 作品集">
<meta name="author" content="张明">张明 - 资深网页设计师</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #2c3e50;
--secondary: #3498db;
--accent: #e74c3c;
--light: #ecf0f1;
--dark: #34495e;
--text: #2c3e50;
--background: #f9f9f9;
--card-bg: #ffffff;
--shadow: rgba(0, 0, 0, 0.1);
}
body {
background-color: var(--background);
color: var(--text);
line-height: 1.6;
padding: 0;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
padding: 60px 20px 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.header-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.profile-img {
width: 180px;
height: 180px;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.3);
margin: 0 auto 20px;
background-color: #fff;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.profile-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
h1 {
font-size: 3.5rem;
margin-bottom: 10px;
font-weight: 700;
}
.tagline {
font-size: 1.5rem;
font-weight: 300;
margin-bottom: 25px;
opacity: 0.9;
}
.contact-info {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 25px;
margin-top: 30px;
}
.contact-item {
display: flex;
align-items: center;
gap: 10px;
font-size: 1.1rem;
}
.contact-item i {
color: var(--accent);
font-size: 1.3rem;
}
.social-links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.social-icon {
width: 45px;
height: 45px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: white;
font-size: 1.2rem;
text-decoration: none;
}
.social-icon:hover {
background: var(--accent);
transform: translateY(-3px);
}
.section {
background: var(--card-bg);
border-radius: 12px;
box-shadow: 0 5px 15px var(--shadow);
padding: 40px;
margin: -40px 0 40px;
position: relative;
}
.section-title {
font-size: 2rem;
color: var(--secondary);
margin-bottom: 30px;
padding-bottom: 15px;
border-bottom: 3px solid var(--secondary);
display: inline-block;
}
.about-content {
font-size: 1.1rem;
line-height: 1.8;
}
.skills-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
margin-top: 20px;
}
.skill-category {
margin-bottom: 25px;
}
.skill-category h3 {
font-size: 1.4rem;
color: var(--dark);
margin-bottom: 15px;
}
.skill-bar {
background: var(--light);
border-radius: 10px;
height: 12px;
margin-bottom: 20px;
overflow: hidden;
}
.skill-progress {
height: 100%;
background: var(--secondary);
border-radius: 10px;
position: relative;
}
.skill-name {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
font-weight: 500;
}
.timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.timeline::after {
content: '';
position: absolute;
width: 4px;
background: var(--secondary);
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
}
.timeline-item {
padding: 20px 40px;
position: relative;
width: 50%;
box-sizing: border-box;
}
.timeline-item:nth-child(odd) {
left: 0;
}
.timeline-item:nth-child(even) {
left: 50%;
}
.timeline-content {
background: var(--card-bg);
padding: 25px;
border-radius: 10px;
box-shadow: 0 3px 10px var(--shadow);
position: relative;
}
.timeline-content::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
right: -10px;
top: 30px;
background: var(--card-bg);
transform: rotate(45deg);
box-shadow: 3px -3px 6px var(--shadow);
}
.timeline-item:nth-child(even) .timeline-content::after {
left: -10px;
right: auto;
box-shadow: -3px 3px 6px var(--shadow);
}
.timeline-date {
font-weight: 700;
color: var(--secondary);
margin-bottom: 10px;
display: block;
}
.timeline-title {
font-size: 1.4rem;
margin-bottom: 10px;
color: var(--dark);
}
.timeline-company {
font-style: italic;
color: var(--accent);
margin-bottom: 15px;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-top: 20px;
}
.project-card {
background: var(--card-bg);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px var(--shadow);
transition: transform 0.3s ease;
}
.project-card:hover {
transform: translateY(-10px);
}
.project-img {
height: 200px;
overflow: hidden;
}
.project-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.project-card:hover .project-img img {
transform: scale(1.05);
}
.project-content {
padding: 25px;
}
.project-title {
font-size: 1.4rem;
margin-bottom: 10px;
color: var(--dark);
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 15px 0;
}
.tag {
background: var(--light);
color: var(--secondary);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
.education-item {
background: var(--card-bg);
padding: 25px;
border-radius: 10px;
box-shadow: 0 3px 10px var(--shadow);
margin-bottom: 25px;
}
.education-title {
font-size: 1.4rem;
margin-bottom: 5px;
color: var(--dark);
}
.education-school {
color: var(--secondary);
font-weight: 600;
margin-bottom: 10px;
}
.education-duration {
color: var(--accent);
font-weight: 500;
margin-bottom: 15px;
}
footer {
background: var(--primary);
color: white;
text-align: center;
padding: 40px 20px;
margin-top: 40px;
}
.copyright {
margin-top: 20px;
opacity: 0.8;
font-size: 0.9rem;
}
@media (max-width: 768px) {
.timeline::after {
left: 31px;
}
.timeline-item {
width: 100%;
padding-left: 70px;
padding-right: 25px;
left: 0 !important;
}
.timeline-item:nth-child(even) .timeline-content::after {
left: -10px;
right: auto;
}
.timeline-content::after {
left: -10px !important;
right: auto;
}
.projects-grid {
grid-template-columns: 1fr;
}
.contact-info {
flex-direction: column;
align-items: center;
gap: 15px;
}
h1 {
font-size: 2.5rem;
}
.tagline {
font-size: 1.2rem;
}
}
.section-divider {
height: 1px;
background: linear-gradient(to right, transparent, var(--secondary), transparent);
margin: 50px 0;
border: none;
}
</style>
</head>
<body>
<!-- 头部区域 -->
<header>
<div class="header-content">
<div class="profile-img">
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Crect width='200' height='200' fill='%233498db'/%3E%3Ccircle cx='100' cy='85' r='35' fill='%23ecf0f1'/%3E%3Cpath d='M100,120 C70,120 50,150 50,180 L150,180 C150,150 130,120 100,120 Z' fill='%23ecf0f1'/%3E%3C/svg%3E" alt="张明个人照片">
</div>
<h1>张明</h1>
<div class="tagline">资深网页设计师 & 前端开发工程师</div>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>zhangming@example.com</span>
</div>
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>138-8888-8888</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>北京市朝阳区</span>
</div>
</div>
<div class="social-links">
<a href="#" class="social-icon"><i class="fab fa-github"></i></a>
<a href="#" class="social-icon"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-icon"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</header>
<div class="container">
<!-- 关于我 -->
<section class="section">
<h2 class="section-title">关于我</h2>
<div class="about-content">
<p>我是一名拥有8年经验的资深网页设计师和前端开发工程师，专注于创建直观、响应迅速且用户友好的数字体验，我擅长将复杂的设计概念转化为高效、可访问的代码，同时确保跨浏览器兼容性和最佳性能。</p>
<p>我的设计理念以用户为中心，注重可用性和美学之间的平衡，我精通现代前端技术栈，包括HTML5、CSS3、JavaScript、React和Vue.js，并持续关注行业最新趋势和最佳实践。</p>
<p>在过去的职业生涯中，我成功为金融、教育和电子商务等多个行业的客户提供了创新的数字解决方案，帮助他们在竞争激烈的市场中脱颖而出。</p>
</div>
</section>
<!-- 专业技能 -->
<section class="section">
<h2 class="section-title">专业技能</h2>
<div class="skills-container">
<div class="skill-category">
<h3>设计技能</h3>
<div class="skill">
<div class="skill-name">
<span>UI/UX 设计</span>
<span>95%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 95%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">
<span>响应式设计</span>
<span>90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">
<span>原型设计 (Figma)</span>
<span>85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
</div>
<div class="skill-category">
<h3>前端开发</h3>
<div class="skill">
<div class="skill-name">
<span>HTML5/CSS3</span>
<span>98%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 98%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">
<span>JavaScript</span>
<span>92%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 92%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">
<span>React.js</span>
<span>88%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 88%"></div>
</div>
</div>
</div>
<div class="skill-category">
<h3>其他技能</h3>
<div class="skill">
<div class="skill-name">
<span>SEO优化</span>
<span>85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">
<span>性能优化</span>
<span>80%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 80%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">
<span>Git版本控制</span>
<span>90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 工作经历 -->
<section class="section">
<h2 class="section-title">工作经历</h2>
<div class="timeline">
<div class="timeline-item">
