开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天， 点击查看活动详情
有人说作为Web前端工程师，每个人都应该有一份网页版简历，你是否认同呢？
无框架手写代码才有一点儿匠人的感觉吧。
那么我们今天跟随小帅一起来做一份吧，忽略细节看完整代码可直接至文章结尾。
一、实现效果
二、代码分析
1.1根据效果图划分布局线框图
我们将页面分解为多个块区域，为了便于观察区域，框与框之间的距离被拉大了。 根据上图，我们实现HTML结构代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人简历</title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<div id="main">
<div id="head"></div>
<div id="body">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
在以上代码中一共包含5个div元素，因为这些元素在页面中具有唯一性，设置ID属性方便为每个区域设置上层样式。通过CSS的ID选择器，我们为页面设置整个宽度为860px，同时通过margin属性，让最外层的main容器水平居中。代码如下
*{ /* 清空页面元素默认内外边距 */
margin: 0;
padding: 0;
}
ul{/* 清除列表项样式*/
list-style: none;
}
#main{
width: 860px;
/* 上下外边距10px 左右自适应达到居中的 效果 */
margin: 10px auto;
}
#head{}
#body{}
#left{}
#right{}
1.2实现head区域效果。
<div id="head">
<h2>求职者姓名</h2>
<h4>我所理解的工作就是要吃得苦、有韧性、能坚持，我正合适</h4>
<div class="user">
<img src="img/user.jpg" >
</div>
</div>
接着为文本内容增加样式。
#head{
position: relative; /* 相对定位 */
background-color: coral;
padding: 30px;
color: white;
}
#head h2{
font-size: 40px;
}
#head h4{
margin-top: 10px;
font-weight: 400;
}
为了支持图片，head容器设置了相对定位，这样接下来将图片设置绝对定位，就可以参考head的区域自由移动。我们增加图片相关的代码。
#head .user{
position: absolute; /* 绝对定位 */
top:30px;
right: 70px;
z-index: 2; /* 叠放层次提升 */
width: 140px;
height: 140px;
padding: 5px;
background-color: #EEEEEE;
}
#head .user img{
width: 100%;
height: 100%;
}
实现效果如下：
1.3实现left区域效果。
#body{
display: flex; /* 弹性盒子布局 */
background-color: #EEE;
min-width: 200px;
padding: 30px;
color: #888;
font-size: 14px;
}
#left{
width: 600px;
background-color: #FFF;
}
#right{
margin-left: 20px;
width: 250px;
}
在left容器中，我们划分多个块，每个块都设置class=”box”。HTML结构代码如下：
<div id="left">
<div class="box">
<span class="title">求职意向</span>
<div class="content">...</div>
</div>
<div class="box">
<span class="title">工作经验</span>
<div class="content">...</div>
<div class="content">...</div>
<div class="content">...</div>
</div>
<div class="box">
<span class="title">教育背景</span>
<div class="content">...</div>
</div>
</div>
在我们设计的效果中包含三个box区域，我们补充其中的一个box中的内容。
补充<div class="content">...</div>中的代码:
<div class="content">
<div>
<span>2016.9-2018.7</span>
<span>某某大学</span>
</div>
<span class="job">计算机应用技术</span>
<hr>
<ul>
<li>语言：CET-4、普通话二级甲等</li>
<li>证书：软件设计师(中级...</li>
</ul>
</div>
为其设置样式。
#left .box {
position: relative;
min-height: 100px;
margin-bottom: 30px;
}
#left .box .title{
position: absolute;
left:-10px;
width: 160px;
height: 40px;
line-height: 40px;
background-color: coral;
text-align: center;
font-size: 20px;
color: white;
}
#left .box .content{
padding-top: 50px;
padding-left:20px;
padding-right:20px;
line-height: 25px;
}
#left .box .content div:nth-child(1){
display: flex;
justify-content: space-between;
color: black;
font-weight: 600;
}
现在我们获得这样的页面效果。
1.4实现right区域效果。
<div id="right">
<div class="box">
<h3>基本信息</h3>
<ul id="info">...</ul>
</div>
<div class="box">
<h3>自我评价</h3>
<p>...</p>
</div>
<div class="box">
<h3>技能特长</h3>
.........
</div>
</div>
第一个box和第二个box区域的效果如下：
<div class="box">
<h3>基本信息</h3>
<ul>
<li><span>年龄:</span>20岁</li>
<li><span>工作经验:</span>2年</li>
<li><span>联系电话:</span>136xxxx6125</li>
<li><span>邮箱:</span>250516693@qq.com</li>
</ul>
</div>
<div class="box">
<h3>自我评价</h3>
<p>
性格随和内心丰富、对工作责任感强.......
</p>
</div>
为其设置CSS样式。
#right .box{
line-height: 25px;
margin-top: 50px;
}
#right .box h3{
font-size: 24px;
padding-bottom: 7px;
color: coral;
border-bottom: 1px solid gray;
}
#right .box p{
text-indent: 2rem;/* 文本首行缩进2格 */
text-align:justify; /* 文本两端对齐 */
}
接着，实现第三个box效果,这是一个包含了技能百分比的矩形技能条。效果如下：
<div class="one">
<span>HTML</span>
<div class="progress">
<div style="width: 98%;"></div>
</div>
</div>
设置它的样式：
.one{
display: flex; /* 弹性布局 */
justify-content: center; /* 水平方向上对齐 */
align-items: center; /* 竖直方向上对齐 */
}
.one span{
width: 100px;
color: black;
font-size: 16px;
}
.progress{
width: 140px;
height: 12px;
border: 1px solid coral;
}
.progress div{
height: 100%;
background-color: coral;
}
效果分析：
首先one表示一行，设置了弹性布局，元素水平居中。
每个one包含了一个span元素和一个class=”process”的div元素。
两个元素都设置了固定的宽度，这样再写一个能量条也可以保持对齐。
我们发现技能能量条用到了两个div嵌套，外层提供边框，内层提供背景，而且用到了行内的宽度百分比，这里用行内是因为每个技能百分比可能是唯一的，不便于使用CSS类的写法控制。如果继续补充多个技能点，我们查看效果。
