first commit
This commit is contained in:
commit
7374e97f44
39
README.md
Normal file
39
README.md
Normal file
@ -0,0 +1,39 @@
|
||||
# 个人简历网页
|
||||
|
||||
这是一个使用HTML和CSS创建的简单个人简历网页模板。
|
||||
|
||||
## 文件结构
|
||||
|
||||
- `index.html` - 简历的HTML结构
|
||||
- `styles.css` - 简历的CSS样式
|
||||
|
||||
## 功能特点
|
||||
|
||||
- 响应式设计，适配各种屏幕尺寸
|
||||
- 简洁现代的界面
|
||||
- 包含个人信息、工作经历、教育背景、技能和项目经验等部分
|
||||
|
||||
## 如何使用
|
||||
|
||||
1. 下载或克隆这个仓库到本地
|
||||
2. 使用任何现代浏览器打开`index.html`文件
|
||||
3. 根据需要修改HTML内容和CSS样式
|
||||
|
||||
## 自定义
|
||||
|
||||
- 在`index.html`中修改个人信息、工作经历等内容
|
||||
- 在`styles.css`中调整颜色、字体、布局等样式
|
||||
- 可以替换占位图片为自己的照片
|
||||
|
||||
## 预览方式
|
||||
|
||||
可以通过以下方式在本地预览：
|
||||
|
||||
1. 直接双击打开`index.html`文件
|
||||
2. 使用简单的HTTP服务器，例如：
|
||||
- Python: `python -m http.server`
|
||||
- Node.js: `npx serve`
|
||||
|
||||
## 许可
|
||||
|
||||
可自由使用和修改
|
||||
117
index.html
Normal file
117
index.html
Normal file
@ -0,0 +1,117 @@
|
||||
<!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="styles.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<div class="profile-header">
|
||||
<div class="profile-img">
|
||||
<img src="https://static.seahi.me/2025/03/oPlxoD.jpg" alt="个人照片">
|
||||
</div>
|
||||
<div class="profile-info">
|
||||
<h1>张三</h1>
|
||||
<p class="title">前端开发工程师</p>
|
||||
<div class="contact-info">
|
||||
<p><i class="fas fa-envelope icon"></i> zhangsan@example.com</p>
|
||||
<p><i class="fas fa-phone-alt icon"></i> 138-8888-8888</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section">
|
||||
<h2 class="section-title"><i class="fas fa-user-circle"></i> 个人简介</h2>
|
||||
<div class="section-content">
|
||||
<p>5年前端开发经验，精通HTML、CSS、JavaScript等前端技术，熟悉Vue、React等前端框架。对用户体验和界面设计有深入理解，能够高效地将设计转化为代码实现。</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title"><i class="fas fa-graduation-cap"></i> 教育背景</h2>
|
||||
<div class="section-content">
|
||||
<div class="education">
|
||||
<div class="education-header">
|
||||
<h3>北京大学</h3>
|
||||
<p class="date">2014年9月 - 2018年6月</p>
|
||||
</div>
|
||||
<p class="degree">计算机科学与技术 学士学位</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title"><i class="fas fa-laptop-code"></i> 技能专长</h2>
|
||||
<div class="section-content skills">
|
||||
<div class="skill-category">
|
||||
<h3>前端技术</h3>
|
||||
<div class="skill-items">
|
||||
<span class="skill-item">HTML5</span>
|
||||
<span class="skill-item">CSS3</span>
|
||||
<span class="skill-item">JavaScript</span>
|
||||
<span class="skill-item">Vue.js</span>
|
||||
<span class="skill-item">React</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<h3>工具与方法</h3>
|
||||
<div class="skill-items">
|
||||
<span class="skill-item">Git</span>
|
||||
<span class="skill-item">Webpack</span>
|
||||
<span class="skill-item">响应式设计</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title"><i class="fas fa-project-diagram"></i> 项目经验</h2>
|
||||
<div class="section-content">
|
||||
<div class="project">
|
||||
<h3>企业管理系统重构</h3>
|
||||
<p class="project-desc">使用Vue.js重构旧版管理系统，提升用户体验和开发效率，系统响应速度提升50%。</p>
|
||||
</div>
|
||||
<div class="project">
|
||||
<h3>移动端电商平台</h3>
|
||||
<p class="project-desc">负责移动端电商平台的前端开发，实现了商品展示、购物车、支付等核心功能。</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<p>更新日期: 2025年3月</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.body.classList.add('loaded');
|
||||
|
||||
const skillItems = document.querySelectorAll('.skill-item');
|
||||
skillItems.forEach(item => {
|
||||
item.addEventListener('mouseover', function() {
|
||||
this.style.transform = 'translateY(-5px)';
|
||||
});
|
||||
item.addEventListener('mouseout', function() {
|
||||
this.style.transform = 'translateY(0)';
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
596
styles.css
Normal file
596
styles.css
Normal file
@ -0,0 +1,596 @@
|
||||
/* 全局样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans SC', 'Helvetica Neue', Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #f8f9fa;
|
||||
background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
||||
background-attachment: fixed;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
body.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 40px auto;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.container:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* 头部样式 */
|
||||
header {
|
||||
padding: 50px 40px;
|
||||
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
||||
color: #fff;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"%3E%3Cpath fill="%23ffffff" fill-opacity="0.05" d="M0,160L48,181.3C96,203,192,245,288,229.3C384,213,480,139,576,117.3C672,96,768,128,864,160C960,192,1056,224,1152,213.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"%3E%3C/path%3E%3C/svg%3E');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.profile-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
margin-right: 40px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.profile-img::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
z-index: -1;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-img img {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
border-radius: 50%;
|
||||
border: 5px solid rgba(255, 255, 255, 0.3);
|
||||
object-fit: cover;
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.profile-img img:hover {
|
||||
transform: scale(1.05);
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.profile-info h1 {
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 20px;
|
||||
opacity: 0.9;
|
||||
font-weight: 300;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.contact-info p {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 8px 15px;
|
||||
border-radius: 30px;
|
||||
backdrop-filter: blur(5px);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-info p:hover {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-right: 10px;
|
||||
font-style: normal;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* 主体内容样式 */
|
||||
main {
|
||||
padding: 50px 40px;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-bottom: 50px;
|
||||
animation: fadeIn 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.6rem;
|
||||
color: #2980b9;
|
||||
margin-bottom: 25px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #eee;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.section-title i {
|
||||
margin-right: 10px;
|
||||
color: #3498db;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #3498db, #2980b9);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* 工作经历样式 */
|
||||
.experience {
|
||||
margin-bottom: 35px;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.experience:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.experience-header, .education-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.experience-header h3, .education-header h3 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.date {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
background-color: #ecf0f1;
|
||||
padding: 5px 12px;
|
||||
border-radius: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.job-title {
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
color: #3498db;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
li::before {
|
||||
content: "•";
|
||||
color: #3498db;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
margin-left: -1em;
|
||||
}
|
||||
|
||||
/* 标签样式 */
|
||||
.tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: #e1f0fa;
|
||||
color: #3498db;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tag:hover {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 教育背景样式 */
|
||||
.education {
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.education:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.degree {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.education-desc {
|
||||
color: #7f8c8d;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 技能样式 */
|
||||
.skills {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
background-color: #f9f9f9;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.skill-category:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.skill-category h3 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.2rem;
|
||||
color: #2c3e50;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.skill-category h3::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
.skill-items {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
background: linear-gradient(135deg, #e8f4fc 0%, #d0e6f7 100%);
|
||||
color: #2980b9;
|
||||
padding: 8px 18px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.skill-item:hover {
|
||||
transform: translateY(-3px) !important;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
|
||||
background: linear-gradient(135deg, #d0e6f7 0%, #c2dcf2 100%);
|
||||
}
|
||||
|
||||
/* 项目经验样式 */
|
||||
.project {
|
||||
margin-bottom: 30px;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.project:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.project h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #2c3e50;
|
||||
font-size: 1.2rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
.project h3::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 2px;
|
||||
background-color: #3498db;
|
||||
}
|
||||
|
||||
.project-meta {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.project-period, .project-role {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
background-color: #ecf0f1;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project-desc {
|
||||
margin-bottom: 15px;
|
||||
color: #555;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* 证书与荣誉样式 */
|
||||
.certificate {
|
||||
margin-bottom: 25px;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
background-color: #f9f9f9;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.certificate:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.certificate h3 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* 页脚样式 */
|
||||
footer {
|
||||
padding: 25px;
|
||||
background-color: #f9f9f9;
|
||||
color: #7f8c8d;
|
||||
font-size: 0.9rem;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.social-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background-color: #ecf0f1;
|
||||
color: #3498db;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.download-resume {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
|
||||
color: white;
|
||||
padding: 10px 20px;
|
||||
border-radius: 30px;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.download-btn i {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.profile-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
margin-right: 0;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.experience-header, .education-header {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 20px;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
header, main {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 打印样式 */
|
||||
@media print {
|
||||
body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
box-shadow: none;
|
||||
margin: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #3498db !important;
|
||||
-webkit-print-color-adjust: exact;
|
||||
print-color-adjust: exact;
|
||||
}
|
||||
|
||||
.profile-img::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.experience, .education, .project, .skill-category, .certificate {
|
||||
box-shadow: none;
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.section {
|
||||
page-break-inside: avoid;
|
||||
}
|
||||
|
||||
.download-resume, .social-links {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user