html5个人简历源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 20px;
}
.left {
flex-basis: 30%;
margin-right: 20px;
}
.right {
flex-basis: 65%;
}
h2 {
margin-top: 0;
}
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
.contact {
margin-bottom: 20px;
}
.contact li {
display: inline-block;
margin-right: 20px;
}
.skills {
margin-top: 20px;
}
.skills li {
display: inline-block;
margin-right: 10px;
background-color: #333;
color: #fff;
padding: 5px 10px;
border-radius: 5px;
}
.experience {
margin-top: 20px;
}
.experience h3 {
margin-top: 0;
}
.education {
margin-top: 20px;
}
.education h3 {
margin-top: 0;
}
</style>
</head>
<body>
<header>
<h1>个人简历</h1>
</header>
<main>
<div class="left">
<img src="https://via.placeholder.com/150" alt="头像">
<h2>个人信息</h2>
<ul>
<li>姓名:张三</li>
<li>性别:男</li>
<li>出生日期:1990年1月1日</li>
<li>电话:12345678901</li>
<li>邮箱:zhangsan@example.com</li>
</ul>
<h2>技能</h2>
<ul class="skills">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</div>
<div class="right">
<h2>个人简介</h2>
<p>我是一名前端工程师,有多年的工作经验。熟悉HTML、CSS、JavaScript等前端技术,能够独立完成前端开发工作。曾参与多个项目的开发,包括响应式网站、移动端应用等。</p>
<h2>工作经历</h2>
<ul class="experience">
<li>
<h3>ABC公司</h3>
<p>2018年至今</p>
<p>担任前端工程师,负责公司网站的开发和维护。</p>
</li>
<li>
<h3>DEF公司</h3>
<p>2016年-2018年</p>
<p>担任前端工程师,参与公司多个项目的开发。</p>
</li>
</ul>
<h2>教育经历</h2>
<ul class="education">
<li>
<h3>大学</h3>
<p>2010年-2014年</_