上一篇
使用HTML创建个人简历需构建结构化页面，包含标题、联系信息、教育背景、工作经历、技能等模块，通过`
划分区域，`罗列条目，结合CSS美化布局，最后保存为.html文件用浏览器打开即可展示专业简历。
个人简历网页设计与实现
下面是一个符合百度算法和E-A-T原则的个人简历网页实现,包含专业的设计和完整的功能：
<!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="资深UI/UX设计师的个人简历，拥有8年行业经验，专注于用户体验设计和界面创新">
<meta name="keywords" content="UI设计师,UX设计师,用户体验,界面设计,个人简历">张明 - UI/UX设计师简历</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Playfair+Display:wght@400;600&display=swap" rel="stylesheet">
<style>
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--secondary: #7e22ce;
--dark: #1e293b;
--light: #f8fafc;
--gray: #64748b;
--light-gray: #e2e8f0;
--border-radius: 12px;
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
line-height: 1.6;
color: var(--dark);
background-color: #f1f5f9;
background-image: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
padding: 20px;
}
.resume-container {
max-width: 1200px;
margin: 30px auto;
display: grid;
grid-template-columns: 350px 1fr;
gap: 30px;
}
/* 侧边栏样式 */
.sidebar {
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border-radius: var(--border-radius);
padding: 40px 30px;
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
}
.sidebar::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.profile {
text-align: center;
margin-bottom: 30px;
position: relative;
z-index: 2;
}
.profile-img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid rgba(255, 255, 255, 0.3);
margin: 0 auto 20px;
background-color: #fff;
padding: 5px;
}
.profile h1 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
margin-bottom: 8px;
letter-spacing: 1px;
}
.profile h2 {
font-size: 1.2rem;
font-weight: 400;
opacity: 0.9;
}
.contact-info {
margin: 30px 0;
position: relative;
z-index: 2;
}
.contact-item {
display: flex;
align-items: center;
margin-bottom: 18px;
font-size: 0.95rem;
}
.contact-item i {
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
.skills {
margin-top: 30px;
position: relative;
z-index: 2;
}
.skills h3 {
font-size: 1.4rem;
margin-bottom: 20px;
position: relative;
display: inline-block;
}
.skills h3::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 3px;
background: white;
border-radius: 3px;
}
.skill-item {
margin-bottom: 20px;
}
.skill-info {
display: flex;
justify-content: space-between;
margin-bottom: 6px;
font-size: 0.9rem;
}
.skill-bar {
height: 8px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
overflow: hidden;
}
.skill-progress {
height: 100%;
background: white;
border-radius: 4px;
}
/* 主内容区域样式 */
.main-content {
background: white;
border-radius: var(--border-radius);
padding: 40px;
box-shadow: var(--shadow);
}
.section {
margin-bottom: 40px;
}
.section-title {
display: flex;
align-items: center;
margin-bottom: 25px;
position: relative;
}
.section-title i {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
flex-shrink: 0;
}
.section-title h2 {
font-size: 1.8rem;
font-weight: 600;
color: var(--dark);
position: relative;
}
.section-title h2::after {
content: "";
position: absolute;
bottom: -8px;
left: 0;
width: 50px;
height: 3px;
background: var(--primary);
border-radius: 3px;
}
.about p {
margin-bottom: 15px;
color: var(--gray);
font-size: 1.1rem;
line-height: 1.8;
}
.timeline {
position: relative;
padding-left: 30px;
}
.timeline::before {
content: "";
position: absolute;
left: 0;
top: 10px;
height: calc(100% - 20px);
width: 2px;
background: var(--light-gray);
}
.timeline-item {
position: relative;
margin-bottom: 30px;
padding-left: 30px;
}
.timeline-item::before {
content: "";
position: absolute;
left: -9px;
top: 8px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--primary);
border: 3px solid white;
box-shadow: 0 0 0 2px var(--primary);
}
.timeline-date {
font-size: 0.9rem;
color: var(--primary);
font-weight: 500;
margin-bottom: 5px;
}
.timeline-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark);
}
.timeline-subtitle {
font-size: 1.1rem;
color: var(--secondary);
margin-bottom: 10px;
font-weight: 500;
}
.timeline-description {
color: var(--gray);
margin-bottom: 5px;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
.project-card {
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
transition: var(--transition);
background: white;
border: 1px solid var(--light-gray);
}
.project-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.project-img {
height: 180px;
background: linear-gradient(45deg, #93c5fd, #c7d2fe);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2.5rem;
}
.project-content {
padding: 20px;
}
.project-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 10px;
color: var(--dark);
}
.project-description {
color: var(--gray);
margin-bottom: 15px;
font-size: 0.95rem;
}
.project-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.project-tag {
background: var(--light-gray);
color: var(--gray);
padding: 5px 12px;
border-radius: 20px;
font-size: 0.85rem;
}
.education-item {
display: flex;
margin-bottom: 25px;
}
.education-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary), var(--secondary));
color: white;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-right: 20px;
flex-shrink: 0;
}
.education-content h3 {
font-size: 1.3rem;
margin-bottom: 5px;
color: var(--dark);
}
.education-content p {
color: var(--gray);
margin-bottom: 3px;
}
.education-degree {
color: var(--secondary);
font-weight: 500;
}
.footer {
text-align: center;
padding: 20px;
color: var(--gray);
font-size: 0.9rem;
margin-top: 20px;
border-top: 1px solid var(--light-gray);
}
/* 响应式设计 */
@media (max-width: 900px) {
.resume-container {
grid-template-columns: 1fr;
}
.sidebar {
border-radius: var(--border-radius) var(--border-radius) 0 0;
}
}
@media (max-width: 600px) {
.main-content {
padding: 25px;
}
.projects-grid {
grid-template-columns: 1fr;
}
.section-title h2 {
font-size: 1.5rem;
}
}
.print-button {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
transition: var(--transition);
z-index: 100;
}
.print-button:hover {
background: var(--primary-dark);
transform: translateY(-3px);
}
</style>
</head>
<body>
<div class="resume-container">
<!-- 侧边栏 -->
<aside class="sidebar">
<div class="profile">
<div class="profile-img">
<i class="fas fa-user fa-3x" style="color: #2563eb;"></i>
</div>
<h1>张明</h1>
<h2>资深UI/UX设计师</h2>
</div>
<div class="contact-info">
<div class="contact-item">
<i class="fas fa-phone"></i>
<span>138-8888-9999</span>
</div>
<div class="contact-item">
<i class="fas fa-envelope"></i>
<span>zhangming@example.com</span>
</div>
<div class="contact-item">
<i class="fas fa-map-marker-alt"></i>
<span>北京市朝阳区</span>
</div>
<div class="contact-item">
<i class="fab fa-linkedin"></i>
<span>linkedin.com/in/zhangming</span>
</div>
<div class="contact-item">
<i class="fab fa-github"></i>
<span>github.com/zhangming-design</span>
</div>
</div>
<div class="skills">
<h3>专业技能</h3>
<div class="skill-item">
<div class="skill-info">
<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-item">
<div class="skill-info">
<span>Figma/Sketch</span>
<span>90%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span>交互设计</span>
<span>88%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 88%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span>前端开发</span>
<span>75%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 75%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span>用户研究</span>
<span>85%</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
</div>
<div class="skills">
<h3>语言能力</h3>
<div class="skill-item">
<div class="skill-info">
<span>中文</span>
<span>母语</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 100%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-info">
<span>英语</span>
<span>流利</span>
</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
</div>
</aside>
<!-- 主内容区域 -->
<main class="main-content">
<section class="section about">
<div class="section-title">
<i class="fas fa-user"></i>
<h2>关于我</h2>
</div>
<p>拥有8年经验的资深UI/UX设计师，专注于创造直观、美观且用户友好的数字产品体验，擅长将用户需求转化为创新设计解决方案，精通设计思维和敏捷开发流程。</p>
<p>曾为金融科技、电子商务和教育科技等多个行业设计产品，服务客户包括初创企业和财富500强公司，注重数据驱动设计，通过用户研究和A/B测试持续优化产品体验。</p>
<p>热衷于设计系统构建和设计工具开发，致力于提升团队协作效率和设计一致性，目前专注于无障碍设计和包容性设计实践。</p>
</section>
<section class="section experience">
<div class="section-title">
<i class="fas fa-briefcase"></i>
<h2>工作经历</h2>
</div>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-date">2020 - 至今</div>
<h3 class="timeline-title">高级产品设计师</h3>
<div class="timeline-subtitle">创新科技有限公司</div>
<p class="timeline-description">领导B端SaaS产品的设计工作，重新设计核心工作流程，提升用户任务完成率35%，建立设计系统，统一公司5个产品线的设计语言。</p>
<p class="timeline-description">主持
