網頁版簡歷製做經驗分享

轉自：Heero.Luo

2012年中，由於換工做面試的須要，我得更新舊的簡歷。可是在Word中排版實在是各類不順手，因而就發揮了做爲前端工程師的優點把簡歷作成了網頁；2014年底想換工做時又對其進行了改版。這份簡歷曾經受到好幾位HR和獵頭的好評，因此特意分享製做經驗，也算是給想換工做的同行參考。

進入正題以前，先想一想HTML簡歷的好處：

• 無須下載，直接打開。
• 能夠採用更豐富的設計和更靈活的排版。
• 能夠經過超連接訪問其餘資源。
• 能夠順帶展現本身設計以及前端方面的技能。

而在此基礎上，我還給這份簡歷定下了如下目標：

• 在一個頁面中展現全部內容。
• Write once, run anywhere. 兼容PC設備與移動設備，最好還能直接打印。
• 簡單實用，最好連JS都不用寫。那些用上了各類動畫作出來的甚至是作成了小遊戲的炫酷簡歷，其實並不利於閱讀。

好了，下面具體講講如何打造這樣一份簡歷。

設計

不少程序員會喊：「我是寫代碼的，不懂設計。」但俗話說得好：沒吃過豬肉，總見過豬跑吧。平時逛這麼多網站，難道沒有幾個特別順眼的？如今瀏覽器的開發工具很是先進，看上哪一個直接扒過來「參考」就行。像簡歷這種簡單頁面也不須要先作PSD稿，構思好以後直接寫HTML和CSS更爲方便。

設計時應儘可能使用圖形、圖像表達內容，這是由於相比大段的文字，人更喜歡看圖。這裏也貼一下我簡歷中其中一節改版先後的對比（左舊右新）：

相比左側大段密密麻麻的文字，右側的柱狀圖讓人一眼就能看清技能水平。

字體大小

這年頭顯示器愈來愈大，相對地文字就愈來愈小，如今大部分網站都把標準文字大小設爲14px。考慮到簡歷的內容很少，排版能夠寬鬆一些，所以建議把標準文字大小設爲16px，這在屏幕尺寸較小的移動設備上看起來也不會那麼吃力。

關於兼容

簡歷的受衆是誰？無非是兩類人：HR以及技術工程師。能夠肯定的是，技術工程師基本上是用Chrome或者Firefox的好同志，而且很是鄙視IE。HR常年耳濡目染，也會逐漸地換上新的瀏覽器。然而，考慮到那小部分的HR以及極小部分的技術工程師的感覺，仍是準備一段「舒適」的提示吧：

實現方法很簡單，經過條件註釋對IE 9.0如下版本的瀏覽器，直接用iframe套個提示頁面去把原頁面擋住：

<!--[if lt IE 9]>
<script>
!function(body) {
body.style.width = body.style.height = '100%';
body.parentNode.style.overflow = body.style.overflow = 'hidden';
}(document.body);
</script>
<iframe src="4oie.html" frameborder="0" scrolling="no" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 99999;"></iframe>
<![endif]—>

爲何連IE8也要拋棄呢？這是由於它不支持Media query以及一些CSS 3樣式，而這剛好是後面說到的多設備適配所必需要用到的技術。

加密聯繫方式

這一步主要是爲了不被各類騷擾電話、垃圾郵件的掃號軟件掃到，這裏說的加密並不須要作得很複雜，只要稍微加一點干擾因素便可。好比你的QQ號是1234567，那麼在網頁上能夠這樣輸出：

<p>QQ：<script>document.write( 'a1b2c3d4e5f6g7h'.replace(/\D/g, '') );</script></p>

至於郵件地址則能夠這樣（以 abc@126.com 爲例）：

<p>Email: <script>document.write( ['com', '126', 'abc'].reverse().join('.').replace('.', '@') );</script></p>

電話號碼是比較敏感的信息，能夠搞複雜點，這裏我採用的是base64方案。可能不少朋友還不知道，稍微先進點的瀏覽器都已經原生支持base64的編碼和解碼了，分別是調用window.btoa和window.atob兩個函數。因此電話號碼能夠這樣輸出（以 13800138000 爲例）：

<p>Phone number: <script>if (window.atob) { document.write( window.atob('MTM4MDAxMzgwMDA=') ); }</script></p>

再者，我並不想任何人都能看到個人電話號碼，因此還能夠加點限制。好比URL帶有某個參數才顯示電話號碼：

<p id="phone-number" style="display: none;">Phone number: <script> if (window.atob) { document.write( window.atob('MTM4MDAxMzgwMDA=') ); } if ( /[?&]show-phone-number(&|$)/.test(window.location.search) ) { document.getElementById('phone-number').style.display = ''; } </script></p>

適配PC與移動設備

首先，經過Media query在不一樣的寬度下采用不一樣的佈局。

其次，市場上Retina屏幕的設備（如大部分iPad、部分Macbook、大部分手機）愈來愈多，像圖片這些非矢量內容在這些屏幕上會由於被拉大而失真。因此，在準備內容圖片的時候，最好是作成實際顯示尺寸的兩倍，再經過CSS縮小。而對於裝飾性質的小圖標，能夠用兩倍大小的圖片（經過background-size縮小），也能夠用字體圖標。這裏我不建議用SVG，由於它的性能比較差，在移動設備上打開會明顯地卡了一下。

最後，不要忘了貼上個二維碼，方便移動設備掃碼訪問。

作好這一步，就能夠帶着iPad去面試了。

打印

其實打印機也是一種設備，按理說這部份內容應該跟上一節放一塊兒的，可是打印設備的狀況比較特殊，並且有很多坑，因此就單獨做爲一節。

打印設備特殊在哪呢？A4紙的尺寸是寬21cm、高29.7cm，可是我用Chrome把頁面存成PDF（在打印的界面能夠存）以後，看到的分辨率是寬595px、高842px。這究竟是怎麼算的呢？研究了一番以後發現這是按72ppi（Pixels Per Inch，即一英寸所含的像素數）換算的：

1in = 2.54cm

21cm / 2.54cm * 72px ≈ 595px

按照Media query的規則，這個寬度在打印的時候明顯是進入了手機設備的佈局。而16px大小的文字打印出來以後的大小就是：

2.54cm * 16px / 72px ≈ 0.56cm

這文字明顯太大了，因此得縮：

@media print { body { font-size: 12px; } }

可這縮了以後，內容相對變小，再用原來小寬度的佈局就不合適了，反而是大寬度的佈局更好，因而就有了這樣的代碼：

@media not print and (max-width: 639px) { /* ... */ }

而後坑來了，這裏的Media query表達的並不是「不是打印設備而且寬度不超過639px」，而是「不是寬度不超過639px的打印設備」。（關於這一點能夠看看Mozilla的解釋說明）

這個小問題難不倒咱們，把代碼改爲嵌套的Media query：

@media not print { @media (max-width: 639px) { /* ... */ } }

原本覺得問題已經解決，可是用微信掃一掃後發現樣式異常。原來手機QQ瀏覽器的內核還不支持嵌套的Media query，順帶查了一下，IE系列所有瀏覽器也不支持這項特性。

被折騰地沒辦法了，最後乖乖地寫了兩個CSS：

<link href="css/style.css" media="not print" rel="stylesheet" type="text/css" /> <link href="css/style-for-print.css" media="print" rel="stylesheet" type="text/css" />

接下來再研究一下打印的樣式要怎麼寫。首先是 @page ，能夠用來修改頁面容器的版式，最經常使用的是指定頁面的尺寸及邊距：

@page { size: A4 portrait; margin: 2.1cm 1.9cm; }

其次，某些瀏覽器默認是不打印背景色和背景圖片的，這樣一來背景小圖標就沒了。對於Chrome，能夠加上這段CSS代碼強制打印背景：

body { -webkit-print-color-adjust: exact; }

再次，要處理連接。要知道打印出來以後，用手指往紙上戳是戳不開網頁的。因此諸如「在線地址」、「我的博客」這樣的文字連接要麼隱藏，要麼把連接地址也打印出來。要顯示連接地址能夠這麼寫：

a:after { content: '[' attr(href) ']'; }

此外，紙質簡歷的篇幅不宜過長，能夠選擇性地隱藏一些內容。好比黑白打印的簡歷能夠忽略圖片：

最後，你們還要記住一個前提，以上這些都是不兼容IE 六、IE 七、IE 8的，可是落後的打印店可能用的仍是XP系統，因此輸出個PDF去打印是比較保險的。

簡歷作完之後

先用各類瀏覽器看一下有沒有露餡，不過更重要的是：請閱讀你的簡歷至少10遍。程序員的表達能力廣泛不強，在這個過程當中，你能夠發現：

• 各類錯別字。好比把「登陸」寫成了「登錄」。
• 各類錯誤術語。好比把「jQuery」寫成了「JQuery」，把「iOS」寫成了「IOS」。
• 各類語句不通。
• 各類表達累贅。

至於放置簡歷的服務器，能夠用Github pages，也能夠每一年花￥100多租個虛擬主機。

成功換工做之後

當你在新公司完成一個有價值的項目時，請及時更新你的簡歷。爲什麼？由於此時你對項目的記憶最深，要是等到想再跳槽的時候再更新簡歷，每每在那時候忘記了項目的許多細節。

最後

附上我新版簡歷的截圖（圖大，移動網絡慎開；請容許我對敏感內容打馬賽克）。

 

出處：點我