HTML5,CSS制作个人简历
先建立index页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人简历制作</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="content">
<div class="title">
<h1>个人简历</h1>
</div>
<div class="message">
<div class="name">姓名:</div>
<div class="name1">小明 </div>
<div class="sex">性别:</div>
<div class="sex1">男</div>
<div class="age">年龄:</div>
<div class="age1">20</div>
</div>
<div class="picture">
<img src="imgs/xiaoming.jpg" alt="xiaoming">
</div>
<div class="message1">
<div class="xueli">学历：</div>
<div class="xueli1">本科</div>
<div class="jiatingzhuzhi">家庭住址：</div>
<div class="jiatingzhuzhi1">河南省信阳市平桥区</div>
</div>
<div class="lianxi">
<div class="career">专业</div>
<div class="career1">软件工程</div>
<div class="phonenumber">手机号</div>
<div class="phonenumber1">13837681266</div>
</div>
<div class="special">
<div class="special1" style="font-weight: 700;"> 特长:</div>
<div class="special2">
<ul>
<li>熟练掌握vue代码</li>
<li> 熟练精通spring boot基础</li>
<li> 熟练精通spring boot基础</li>
</ul>
</div>
</div>
<div class="hobby">
<div class="hobby1">
爱好：
</div>
<div class="hobby2">
<ul>
<li>打羽毛球</li>
<li>打乒乓球</li>
<li>喜欢交朋友</li>
</ul>
</div>
</div>
<div class="evaluate">
<h3>自我评价：</h3>
<p>
工作认负责，不推卸责任;能承受工作中的压力;工作上可以独当-面;
</br>
具有团队精神，能与同事,其它部门积极配合,公司利益至上;
</br>
服从性好,能与上司保持良好的沟通，重上司的安排;
</br>
为人诚实，正直;且好学上进，不断提高工作能力;
</br>
相信您的选择会让您我更加成功;
</p>
</div>
</div>
</body>
</html>
建立CSS/style
* {
margin: 0px;
padding: 0px;
}
.content {
border:3px solid gray;
width: 800px;
height: 1200px;
background-color: rgb(103, 199, 199);
margin: 100px auto;
}
.title {
font-weight: 700;
text-align: center;
border-bottom: 3px solid gray;
}
.message{
float: left;
}
.name ,.phonenumber,.career, .name1, .age ,.age1,.sex,.sex1,.xueli,.xueli1,.jiatingzhuzhi{
float: left;
border-bottom: 3px solid gray;
border-right:3px solid gray ;
width: 97px;
height: 50px;
text-align: center;
line-height: 50px;
}
.age1{
border-right: none;
}
.picture {
float: right;
width: 197px;
height: 200px;
border-left: 3px solid gray ;
border-bottom: 3px solid gray ;
border-right: 3px solid gray;
}
.jiatingzhuzhi1 {
float: left;
border-bottom: 3px solid gray;
width: 297px;
height: 50px;
text-align: center;
line-height: 50px;
}
.career1 {
float: left;
border-bottom: 3px solid gray;
width: 197px;
height: 50px;
text-align: center;
line-height: 50px;
border-right: 3px solid gray ;
}
.phonenumber1 {
float: left;
border-bottom: 3px solid gray;
width: 197px;
height: 50px;
text-align: center;
line-height: 50px;
}
ul {
margin: 20px;
}
.special2,.hobby {
border-bottom: 3px solid gray ;
}
页面展示效果如下：