本文是为了初学者，能够快速制作个人简历，效果可能不是很好，希望大家多多包涵。 每个赞都是我前进的动力。 大家好我是程序员_蓝天
话不多，说接下来我直接放源码。
下面是html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/jj.css">
<title>个人简介</title>
</head>
<body>
<div class="container">
<div class="leftSide">
<div class="profile">
<img src="img/boy.png" alt="personal pic">
</div>
<div class="contactInfo">
<h2 class="title">信息简介：</h2>
<ul>
<li>
<span class="text">姓名：xxx</span>
</li>
<li>
<span class="text">性别：男</span>
</li>
<li>
<span class="text">年龄：21</span>
</li>
<li>
<span class="material-icons">
call
</span>
<span class="text">xxxxxxxxxxx</span>
</li>
<li>
<span class="material-icons">
email
</span>
<span class="text">xxxxxxx@qq.com</span>
</li>
<li>
<span class="material-icons">
language
</span>
<a href="https://github.com/caiyizong/symmetrical-pancake.git" target="_blank">
<span class="text">GitHub</span>
</a>
</li>
<li>
<span class="material-icons">
location_on
</span>
<span class="text">中国福建</span>
</li>
</ul>
</div>
<div class="contactInfo education">
<h2 class="title">个人简介</h2>
<ul>
<li>
<h5>程序开发经验</h5>
<h4>n年</h4>
</li>
<li>
<h5>生日</h5>
<h4>2003年</h4>
</li>
<li>
<h5>身高</h5>
<h4>176cm</h4>
</li>
</ul>
</div>
<div class="contactInfo language">
<h2 class="title">熟练度</h2>
<ul>
<li>
<span class="text">java</span>
</li>
<li>
<span class="percent">
<div style="width: calc(590/710*100%);"></div>
</span>
</li>
<li>
<span class="text">python</span>
</li>
<li>
<span class="percent">
<div style="width: calc(89/90*100%);"></div>
</span>
</li>
<li>
<span class="text">MySQL</span>
</li>
<li>
<span class="percent">
<div style="width: calc(500/710*100%);"></div>
</span>
</li>
<li>
<span class="text">html/css/js</span>
</li>
<li>
<span class="percent">
<div style="width: calc(80/90*100%);"></div>
</span>
</li>
</ul>
</div>
</div>
<div class="rightSide">
<div class="about">
<h2 class="title2">个人介绍</h2>
<p>
掌握了python、java、mysql、JavaScript、linux、HTML5、CSS等,了解各种算法和数据结构，能够选择和实施适当的算法来解决问题，并优化代码的性能。
能够快速识别和解决代码中的错误和问题,使用调试工具和技术进行故障排除。
</p>
</div>
<hr>
<div class="about">
<h2 class="title2">个人经历</h2>
<div class="box">
<div class="year-company">
<h5>高中时期</h5>
</div>
<div class="text">
<h4>xxxx</h4>
<p>xxxxx</p>
</div>
</div>
<div class="box">
<div class="year-company">
<h5>暑假期间</h5>
</div>
<div class="text">
<h4>工作</h4>
<p>xxxx</p>
</div>
</div>
<div class="box">
<div class="year-company">
<h5>大学时期</h5>
</div>
<div class="text">
<h4>高光时刻</h4>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
</div>
</div>
<hr>
<div class="about skills">
<h2 class="title2">教育背景</h2>
<p><b>专业：</b>xxxx</p>
<p>
<b>主修课程：</b>xxxxxxxxxxxxxxxxxxxxx
</p>
<p>
<b>成绩排名：</b>xxxxxxxxxxxxxxxx
</p>
</div>
<hr>
<div class="about skills">
<h2 class="title2">项目经验</h2>
<p><b>自接外包：</b>x次</p>
<ul>
<li>wb网页页面开发</li>
<li>数据爬取清洗分析</li>
<li>小程序开发</li>
</ul>
<p>xxxxxxxxxxxxxxxxxxxx</p>
<div>
<br>
<br>
<hr>
<div class="about skills">
<h2 class="title2">成就</h2>
<p>xxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxx</p>
</div>
<hr>
<div class="about">
<h2 class="title2">自我评价</h2>
<p>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
</p>
</div>
</div>
</body>
</html>
下面是css源码：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background-color: #096;
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
box-shadow: 0 35px 55px rgba(0, 0, 0, 0.1);
}
.container{
position: relative;
width: 100%;
max-width: 1000px;
min-height: 1000px;
background-color: #fff;
margin: 50px;
display: grid;
grid-template-columns: 1fr 2fr;
}
.container .leftSide{
position: relative;
background-color: rgb(135, 191,239);
padding: 40px;
}
.profile{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.profile img{
width: 150px;
height: 200px;
/* border-radius: 50%; */
}
.contactInfo{
padding-top: 40px;
}
.contactInfo .title{
color: #fff;
margin-bottom: 20px;
}
.contactInfo ul{
position: relative;
}
.contactInfo ul li {
position: relative;
list-style: none;
margin: 10px 0;
}
.contactInfo ul li .material-icons{
display: inline-block;
width: 30px;
font-size: 18px;
color: rgb(240, 247, 178);
}
.contactInfo ul li .text{
color: #fff;
}
.contactInfo ul li a{
text-decoration: none;
cursor: pointer;
}
.contactInfo.education li{
margin-bottom: 15px;
}
.contactInfo.education h5{
color: rgb(192,215,255);
}
.contactInfo.education h4{
color: rgb(244,247,193);
}
.contactInfo.language .percent{
position: relative;
width: 100%;
height: 6px;
background-color: rgba(176, 218, 248, 0.9);
display: block;
margin-top: 5px;
}
.contactInfo.contactInfo.language .percent div{
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: rgba(237,245,177,0.653);
}
.container .rightSide{
position: relative;
background-color: white;
padding: 40px;
}
.about{
margin-bottom: 50px;
}
.title2{
color: rgba(173, 224, 238, 0.611);
margin-bottom: 10px;
}
p{
color: #333;
}
.about .box{
display: flex;
margin: 20px 0;
}
.about .box .year-company{
min-width: 150px;
}
.about .box .year-company h5{
color: darkgrey;
}
.about .box .text h4{
color: rgba(113,196,299,0.738);
font-size: 16px;
}
.skills .box {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 150px 1fr;
justify-content: center;
align-items: center;
}
.skills .box h4{
color: darkgrey;
}
.skills .box .percent{
position: relative;
width: 100%;
height: 10px;
background-color:rgb(255,250,192);
}
.skills .box .percent div{
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: rgba(176,218,246,0.726);
}
.parent-container {
text-align: center;
}
页面显示：
htmlpreview.github.io/?https://gi…
想要下载的可以点击下面链接：
然后点击code，然后点击Download ZIP
如图所示：
赶紧动手做一份属于自己的个人简历
