码了个简历

Posted on |

背景

前端工程师需要一个网页简历

一直想做一个网页简历，刚好校招开始，所以做了一个简历练练手。

参考了知乎的讨论：一份优秀的前端开发工程师简历是怎么样的？

主要的山寨了前端大神张雯莉的简历：张雯莉的简历

请猛击我的简历查看效果：陈韩杰的简历

基本情况

Finish

  1. 页面CSS布局

  2. 设配IE9+及现代浏览器

  3. 页面切换：鼠标滚轮，键盘及触屏滑动

  4. 页面切换动画及页面内容动画

  5. 可点击的导航栏

TODO

  1. CSS设配移动端，主要是retina下的字体大小

  2. 内容润色

  3. 配套设施搞起来：Blog | Github

页面布局

整个页面禁止滚动，

页面切换

基于hash滚动页面

页面切换使用 Window Location 对象 的 location.hash

hash是什么

hash的格式为窗口文档的url中#号及其后全部字符。#代表网页中的一个位置,其右面的字符，就是该位置的标识符。

例如：

// location.href, 文档完整的url
http://cntchen.github.io/cv/#page1

// lacation.hash，标识符为'page1'
// #page1

hash的作用：

hash可以使页面滚动到文档中指定了标识符的区域，而并不刷新页面。可以通过指定HTML元素的id，为文档添加不同的”滚动标识”。

例如：

//HTML
<div id="page1">
    <!--其他-->    
</div>
<div id="page2">
    <!--其他-->
</div>

//JS 将id="page2"的div滚动到可视区域
window.location.hash = '#page2';

简历页面跳转就使用

可以参考阮一峰的文章:URL的井号

动画

适配

1.触摸事件

2.position垂直布局

  • 高度height确定的block

居中布局可以使用以下方法：

  1. 设置position为非static，使得top样式可以起作用

  2. 设置top: 50%，使得block从50%的高度开始布局

  3. 设置margin-top: half-height-of-block，让位置上移block height的一半

  • 高度不确定的block

例如：div的高度由div里面的内容撑开或div内容是JS动态添加，此时block的高度不确定，无法使用margin-top的方法。纯CSS布局我搜索不到可用的方法，考虑到简历每页的内容高度不高，使用CSS3的calc()简单处理了一下。

top: calc(50% - 200px);

在PC端效果不错，手机端的chrome 正常显示，但在UC和微信页面中不起作用，使用!important处理了一下

top: calc(50% - 200px) !important;
top: 30%;

!important提升CSS样式的优先级，手机端如果calc()不起作用，则会使用top: 30%

结语

码简历过程中遇到一些问题，解决问题的过程学到许多新的知识。但是更主要的是看到自己的不足和前端领域的广阔和大神倍出。更加明确乐自己的发展方向。

Offer快到碗里来吧。