<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简历模型</title>
<link rel="stylesheet" href="style_3.css">
</head>
<body>
<div class="resume">
<div class="header">
<h1>简历</h1>
</div>
<div class="content">
<div class="basic">
<div class="tit"><h2>基本信息</h2></div>
<div class="basicInf">
<h5>姓名 张三</h5>
<h5>性别 男</h5>
<h5>应聘职位 Web前端工程师</h5>
</div>
</div>
<div class="contact">
<div class="tit"><h2>联系方式</h2></div>
<div class="contactInf">
<h5>手机 12312341234</h5>
<h5>Email
<a href="#">joinefe@baidu.com</a>
</h5>
<h5>个人主页
<a href="https://github.com/Freshman-996">Github</a>
</h5>
</div>
</div>
<div class="ability">
<div class="tit"><h2>能力描述</h2></div>
<div class="abilityInf">
<div class="mid">
<h5 class="subtit">技术能力</h5>
<h5>熟练掌握HTML,CSS,JavaScript</h5>
</div>
<div class="mid">
<h5 class="subtit">综合能力</h5>
<h5>良好的沟通,主动积极,努力勤奋</h5>
</div>
</div>
</div>
<div class="education">
<div class="tit"><h2>教育经历</h2></div>
<div class="educationInf">
<div class="mid">
<h5 class="subtit">本科</h5>
<h5>百度前端技术学院小薇学院</h5>
</div>
<div class="mid">
<h5 class="subtit">研究生</h5>
<h5>百度前端技术学院大斌学院</h5>
</div>
</div>
</div>
<div class="experience">
<div class="tit"><h2>项目经历</h2></div>
<div class="experienceInf">
<div class="mid">
<h5 class="subtit">小度小度</h5>
<h5>作为前端工程师角色参与了ABC组件的开发</h5>
</div>
<div class="mid">
<h5 class="subtit">SAN Doc</h5>
<h5>作为文档工程师参与了SAN Doc编写</h5>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
↓↓↓第一种:
* {
margin: 0;
padding: 0;
}
.tit {
margin-top: 30px;
}
h5 {
font-size: 16px;
font-weight: normal;
}
.basicInf h5, .contactInf h5 {
display: inline-block;
margin: 10px 50px 0 0;
}
.subtit {
margin-top: 20px;
font-weight: bold;
}
↓↓↓第二种:
* {
margin: 0;
padding: 0;
}
.resume {
height: 800px;
width: 800px;
}
.tit {
margin-top: 30px;
}
h5 {
font-size: 16px;
font-weight: normal;
}
.basicInf h5, .contactInf h5 {
display: inline-block;
margin: 10px 50px 0 0;
}
.subtit {
margin-top: 20px;
font-weight: bold;
}
.header {
width: 200px;
height: 800px;
float: left;
/*display: inline-block;*/
background-color: skyblue;
}
.header h1 {
height: 50px;
width: 80px;
text-align: center;
margin: 40px auto;
color: #fff;
}
.content {
width: 500px;
/*display: inline-block;*/
float: left;
margin-left: 20px;
}
↓↓↓第三种:
* {
margin: 0;
padding: 0;
}
.header h1 {
height: 50px;
width: 80px;
text-align: center;
margin-left: 40px;
padding-top: 20px;
color: #fff;
}
.content > div {
height: 100px;
width: 1200px;
}
.content > div > div {
height: 100px;
width: 998px;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
float: left;
}
.content .tit {
display: inline-block;
width: 100px;
height: 100px;
text-align: center;
background-color: #ccc;
border-bottom: 1px solid #fff;
}
.tit h2 {
margin-top: 35px;
}
.content div h5 {
font-size: 16px;
font-weight: normal;
float: left;
margin: 0 20px 0;
}
.content .subtit {
font-weight: bold;
}
.content .mid {
margin-left: 20px;
height: 24px;
width: 1000px;
}
.content .mid h5 {
margin: 0;
}
.header {
height: 100px;
width: 1100px;
background: #999;
}