純div+css手寫html簡單小簡歷

前去面試都拿的紙質簡歷，去一家公司浪費一份簡歷，因為你能不保證你只去一次就能面試成功。

今天做了一份html簡歷，準備掛到網站上，以后面試時直接看網站，一舉兩得。

先附html截圖，后面有源碼

下面附源碼

<!DOCTYPE html>

<html>

<head>

margin: 0;

padding: 0;

border: none;

font-size: 12px;

}

#jianil{

width: 797px;

margin: 0 auto;

border: solid 1px #DCDDDF;

}

#jianil .one{

background: url(images/toubu.png);

width: 797px;

height: 90px;

font-size: 30px;

color: white;

font-weight: bold;

text-align: center;

margin-bottom: 0;

line-height: 90px;

}

#jianil ul{

width: 771px;

margin-left: 13px;

margin-top: 40px;

}

#jianil ul li{

font-size: 20.5px;

background: url(images/tubia.png) no-repeat;

list-style: none;

text-indent:1.8em;

line-height: 30px;

margin-bottom: 20px;

border-bottom: 1px solid #DCDDDF;

}

#jianil ul li.none1{

border-bottom: none;

}

#jianil ul li p{

font-size: 15px;

}

</style>

</head>

<body>

<ul>

<li>個人信息

<p>

姓名：XX#12288;

性別：男#12288;

籍貫：XX#12288;

年齡:21#12288;

</p>

<p>

手機：XXXXXXXXXXX#12288;

院校：XXXX學院#12288;

專業：XX#12288;

學歷：XX#12288;

</p>

</li>

<li>教育背景

<p>

2014.8-2016.6nbsp;XXXX學院

</p>

<p>

你在學習學了那些東西？

</p>

</li>

<li>最近工作

<p>

2016.6-2016.12nbsp;你最近的工作公司nbsp;工作崗位

</p>

<p>

工作內容

</p>

</li>

<li>專業技能

<p>

你會什么

</p>

</li>

<li>相關證書

</li<

<li class=none1>自我評價

<p>

你對于自己是是怎么評價的？

</p>

</li>

</ul>

</div>

</body>

</html>

需要鏈接的兩張背景圖

整頁源碼截圖

溫馨提示：body里可以添上oncontextmenu=self.event.returnValue=false onselectstart=return false（禁止復制網頁，禁止網頁右鍵）

如果你喜歡本文的話，可以關注作者頭條號，每天都會有網站開發干貨與你分享哦！

者： SnailClimb

Markdown 簡歷模板樣式一覽

可以看到我把聯系方式放在第一位，因為公司一般會與你聯系，所以把聯系方式放在第一位也是為了方便聯系考慮。

為什么要用 Markdown 寫簡歷？

Markdown 語法簡單，易于上手。使用正確的 Markdown 語言寫出來的簡歷不論是在排版還是格式上都比較干凈，易于閱讀。另外，使用 Markdown 寫簡歷也會給面試官一種你比較專業的感覺。

除了這些，我覺得使用 Markdown 寫簡歷可以很方便將其與PDF、HTML、PNG格式之間轉換。后面我會介紹到轉換方法，只需要一條命令你就可以實現 Markdown 到 PDF、HTML 與 PNG之間的無縫切換。

下面的一些內容我在之前的一篇文章中已經提到過，這里再說一遍，最后會分享如何實現Markdown 到 PDF、HTML、PNG格式之間轉換的方法。

為什么說簡歷很重要？

假如你是網申，你的簡歷必然會經過HR的篩選，一張簡歷HR可能也就花費10秒鐘看一下，然后HR就會決定你這一關是Fail還是Pass。
假如你是內推，如果你的簡歷沒有什么優勢的話，就算是內推你的人再用心，也無能為力。
另外，就算你通過了篩選，后面的面試中，面試官也會根據你的簡歷來判斷你究竟是否值得他花費很多時間去面試。

寫簡歷的兩大法則

目前寫簡歷的方式有兩種普遍被認可，一種是 STAR，一種是 FAB。

STAR法則（Situation Task Action Result）：

Situation： 事情是在什么情況下發生；
Task:： 你是如何明確你的任務的；
Action： 針對這樣的情況分析，你采用了什么行動方式；
Result： 結果怎樣，在這樣的情況下你學習到了什么。

FAB 法則（Feature Advantage Benefit）：

Feature： 是什么；
Advantage： 比別人好在哪些地方；
Benefit： 如果雇傭你，招聘方會得到什么好處。

項目經歷怎么寫？

簡歷上有一兩個項目經歷很正常，但是真正能把項目經歷很好的展示給面試官的非常少。對于項目經歷大家可以考慮從如下幾點來寫：

對項目整體設計的一個感受
在這個項目中你負責了什么、做了什么、擔任了什么角色
從這個項目中你學會了那些東西，使用到了那些技術，學會了那些新技術的使用
另外項目描述中，最好可以體現自己的綜合素質，比如你是如何協調項目組成員協同開發的或者在遇到某一個棘手的問題的時候你是如何解決的。

專業技能該怎么寫？

先問一下你自己會什么，然后看看你意向的公司需要什么。一般HR可能并不太懂技術，所以他在篩選簡歷的時候可能就盯著你專業技能的關鍵詞來看。對于公司有要求而你不會的技能，你可以花幾天時間學習一下，然后在簡歷上可以寫上自己了解這個技能。比如你可以這樣寫：

Dubbo：精通
Spring：精通
Docker：掌握
SOA分布式開發：掌握
Spring Cloud:了解

簡歷模板分享

開源程序員簡歷模板： https://github.com/geekcompany/ResumeSample（包括PHP程序員簡歷模板、iOS程序員簡歷模板、Android程序員簡歷模板、Web前端程序員簡歷模板、Java程序員簡歷模板、C/C++程序員簡歷模板、NodeJS程序員簡歷模板、架構師簡歷模板以及通用程序員簡歷模板）

上述簡歷模板的改進版本： https://github.com/Snailclimb/Java-Guide/blob/master/面試必備/簡歷模板.md

其他的一些小tips

盡量避免主觀表述，少一點語義模糊的形容詞，盡量要簡潔明了，邏輯結構清晰。
注意排版（不需要花花綠綠的），盡量使用Markdown語法。
如果自己有博客或者個人技術棧點的話，寫上去會為你加分很多。
如果自己的Github比較活躍的話，寫上去也會為你加分很多。
注意簡歷真實性，一定不要寫自己不會的東西，或者帶有欺騙性的內容
項目經歷建議以時間倒序排序，另外項目經歷不在于多，而在于有亮點。
如果內容過多的話，不需要非把內容壓縮到一頁，保持排版干凈整潔就可以了。
簡歷最后最好能加上：“感謝您花時間閱讀我的簡歷，期待能有機會和您共事。”這句話，顯的你會很有禮貌。

我們剛剛講了很多關于如何寫簡歷的內容并且分享了一份 Markdown 格式的簡歷文檔。下面我們來看看如何實現 Markdown 到 HTML格式、PNG格式之間轉換。

Markdown 到 HTML格式、PNG格式之間轉換

網上很難找到一個比較方便并且效果好的轉換方法，最后我是通過 Visual Studio Code 的 Markdown PDF 插件完美解決了這個問題！

安裝 Markdown PDF 插件

① 打開Visual Studio Code ，按快捷鍵 F1，選擇安裝擴展選項

② 搜索 “Markdown PDF” 插件并安裝，然后重啟

使用方法

隨便打開一份 Markdown 文件點擊F1，然后輸入 export 然后選擇你想要轉換的格式即可！

三銀四即將到來，你是否已準備好找工作？機會永遠屬于有準備的人。專業技能的復習和梳理是少不了的；個人簡歷當然也是必不可少的，一份精美的簡歷能讓你大大增加面試機會。

你是怎樣寫簡歷？還在詬病簡歷一眼看去沒有出彩的地方？你還在使用 Word 寫簡歷嗎？這種方式早已 Out了。假如你用的微軟 Office 寫的簡歷，人家用的 WPS 打開你的簡歷，格式肯定會錯亂。而且很多Word 版炫酷樣式的簡歷模板都是收費的。懂一點技術的我們應該通過技術手段寫一份免費又精美的簡歷。簡歷格式最好是 pdf ，不管通過什么工具打開都不會出現格式錯亂的問題。

為了讓大家不輸在面試的起跑線上，為了凸顯個人專業技能的特點，為了讓面試官眼前一亮。我篩選出最優的三種方式寫簡歷，希望能幫到大家。三種方式如下：

Markdown 寫個人簡歷
單頁面 HTML 代碼寫個人簡歷
前端項目寫個人簡歷

Markdown 內容生成簡歷

準備工作

掌握 Markdown 基本語法。標題、內容強調、段落、代碼塊、圖片鏈接等。
掌握 HTML、CSS 基本語法，因為 Markdown 編輯器支持 HTML 內容。

寫簡歷

Markdown 基本語法

標題，使用 # 可代表 1~6 級標題。例如：### 表示三級標題。
內容強調，在強調內容兩側分別加上 * 或者 _。例如：*斜體*、_斜體_ 表示斜體；**加粗**、__加粗__ 表示內容加粗。
使用 ·、+、或 - 標記無序列表。
圖片鏈接，例如：![](圖片url)。
代碼塊，以“```”括起來的內容。
區間引用，在段落的每行或者只在第一行使用符號 >。

在線寫簡歷

訪問冷熊簡歷，首頁效果如下圖：

一方面參考簡歷模板，這里我推薦一個開源項目 ResumeSample，它包含 Java、C、Php、Android、Web 等簡歷模板。另一方面添加自己的工作經驗，將簡歷內容豐富起來。

生成簡歷

簡歷內容寫完后，點擊“PDF”就可以將在線的 Markdown 格式的簡歷轉化為 PDF 格式，我們就可以在各大找工作，App 投放這份簡歷了。最終導入的簡歷效果如下圖：

注意一下，Markdown 文檔如何添加個人圖像？有很多方式，這里我直接用的 HTML 代碼來實現的。在 Markdown 文件中添加如下代碼，就可將圖像添加到你指定位置。

<div style="float:right">
    <img width="180" src="https://pic1.zhimg.com/v2-e38d6ca59c245f74665a1d2241fc69cc_b.jpg" >
</div>

其實很簡單，上面代碼用到了兩個 HTML 標簽：div、img，div 標簽添加了內嵌樣式，讓 div 右對齊，img 設置了 width 屬性，指定圖片的寬度。

本地寫簡歷

點擊“下載”功能，可將我們寫好的 Markdown 格式的簡歷下載到本地。本地安裝 Markdown 編輯器 Typora 可以通過此工具的將 Markdown 格式轉化為 PDF 格式，以后我們寫簡歷直接在本地修改就可以。Typora 下載地址，在“文件”->“導出”->“PDF”，即可導出文件。

Markdown 添加自定義樣式，優化顯示效果，打開 Typora 工具，“文件”->“偏好設置…”，如下圖：

打開主題，找到 Typora 工具存放主題的位置，將我們自定義的主題文件 xx.css 拷貝到此文件。重啟 Typora 工具，就可看到我們自定義的主題。自定義樣式寫法就是 CSS 樣式書寫的格式，可以參考一下簡歷模板樣式。

添加小圖標

根據自己的需要在標題上可添加相應的小圖標做點綴。在網絡中找到所需要的小圖標保存到本地，然后將小圖標添加到對應位置。在阿里巴巴矢量圖標庫下載你所需要的小圖標，格式為 SVG，需要什么圖片搜索一下都能找到。添加下面代碼到 Markdown 文件即可，代碼如下：

<img src="assets/info-circle-solid.svg" width="30px">

簡歷的最終效果如下圖：

單頁面 HTML 代碼生成簡歷

準備工作

安裝 Python 開發環境，主要是使用 Python 命令將 HTML 頁面轉為 PDF 文件。
安裝 wkhtmltopdf 和 PDFKit，主要用途是將 HTML 頁面轉為 PDF 文件所依賴的插件。
掌握 Git 基本指令：克隆代碼（git clone），更新代碼（git pull），添加代碼（git add），提交代碼（git push）。
掌握 HTML、CSS 基本語法，掌握 HTML 常用標簽的含義。
掌握 HTML 開發工具 NotePad++、VS Code。

寫簡歷

安裝 Python 開發環境

Python 下載地址

本機本機操作系統（32 位/64 位）下載對應的版本。這里我下載的版本是 3.7.3。

安裝程序下載好，點擊 next 就可以安裝成功。

使用快捷鍵 Win +R 打開命令行窗口，輸入：python -V，如下圖表示 Python 安裝成功。

安裝 wkhtmltopdf 和 PDFKit 插件

wkhtmltopdf 下載地址

安裝完成后把 bin 目錄中的可執行 wkhtmltopdf.exe 文件放在模板目錄下, 例如：awesome-resume\free。

使用快捷鍵 Win +R 打開命令行窗口，在命令執行如下命令，安裝 PDFKit 插件。

pip install pdfkit  #安裝 pdfkit 插件

下載項目

使用下面命令，將項目下載到本地：

cd D:\projects    #切換到本地目錄
git clone https://github.com/resumejob/awesome-resume/   #下載項目

填充內容

根據個人的喜好，可以通過文本編輯器 NodePad++ 或者開發工具 VS Code 修改 HTML 頁面。這里我用的是 VS Code 打開的。

打開 awesome-resume\free\free_resume.html 文件，這個文件就是我們要寫的簡歷。閱讀源碼可知，找到下面對應區域就是要修改的內容：

<!-- base-info指基礎信息，包括頭像，姓名，郵箱，電話，鏈接等  -->
<!-- 個人簡介部分 -->
<!-- 技能列表部分 -->
<!-- 工作經歷部分 -->
<!-- 教育經歷部分 -->
<!-- 志愿者工作部分 -->

根據自己的需要可以對頁面的元素進行增刪操作。此項目的說明文檔 README.md 也包含很多寫簡歷常用的例句，可以供我們可以借鑒一下！

關鍵內容高亮

簡歷主要是對自己的簡單介紹，當別人第一眼看到你的簡歷，就能通過一些高亮內容所吸引，然后繼續閱讀你的簡歷。所以不管你沒有經驗，又或者經驗特別豐富，簡歷需要高亮你的一些技術專長、工作亮點等。高亮關鍵內容使用 <b></b> 標簽。

添加小圖標

這里提供兩個網站：

fontawesome 官網
fontawesome 中文官網

根據自己的需求可自定義頁面的圖標。打開小圖標網站，選擇你需要的圖標：

復制如下代碼添加到你需要的位置：

<i class="fab fa-github"></i>

樣式調整

一般寫樣式有兩種方式：內聯樣式、外部樣式。

內聯樣式即直接在 HTML 元素上添加樣式，例如：

 <p style="position: relative;left: 22px;font-size: 15px;">規模：30人 | 時長：7個月</p>

外部樣式即創建樣式文件，在樣式文件中定義樣式，然后在需要的 HTML 頁面引用樣式文件并使用，例如：

my.css 文件內容如下：

.banner-div {
    background-image: url("../imgs/banner.png"); 
    background-repeat: no-repeat;
    height: 24px;
    display: block;
    padding-top: 3px;
    padding-left: 6px;
    margin-bottom: 10px;
}

free.html 文件引入 my.css 文件。

<link rel="stylesheet" href="css/my.css">

頁面中使用外部樣式如下：

<div class="banner-div">
   <span class="banner-span">
       <i class="white-icon fas fa-user"></i> 個人簡介
   </span>
</div>

生成 PDF 文件

執行如下命令，即可將 HTML 轉化為 PDF 文件。

cd D:\projects\awesome-resume
python3 convert.py  #html 格式轉為 pdf

最終的效果如下圖：

前端項目生成簡歷

準備工作

掌握 Git 基本指令：克隆代碼（git clone），更新代碼（git pull），添加代碼（git add），提交代碼（git push）。
掌握 HTML、CSS 基本語法，掌握 HTML 常用標簽的含義。
掌握 yaml 語法，yaml 是專門用來編寫配置文件的語言，簡潔又方便。
安裝 Node.js 環境，并且 Node.js 版本大于 8.5.0。
若需要對項目改造，需要掌握 Vue 語法。

寫簡歷

安裝 Node.js

Node.js 下載地址，根據自己的操作系統（32 位 / 64 位），下載對應的 msi 安裝文件后，雙擊打開安裝，next 即可安裝完成。

使用 WIN + R 快捷鍵打開快捷輸入，輸入 CMD 打開命令行窗口，輸入 node -v 查看 Node.js 版本。顯示如下內容表示 Node.js 安裝成功。

下載項目

使用下面命令，將項目下載到本地：

cd D:\projects    #切換到本地目錄
git clone https://github.com/Ovilia/cv    #下載項目

修改內容

在 resume/ 目錄中撰寫你的簡歷。data.yml 文件寫簡歷需要呈現的內容。id.jpg 替換為你自己的證件。

如果本項目要在 Windows 下運行，需修改 data.yml 文件字符集為 UTF-8，這里我通過 Nodepad++ 修改的。

其他文本編輯器也可以修改文件字符集。

data.yml 的內容如下：

/* #*/ export const PERSON = `
name:
  first: 王
  middle: 小
  last: 二
  about: 嗨，我叫王小二。我只是最無聊的人可以想象。我喜歡從后院的樹上收集樹葉并進行記錄。每次我吃不均勻的花生。我不是機器人。請雇用我。
position: Web 前端開發工程師
......
contact:
  email: huaairen@sina.com
  phone: 13366547894
  street: 科技路 99號
  city: 陜西西安
  website: blog.restlessman.cn
  github: github.com/hellowHuaairen
# en, de, fr, pt, ca, cn, it, es, th, pt-br, ru, sv, id, hu, pl, ja, ka, nl, he, zh-tw, lt, ko, el, nb-no
lang: cn   #這里表示顯示的語言，cn 表示中文顯示
`

修改 .eslintrc.json 文件內容，將下面內容中“unix”改為“windows”，因為我本地是 Windows 環境。

    "linebreak-style": [
      "error",
      "unix"
    ],

運行項目

在項目根目錄，執行下面代碼就可以運行項目：

npm install  #安裝依賴
npm run dev  #本地運行

打開瀏覽器，在瀏覽器中訪問：http://localhost:8080/home。

項目提供了 9 種簡歷模板，點擊哪一種模板會自動生成對應簡歷。如下圖：

生成簡歷

在項目根目錄，使用 WIN + R 快捷鍵打開命令行窗口，執行 npm run export 命令，項目會讀取 resume 目錄下的數據（yml 文件內容和 id.jpg），會在 PDF 目錄下生成所有模板的簡歷。根據自己的需求選擇相應的簡歷。

總結

本文分享了三種方式寫個人簡歷，它們各有特點：

第一種方式是基于 Markdown 、HTML、CSS 語法為基礎寫個人簡歷，在線寫簡歷不需要安裝任何軟件，本地寫簡歷需要安裝 Typora 工具，兩種方式都操作比較靈活，高度自定義。
第二種是基于 HTML、CSS，高度自定義。需要寫 HTML 代碼來實現的，依賴于瀏覽器預覽頁面效果。還需要安裝 Python 開發環境和兩個插件。生成簡歷只需一行命令就可將 HTML 格式的文件轉化為 PDF 格式。此方式前期準備工作稍微麻煩一些，環境安裝好后期使用特別方便。
第三種方式是基于 Node.js 的項目，yml 文件添加簡歷相關內容，保存 yml 文件會自動刷新頁面效果，并可以通過命令直接生成多種樣式的 PDF 格式簡歷，也支持部署項目，在線訪問個人簡歷。安裝簡單，支持自定義簡歷模板。

在線咨詢

上一篇：如何通過CSS將hr設置為左對齊
下一篇：前端開發不得不了解的HTML5標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

純div+css手寫html簡單小簡歷

Markdown 內容生成簡歷

準備工作

寫簡歷

Markdown 基本語法

在線寫簡歷

生成簡歷

本地寫簡歷

添加小圖標

單頁面 HTML 代碼生成簡歷

準備工作

寫簡歷

安裝 Python 開發環境

安裝 wkhtmltopdf 和 PDFKit 插件

下載項目

填充內容

關鍵內容高亮

添加小圖標

樣式調整

生成 PDF 文件

前端項目生成簡歷

準備工作

寫簡歷

安裝 Node.js

下載項目

修改內容

運行項目

生成簡歷

總結

您的項目需求