簡(jiǎn)介

畢業(yè)季，面試季。好的簡(jiǎn)歷能給你加分不少?，F(xiàn)在網(wǎng)上好看的簡(jiǎn)歷模塊琳瑯滿目，你的簡(jiǎn)歷要怎么樣才能給HR眼前一亮的感覺(jué)，從一堆簡(jiǎn)歷中脫穎而出呢？來(lái)跟小編做一份網(wǎng)頁(yè)版簡(jiǎn)歷吧！

簡(jiǎn)歷制作步驟

1.打開(kāi)IDE或者編輯器，我這里用Sublime Text 3作示范。

使用快捷鍵【Crtl+Shift+P】打開(kāi)控制臺(tái)，輸入【html】然后選擇【Set Symtax:HTML】。

2.Emmet是一個(gè)Sublime插件，是前端開(kāi)發(fā)的神器，如果大家用Sublime的話建議安裝一個(gè)。

3.在文本框輸入英文的【!】，一定要是英文的，然后按【TAB】鍵或【Ctrl+E】快速生成html模板。如果沒(méi)有Emmet的同學(xué)可以照著下圖敲代碼。

4.【lang="zh-CN"】是表示你這個(gè)網(wǎng)頁(yè)主要使用簡(jiǎn)體中文，【title】里填寫你的個(gè)人簡(jiǎn)歷名稱。

5.接著可以先保存下了，名稱隨意，文件后綴名必須為.html（也就是文件類型必須是html格式）。

6.使用瀏覽器打開(kāi)你保存的文件，可以看到一個(gè)空白的網(wǎng)頁(yè)，網(wǎng)頁(yè)標(biāo)題是你剛才填寫的title字段，這表示你之前的操作都是正確的。

7.我們來(lái)寫一個(gè)div標(biāo)簽，用css給這個(gè)盒子一個(gè)大小，也就是我們整張簡(jiǎn)歷的大小，并給這個(gè)盒子一個(gè)1px的邊框。

8.如下圖。

9.接著我們用margin的方法讓盒子居中顯示。

10.如下圖。

11.接著我們給個(gè)人信息頁(yè)一個(gè)大小尺寸還有背景色。

12.此時(shí)我們的簡(jiǎn)歷變成了這樣。

13.給個(gè)人信息頁(yè)加上頭像。

14.此時(shí)會(huì)看到，我們本想用margin-top把頭像往下擠，但是瀏覽器卻錯(cuò)誤的把整個(gè)背景色也一起擠下來(lái)了。

15.此時(shí)只要引入一個(gè)css樣式重置模板，然后給box-left加上一個(gè)clearfix類就能完美解決這個(gè)問(wèn)題。（源文件在文章末我會(huì)給大家提供下載）。

16.頭像已經(jīng)出現(xiàn)在了正確的位置，背景色也正常了。

17.接著我們要開(kāi)始寫我們的個(gè)人信息，然后用css來(lái)美化頁(yè)面。

18.此時(shí)我們的簡(jiǎn)歷已經(jīng)做好了一半了，來(lái)看看效果吧。

19.接著我們來(lái)做右邊的部分，寫一個(gè)div標(biāo)簽，然后里面包著三個(gè)div，給外面的box-right盒子大小尺寸以及背景色，我們看看會(huì)發(fā)生什么事情。

20.我們會(huì)看到，box-right被擠到了簡(jiǎn)歷頁(yè)面的下方。

21.這是因?yàn)閐iv默認(rèn)會(huì)占一整行頁(yè)面空間，我們可以用浮動(dòng)來(lái)解決這個(gè)問(wèn)題。給box-left和box-right都加上左浮動(dòng)。

22.頁(yè)面就正常了。

23.接著我們把整個(gè)頁(yè)面設(shè)置成灰色背景色，把簡(jiǎn)歷的黑色邊框去掉，然后把box-right的背景色改成白色，讓我們的簡(jiǎn)歷清爽起來(lái)。

24.然后我們把右邊的文字信息還有樣式加上。（此處代碼量增多，請(qǐng)同學(xué)們跟著敲一遍，慢慢消化）。

25.這樣我們的簡(jiǎn)歷就做好了！是不是挺簡(jiǎn)單的呢~同學(xué)們可以根據(jù)自己的實(shí)際情況修改自己的簡(jiǎn)歷內(nèi)容哦~

26.至于如果讓HR看到自己做的簡(jiǎn)歷，我下一期會(huì)教大家，怎么利用github免費(fèi)搭建自己的網(wǎng)頁(yè)空間，這樣我們就可以直接發(fā)送一個(gè)鏈接，HR點(diǎn)開(kāi)鏈接就能看到我們的簡(jiǎn)歷，是不是很有逼格！

最后，祝大家畢業(yè)順利，面試順利，早日找到自己稱心的工作！

代碼源文件和所需的圖片素材我通通都放到了github上，關(guān)注公眾號(hào)【Facenom快教程】后臺(tái)回復(fù)【簡(jiǎn)歷】或者【html簡(jiǎn)歷】即可或者下載地址。