简历制作css
简历制作CSS技巧
使用CSS美化简历可以让其更专业且吸引人。以下是一些关键技巧和代码示例：
基础样式设置
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}标题样式
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #2980b9;
margin-top: 20px;
}段落和列表样式
p {
margin: 10px 0;
}
ul {
list-style-type: square;
padding-left: 20px;
}联系信息样式
.contact-info {
background-color: #f8f9fa;
padding: 15px;
border-radius: 5px;
margin-bottom: 20px;
}工作经验部分
.job {
margin-bottom: 25px;
}
.job-title {
font-weight: bold;
color: #2c3e50;
}
.job-date {
color: #7f8c8d;
font-style: italic;
}响应式设计
@media (max-width: 600px) {
body {
padding: 10px;
}
h1 {
font-size: 1.5em;
}
}打印优化
@media print {
body {
font-size: 12pt;
line-height: 1.4;
}
a {
text-decoration: none;
color: #333;
}
}进阶CSS效果
悬浮效果
.job:hover {
background-color: #f0f8ff;
transition: background-color 0.3s ease;
}技能进度条
.skill-bar {
background-color: #ecf0f1;
border-radius: 3px;
height: 20px;
margin-bottom: 10px;
}
.skill-level {
background-color: #3498db;
height: 100%;
border-radius: 3px;
}时间轴布局
.timeline {
position: relative;
padding-left: 30px;
}
.timeline:before {
content: "";
position: absolute;
left: 10px;
top: 0;
bottom: 0;
width: 2px;
background: #3498db;
}配色方案建议
- 专业风格：深蓝色(#2c3e50)配浅灰色(#ecf0f1)
- 创意风格：紫色(#9b59b6)配浅黄色(#f1c40f)
- 简约风格：黑色(#333)配白色(#fff)
使用CSS变量可以方便地管理颜色：
:root {
--primary-color: #3498db;
--secondary-color: #2c3e50;
--accent-color: #e74c3c;
}这些CSS技巧可以帮助创建专业且视觉吸引力强的简历。根据个人需求和行业特点调整样式，确保简历既美观又易于阅读。
