用原生 JS 撸了一个电商风格的 WEB 前端简历，兼容到了 IE5，源码在 github，欢迎 star；希望可以帮到需要的人；

[an168bang521]

在 2012 年的时候，就想做一个电商风格的简历，但当时只会设计，和改 discuz ， WordPress 模板；设计出来的板式，不会用代码写出来；

2015 年初的时候开始学写 JavaScript ；现在写出来了；分享给大家；

github 地址：源码地址

在线预览的地址：http://broszhu.com/works/my-resume-like-tmall/index.html

图片预览：

测试环境

• chrome 浏览器
• IETeser 中的 6
• win 系统自带的 IE5 ；

全部原生 JavaScript 写的；最低兼容到 IE5 ，优雅降低方案；

[SourceMan]

2333/哈哈哈 /

[scourgen]

win 系统自带的 IE5 ???????????

[an168bang521]

@scourgen 奥，搞错了，是 IE 浏览器中的 IE5 模式；

[lwbjing]

呵呵，哈哈， 55555

[Pastsong]

...说什么好呢...迷之审美...

[jeeve]

计算机的 减号写成加号了吧？

[youdaji]

这水平，可以 30k 了

[Pastsong]

我觉得吧，前端程序员平时逛一逛什么
淘宝 UED 啊 http://ued.taobao.org/blog/
Dribbble 啊 https://dribbble.com/
对提升自己设计的姿势水平还是很有帮助的...

[Tink]

萌萌哒

[an168bang521]

@jeeve 刚才看了下，确实写错了， ctrl+D 后改漏了； 要不是你说，我都一直发现不了，非常感谢指出；

[iTakeo]

抵制 IE6,7,8 从前端做起，别再做兼容了，别再给前端挖坑了

[an168bang521]

@Pastsong 嗯， 谢谢分享， Dribbble 很少逛，平时爱看站酷和我图网，设计方面比较关注平面设计；

[abelyao]

@iTakeo 现在觉得兼容 IE 678 比兼容安卓的各种内核浏览器要容易多了

[jas0ndyq]

interesting

[zwhu]

配送和运费那里没有对齐看起来不太舒服吧

[monnand]

其实我想说，要是真有人用 IE5 看了你的简历让你去他们公司做前端，你敢去吗。。。

[sox]

30k 不是梦

[an168bang521]

忘记发设计稿了， http://pan.baidu.com/s/1ntPl6Fv
这里可以下载设计稿；
修改文件方式可以在 PSCC 里面，先要设置，首选项>增效工具>启动生成器；并且在文件>生成>图像资源前打钩；
在 PSD 所在的文件夹下会自动生成修改后的文件；可以直接修改；
github 仓库里也有单独的 PSD 文件，也可以在那里改

[luo123qiu]

楼主，先把你相机白平衡调一下吧，头像太黄了。。。。。

[helone]

感觉有点像是几年前的前端工程师，基础应该不错，对库也不是很依赖，但是现在前端轮子太多，建议楼主可以多学习下流行的库(react)和自动化构建工具(webpack 、 gulp)之类的，再结合下 ES2015 TS 乱七八糟的，提高了效率对自己对公司都有好处，有几个作品，我觉得 20K 往上肯定是没问题的。

[xiaoyu9527]

感觉不错

[27149]

迷之审美。
另外，我更注重面试人逻辑、能力、水平、产出，如果我看到这样一份简历，第一想法是华而不实。

[an168bang521]

@iTakeo @monnand 嗯，主要是想挑战下不同浏览器的兼容性处理；最开始就是抱着学习的心态奔着踩坑去的；实际开发中，如果这么搞，效率就太低了；

[an168bang521]

@zwhu 大哥好眼神啊，我刚看了下，确实没做居中，感谢指出，谢谢；

[an168bang521]

@luo123qiu 嗯，确实没有弄好的，调过一次色，调成正常色调后，照片有点发冷，也许是背景没有选好的原因，所以就继续这种屎黄色了，哈哈~

[an168bang521]

@helone 大哥抬爱了，感谢前辈指点， gulp 只会一丢丢，解压 sass,ECMA6 文件这类简单的操作，应该属于"听说过"的水平，您说的我会认真研究的，谢谢指路；

[an168bang521]

@27149 嗯，就像自由和平等的矛盾一样；
有的人感觉简历就应该用 word 那种中规中矩的把要说的罗列出来，注意下格式，有利于阅读即可；或者直接套 word 模板；
有的人感觉做前端开发岗位的，应该自己做一套网页版或者移动端版的简历，这样才对得起自己作为前端开发着的身份；
没有对错，只是不同人的喜好不同；
我个人是不喜欢那种千篇一律的通用简历写法的，比较喜欢让人眼前一亮，与众不同的简历；
即使不用这种网页实现的方式，也会用 PS 设计一套 A4 纸大小的个性简历打印出来，感觉使用通用简历的写法是对自己技术的忽视和不尊重；

[boxlee]

个人简介 技能总结这个地方应该是切换的风格，而不是跳转到下方，第一次点以为去外太空了。

[KLBJ]

哥们，你这个貌似不兼容 firefox 啊。。。

[an168bang521]

@boxlee 谢谢指出，确实需要改善，我打算个人简介 技能总结的导航条部分，距离浏览器窗口的距离为 0 时候，就一直显示在窗口的顶部；感觉这样处理怎么样？

@KLBJ 谢谢指出，我下载 firefox 试试；

[boxlee]

@an168bang521 一般情况下，往下拖拉浏览的时候，悬浮的是最上面的导航条，就是首页 Github 个人博客 联系方式 这部分。可以试着把主导航弄到左侧悬浮，个人简介弄到右侧悬浮。
-----------------------------------------------------------------------------------------------
首页 Github 个人博客 联系方式 个人简介 技能总结
-----------------------------------------------------------------------------------------------
不知道效果如何，右下角可以做个 Top 悬浮。

[boxlee]

上面空格不管用，挤到一起了。
-----------------------------------------------------------------------------------------------
首页 Github 个人博客 联系方式 -------------------------------- 个人简介 技能总结
-----------------------------------------------------------------------------------------------

[4263Ad06Awk3b1Do]

个人觉得， git ， webstorm 这种写到技能里不太合适吧

[an168bang521]

@boxlee 好主意，在右侧弄个类似对联广告的板式，返回顶部，确实是个好主意；

[an168bang521]

@jarnanchen 嗯，这里是可以随时改的； PSD 里面改下素材，就可以换成想换的文件了；

[xinple]

不错的创意，我觉得蛮好的

[ivenvd]

做得挺好的，但是……为毛要做成电商样式，怪怪的……

[jation]

所以“兼容 IE5 ”是卖点，还是“用原生 JS ”是卖点

[yyyle]

点进去看到楼主的大头像吓得立马关了哈哈哈哈 JK

[LWXYFER]

哈哈哈哈哈哈，挺好玩的。