用HTML+CSS制作前端簡歷，很漂亮喲

時間：2023-09-10 16:24:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-10 16:24:01 來源：網(wǎng)站運(yùn)營

用HTML+CSS制作前端簡歷，很漂亮喲：

前言

1. 一開始我對自己模仿并加以改進(jìn)的簡歷感到挺自豪的，我是從零開始敲代碼，純HTML+CSS將簡歷復(fù)刻出來的。最后發(fā)現(xiàn)市場上以及我身邊流傳著許多許多大相徑庭、雷同類似的簡歷。也有拿來主義不換皮膚不標(biāo)明出處的簡歷。優(yōu)秀的簡歷被許多人借鑒模仿，養(yǎng)活了一屆又一屆的應(yīng)屆學(xué)者（我就是其中之一）。我恍然大悟：原來我們都是曹賊。

2. 如果你是只想要現(xiàn)成簡歷魔改現(xiàn)用的，請移步Github代碼倉庫，將項(xiàng)目下載下來并且跑起來，改掉內(nèi)容，Fork或借鑒請遵循LICENSE并注明出處。

3. 如果你和我一樣，看到優(yōu)秀的簡歷，你有一種難以言傳的微妙感受，你特別欣賞上面許多的亮點(diǎn)，你一下子被點(diǎn)燃，在你的內(nèi)心產(chǎn)生一股難以遏制的 難以想象的創(chuàng)作激情，想要制作出與自己經(jīng)歷完全契合的簡歷，迫不及待的想要在自己的編輯器上把簡歷制作而不僅僅是克隆出來，想要分享給身邊的同學(xué)看，恭喜你請跟著我往下看，我將教會你從零開始寫網(wǎng)頁版的簡歷。

如果你還沒有紙質(zhì)版簡歷，不知到如何從零開始寫一份簡歷，你可以點(diǎn)進(jìn)我的另一篇文章

經(jīng)典之所以成為經(jīng)典，就是因?yàn)闊o論如何改變，被后來的人無論如何模仿改進(jìn)，優(yōu)秀的簡歷都經(jīng)得起時間和求職者的驗(yàn)證。

這是我的HTML+CSS的簡歷

我模仿的是我們學(xué)長的簡歷

后來我同學(xué)在Github上發(fā)現(xiàn)了一個nodejs的版本(自動部署+自動生成PDF)

從畢業(yè)時間來看，我們重郵閔聰學(xué)長畢業(yè)于17年，比華師吳浩麟學(xué)長16年畢業(yè)要晚一點(diǎn)。

從代碼倉庫來最早上傳時間看，閔聰學(xué)長提交于16年，比吳浩麟學(xué)長17年提交要早一點(diǎn)。

從代碼提交次數(shù)來看，截止2021.09.07，master分支，閔聰學(xué)長提交了7次，遠(yuǎn)遠(yuǎn)少于吳浩麟學(xué)長的133次提交。

這份雷同簡歷誰是鼻祖不好說，或者另有其人也說不定。不過都沒有關(guān)系，我們現(xiàn)在所要做的是模仿并超越他們。

簡歷展示

簡歷的設(shè)計(jì)與搭建

首先你得有一定的前端基礎(chǔ)，掌握 HTMl+CSS

確定主題色

模仿一屆又一屆的應(yīng)屆生，一批又一批的求職者們啊，一開始先換個皮膚，確定主題色后面都得依賴這個主題色。

在不使用node包的情況下，我使用的vscode的 Easy Less 插件，將less文件編譯成css文件。在less文件中定義主題色變量$themeColor，在使用主題色的地方使用變量替代。

$themeColor: #0066FF;.element{ color:$themeColor;}

確定網(wǎng)頁尺寸

網(wǎng)頁版簡歷和word版簡歷一樣，都能打印成紙質(zhì)版。A4紙張尺寸為21cm*29.7cm，那么網(wǎng)頁與A4紙的比例相同即可。

這里網(wǎng)頁寬度我們選用為我們程序員最愛的1024px，那么頁面高度=紙寬度/紙高度*網(wǎng)頁寬度=29.7/21*1024=1440px

.page{ width: 1024px; min-height: 1440px;}

代碼塊效果

修改strong默認(rèn)樣式，擁有代碼塊效果

strong { font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', '微軟雅黑', Arial, sans-serif; font-size: 13px; line-height: 15px; font-weight: 500; color: #494949; margin: 0 3px; padding: 3px 8px; background-color: #F6F6F6; border-radius: 5px; border: 1px solid rgb(235, 235, 235);}這樣我們在寫html結(jié)構(gòu)時只需要用<strong>標(biāo)簽將代碼塊包住即可

熟悉<strong>HTML</strong>、<strong>JS(TS)</strong>、<strong>AJAX</strong>、<strong>ES6</strong>

修改滾動條

::-webkit-scrollbar { width: 5px; background-color: #f1f1f1;}?::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.2); border-radius: 50px;}?

響應(yīng)式

適配不同寬度的效果

@media screen and (max-width:1024px) {}@media screen and (max-width: 720px) {}

打印

簡歷不只一頁，不該斷的地方在分頁處了怎么辦？

<style>標(biāo)簽中設(shè)置media="print"屬性說明打印時才生效的樣式

CSS設(shè)置 page-break-before屬性避免分頁時內(nèi)容的斷開

<style media="print"> .page2{ page-break-before:always; }</style><section class=".page2">...</section>

網(wǎng)頁版簡歷轉(zhuǎn)換成PDF版簡歷

是的，我一開始也不知道網(wǎng)頁版簡歷可以轉(zhuǎn)換成PDF版簡歷。還傻傻的維護(hù)word版和網(wǎng)頁版兩版簡歷。

1. 在網(wǎng)頁版簡歷里右鍵，選擇打印
2. 目標(biāo)打印機(jī)選擇打印成PDF
3. 邊距設(shè)為【無】
4. 背景圖像勾上
5. 點(diǎn)擊打印另存為PDF文件

附上PDF版簡歷下載鏈接

將PDF簡歷拖進(jìn)項(xiàng)目，命名為resume.pdf

在a標(biāo)簽上設(shè)置herf屬性，添加download屬性就可以點(diǎn)擊下載

<a href="resume.pdf" download>

簡歷可編輯

怎么讓別人拿你的簡歷改了就可以用?

在修改按鈕綁定點(diǎn)擊事件，在回調(diào)函數(shù)中修改document.designMode 屬性為on或者off

document.designMode='on'document.designMode='off'