Tạo sơ yếu lý lịch chuyên nghiệp bằng HTML và CSS cho phép bạn xây dựng một tài liệu hấp dẫn, có thể tùy chỉnh và có thể dễ dàng chia sẻ kỹ thuật số. Một sơ yếu lý lịch có cấu trúc tốt sẽ thể hiện kỹ năng và kinh nghiệm của bạn một cách hiệu quả trong khi vẫn duy trì được vẻ ngoài chuyên nghiệp trên nhiều thiết bị khác nhau.
Cú pháp
/* Basic Resume Layout Structure */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
max-width: 1000px;
margin: 0 auto;
}
.left-section {
background-color: #333;
color: white;
padding: 20px;
}
.right-section {
background-color: white;
padding: 20px;
}
Tiếp tục các thành phần
Một sơ yếu lý lịch chuyên nghiệp thường bao gồm những phần thiết yếu này
Ví dụ:Hoàn thiện bố cục sơ yếu lý lịch
Ví dụ sau đây tạo bố cục sơ yếu lý lịch hai cột hiện đại
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Professional Resume</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
background-color: #f5f5f5;
display: flex;
justify-content: center;
padding: 20px;
}
.resume-container {
width: 100%;
max-width: 900px;
background: white;
display: grid;
grid-template-columns: 300px 1fr;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
overflow: hidden;
}
.left-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 30px 20px;
}
.profile-img {
width: 120px;
height: 120px;
border-radius: 50%;
background-color: #fff;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
color: #667eea;
font-weight: bold;
}
.left-section h2 {
text-align: center;
margin-bottom: 10px;
font-size: 1.5em;
}
.left-section .title {
text-align: center;
font-size: 0.9em;
opacity: 0.9;
margin-bottom: 30px;
}
.section-title {
color: #fff;
font-size: 1.1em;
margin: 25px 0 15px 0;
padding-bottom: 5px;
border-bottom: 2px solid rgba(255,255,255,0.3);
}
.contact-info {
list-style: none;
}
.contact-info li {
margin: 10px 0;
font-size: 0.9em;
}
.skills-list {
list-style: none;
}
.skill-item {
margin: 15px 0;
}
.skill-name {
font-size: 0.9em;
margin-bottom: 5px;
}
.skill-bar {
background: rgba(255,255,255,0.3);
height: 6px;
border-radius: 3px;
overflow: hidden;
}
.skill-progress {
height: 100%;
background: #fff;
border-radius: 3px;
}
.right-section {
padding: 30px;
}
.right-section h1 {
color: #333;
font-size: 2em;
margin-bottom: 10px;
}
.right-section .job-title {
color: #667eea;
font-size: 1.2em;
margin-bottom: 30px;
}
.right-section .section-title {
color: #333;
font-size: 1.3em;
margin: 30px 0 15px 0;
padding-bottom: 5px;
border-bottom: 2px solid #667eea;
}
.experience-item {
margin: 20px 0;
}
.experience-item h4 {
color: #333;
font-size: 1.1em;
}
.experience-item .company {
color: #667eea;
font-weight: bold;
}
.experience-item .date {
color: #666;
font-size: 0.9em;
font-style: italic;
}
.experience-item ul {
margin-top: 10px;
padding-left: 20px;
}
.experience-item li {
color: #555;
margin: 5px 0;
}
</style>
</head>
<body>
<div class="resume-container">
<div class="left-section">
<div class="profile-img">JS</div>
<h2>John Smith</h2>
<p class="title">Full Stack Developer</p>
<h3 class="section-title">Contact</h3>
<ul class="contact-info">
<li>? john.smith@email.com</li>
<li>? +1 (555) 123-4567</li>
<li>? linkedin.com/in/johnsmith</li>
<li>? New York, NY</li>
</ul>
<h3 class="section-title">Skills</h3>
<div class="skills-list">
<div class="skill-item">
<div class="skill-name">JavaScript</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 90%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">React</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 85%"></div>
</div>
</div>
<div class="skill-item">
<div class="skill-name">Node.js</div>
<div class="skill-bar">
<div class="skill-progress" style="width: 80%"></div>
</div>
</div>
</div>
</div>
<div class="right-section">
<h1>John Smith</h1>
<p class="job-title">Full Stack Developer</p>
<h3 class="section-title">Summary</h3>
<p>Experienced Full Stack Developer with 5+ years of expertise in building scalable web applications using modern JavaScript frameworks and cloud technologies.</p>
<h3 class="section-title">Experience</h3>
<div class="experience-item">
<h4>Senior Developer at <span class="company">Tech Solutions Inc.</span></h4>
<p class="date">2021 - Present</p>
<ul>
<li>Led development of customer portal serving 10,000+ users</li>
<li>Improved application performance by 40% through optimization</li>
<li>Mentored junior developers and conducted code reviews</li>
</ul>
</div>
<div class="experience-item">
<h4>Junior Developer at <span class="company">StartUp Co.</span></h4>
<p class="date">2019 - 2021</p>
<ul>
<li>Developed responsive web applications using React and Node.js</li>
<li>Collaborated with design team to implement user interfaces</li>
</ul>
</div>
<h3 class="section-title">Education</h3>
<div class="experience-item">
<h4>Bachelor of Computer Science</h4>
<p class="company">University of Technology</p>
<p class="date">2015 - 2019</p>
</div>
</div>
</div>
</body>
</html>
A professional two-column resume layout appears with a purple gradient left sidebar containing contact info and skills with progress bars, and a white right section with experience and education details. The design is clean and modern with proper typography and spacing.
Các nguyên tắc thiết kế chính
- Bố cục lưới:Sử dụng CSS Grid cho cấu trúc hai cột đáp ứng
- Phân cấp kiểu chữ:Kích thước và độ đậm phông chữ khác nhau cho tiêu đề
- Cách phối màu:Màu sắc chuyên nghiệp với độ tương phản tốt
- Các yếu tố trực quan:Thanh tiến trình cho các kỹ năng, khoảng cách nhất quán
- Thiết kế đáp ứng:Thích ứng với các kích thước màn hình khác nhau
Kết luận
Tạo sơ yếu lý lịch bằng HTML và CSS cho phép bạn kiểm soát hoàn toàn thiết kế và bố cục đồng thời đảm bảo trình bày chuyên nghiệp. Sự kết hợp giữa cấu trúc HTML ngữ nghĩa và kiểu CSS hiện đại tạo ra một sơ yếu lý lịch hấp dẫn, dễ tiếp cận, nổi bật ở định dạng kỹ thuật số.
