百度前端技术学院基础班2-4day任务

Demo
模拟的简历模板：
首先来对页面进行一个分析，页面主题分为两部分，照片和姓名用一个div来装，下面主体部分用一个div来装，然后主体div又分成了两部分，两部分均匀分布，也是用div来装，由于div会自动换行，所以需要让这两个div并排显示，可以采用float(注意要清除浮动或者闭合浮动)或者flex布局来实现，这里我采用flex布局
然后再往下分析，个人资料的信息都是以列表形式排列的，根据web语义化，这里采用ul列表，然后利用border-color和border-style可以实现给部分边框线添加颜色和想要的效果，虚线是dashed关键字，border-color和border-style可以写成border;
内部显示其实没有太多特别的地方，资格证书那里需要利用flex布局，但是flex布局会尽可能地把内容都显示成一行，这里我们需要强制其每行显示两个，具体做法是参考这个博文的:flex布局强制换行并且固定显示个数，而且均匀分布
剩下比较棘手的问题就是列表前面的菱形和把标题显示在边框上面的问题了，菱形可以用一个块级元素，然后用transform属性让其旋转45度即可，这里我们利用伪类:before来实现想要的效果
至于把标题显示在线上就利用fieldset属性和legend属性来完成
以上就是整个简历的主要部分的分析
最终写出来的效果还是有很多瑕疵的，这个项目还有很大的进步空间，比如不用fieldset实现想要的效果，使用float来解决浏览器兼容性问题，代码进行重构等等

参考资料：
垂直居中的六种方法
边框属性
flex布局强制换行并且固定显示个数，而且均匀分布
利用伪元素在标签前面添加图标
在li图标前面添加图标的三种方式
清除浮动的方式
css静态进度条