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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3248 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

github 地址：源码地址

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

图片预览：

测试环境

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

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

ie5

GitHub

源码

JavaScript

40 条回复 • 2016-01-08 18:25:15 +08:00

SourceMan

2016-01-07 13:30:51 +08:00

2333/哈哈哈 /

scourgen

2016-01-07 13:31:24 +08:00

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

an168bang521

2016-01-07 13:33:11 +08:00

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

lwbjing

2016-01-07 13:34:20 +08:00

呵呵，哈哈， 55555

Pastsong

2016-01-07 13:34:44 +08:00

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

jeeve

2016-01-07 13:35:37 +08:00

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

youdaji

2016-01-07 13:39:23 +08:00

这水平，可以 30k 了

Pastsong

2016-01-07 13:43:27 +08:00

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

Tink

2016-01-07 13:45:05 +08:00 via iPhone

萌萌哒

an168bang521

2016-01-07 13:46:32 +08:00

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

iTakeo

2016-01-07 13:54:31 +08:00

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

an168bang521

2016-01-07 13:54:33 +08:00

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

abelyao

2016-01-07 14:07:23 +08:00

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

jas0ndyq

2016-01-07 14:12:20 +08:00

interesting

zwhu

2016-01-07 14:16:18 +08:00

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

monnand

2016-01-07 14:16:57 +08:00 via Android

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

sox

2016-01-07 14:17:39 +08:00

30k 不是梦

an168bang521

2016-01-07 14:25:26 +08:00

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

luo123qiu

2016-01-07 14:31:48 +08:00

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

helone

2016-01-07 14:32:58 +08:00

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

xiaoyu9527

2016-01-07 15:34:00 +08:00

感觉不错

27149

2016-01-07 15:49:26 +08:00

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

an168bang521

2016-01-07 16:49:38 +08:00

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

an168bang521

2016-01-07 16:52:36 +08:00

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

an168bang521

2016-01-07 16:58:24 +08:00

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

an168bang521

2016-01-07 17:06:34 +08:00

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

an168bang521

2016-01-07 17:20:01 +08:00

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

boxlee

2016-01-07 17:50:11 +08:00

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

KLBJ

2016-01-07 18:27:10 +08:00

![]( https://nzsg3jhu3.qnssl.com/24zo0snxy2zuyk8dxi529.png)
哥们，你这个貌似不兼容 firefox 啊。。。

an168bang521

2016-01-07 19:00:38 +08:00

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

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

boxlee

2016-01-07 20:21:29 +08:00

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

boxlee

2016-01-07 20:22:26 +08:00

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