最近准备找实习,需要做一份简历,这里来介绍一些简单的建立制作方法,都是一些很基础的东西,还有一些博主简历制作中遇到的一些坑。
工具安装
首先,博主这里使用的是Typora软件来写的简历,我们就从它的下载安装开始。
点击下面链接下载安装包:
Typora官网
下载链接
提取码:w96j
下载完成后,双击安装包,无脑下一步就好。
安装完成,打开效果如下:
简历制作
因为我们制作简历需要用到图片,而且图片还要放到右上角,所以一些简单的markdown可能不太够用,但是markdown可以内嵌html语言。所以我们使用html语言来书写。
首先我们先导入一张图片,将其放到右上角。
<!--将图片设为浮动,在右边-->
<div style="float:right">
<!--设置图片路径,设置显示宽度为200-->
<img src="./img.jpeg" width="200">
</div>
效果如下:
然后我们需要在图片的左边开始写入信息,包括个人信息等等。
<!--将图片设为浮动,在右边-->
<div style="float:right">
<!--设置图片路径,设置显示宽度为200-->
<img src="./img.jpeg" width="200">
</div>
<!--文字信息设为浮动,在左边-->
<div style="float:left">
<!--一级标题-->
<h1>
个人信息
</h1>
<!--无序列表-->
<ul>
<li>姓名:绿谷出久</li>
<li>性别:男</li>
<li>职业:英雄</li>
<li>偶像:欧尔麦特</li>
<li>口头禅:哈哈</li>
<li>等等</li>
</ul>
<!--一级标题-->
<h1>
教育经历
</h1>
<!--无序列表-->
<ul>
<li>雄英高中</li>
</ul>
</div>
效果如下:
当左边的文字和右边的图片高度差不多时,我们再写另外一个div,继续完成下面的信息。
<!--将图片设为浮动,在右边-->
<div style="float:right">
<!--设置图片路径,设置显示宽度为200-->
<img src="./img.jpeg" width="200">
</div>
<!--文字信息设为浮动,在左边-->
<div style="float:left">
<!--一级标题-->
<h1>
个人信息
</h1>
<!--无序列表-->
<ul>
<li>姓名:绿谷出久</li>
<li>性别:男</li>
<li>职业:英雄</li>
<li>偶像:欧尔麦特</li>
<li>口头禅:哈哈</li>
<li>等等</li>
</ul>
<!--一级标题-->
<h1>
教育经历
</h1>
<!--无序列表-->
<ul>
<li>雄英高中</li>
</ul>
</div>
<!--新建一个div模块-->
<div>
<!--一级标题-->
<h1>
获奖经历
</h1>
<!--无序列表-->
<ul>
<li>雄英体育祭障碍物赛跑第一名;雄英体育祭障碍物赛跑第一名;雄英体育祭障碍物赛跑第一名;雄英体育祭障碍物赛跑第一名;雄英体育祭障碍物赛跑第一名</li>
<li>雄英期末考试和爆豪胜己合作打败欧尔麦特;雄英期末考试和爆豪胜己合作打败欧尔麦特;雄英期末考试和爆豪胜己合作打败欧尔麦特;雄英期末考试和爆豪胜己合作打败欧尔麦特</li>
</ul>
</div>
我们先来看效果:
但是这里还有一个问题,我们将markdown导出为pdf看一下:
点击文件,点击导出为pdf。
然后,选个保存路径,起个名字,点击保存。
导出PDF成功。
我们打开PDF来看一下:
从上述效果可以看出,我们期望的新建的div块应该在上面两个div块的下方,但是它跑到了两个块的中间,这是不行的,下面是解决方案:
<!--将图片设为浮动,在右边-->
<div style="float:right">
<!--设置图片路径,设置显示宽度为200-->
<img src="./img.jpeg" width="200">
</div>
<!--文字信息设为浮动,在左边-->
<div style="float:left">
<!--一级标题-->
<h1>
个人信息
</h1>
<!--无序列表-->
<ul>
<li>姓名:绿谷出久</li>
<li>性别:男</li>
<li>职业:英雄</li>
<li>偶像:欧尔麦特</li>
<li>口头禅:哈哈</li>
<li>等等</li>
</ul>
<!--一级标题-->
<h1>
教育经历
</h1>
<!--无序列表-->
<ul>
<li>雄英高中</li>
</ul>
</div>
<!--新建一个div模块-->
<div style="display:inline-block">
<!--一级标题-->
<h1>
获奖经历
</h1>
<!--无序列表-->
<ul>
<li>雄英体育祭障碍物赛跑第一名</li>
<li>雄英期末考试和爆豪胜己合作打败欧尔麦特</li>
</ul>
<!--剩下内容在这个div块里补充即可-->
</div>
注意,新建的div块要和上面的两个div块代码之间留一行空行,新建的div style设置为"display:inline-block"。前面两个div块代码之间没有空行。
按照上面修改后,我们再导出为pdf看一下效果:
现在就正常了。
最后,在用Markdown写简历的时候,有可能在最后导出为pdf时照片丢失,这里有一个解决方法:
首先使用在线工具将图片转码至base64编码。
图片转base64编码
打开网页如下:
点击选择要转换成base64的图片,就得到了base64编码:
将红框内的内容全选,然后复制。
<!--将图片设为浮动,在右边-->
<div style="float:right">
<!--设置图片路径,设置显示宽度为200-->
<img src="./img.jpeg" width="200">
</div>
然后用复制的内容去替换./img.jpeg即可。这样转成pdf图片就不会丢失了。
注意:使用"display:inline-block"后会导致上下两个div块之间多一个空行,间隙会变大,可以使用相对定位,将下面的div块向下移动15个像素即可(这里不知道为什么是向下移动,这个是博主试出来的,有懂的欢迎留言)。
<div style="position:relative;bottom:15">
</div>
最后,将简历制作的无注释源码放在下面,需要的自取:
<div>
<div style="float:right">
<img src="./img.jpeg" width="200">
</div>
<div style="float:left">
<h1>
个人信息
</h1>
<ul>
<li>姓名:绿谷出久</li>
<li>性别:男</li>
<li>职业:英雄</li>
<li>偶像:欧尔麦特</li>
<li>口头禅:哈哈</li>
<li>等等</li>
</ul>
<h1>
教育经历
</h1>
<ul>
<li>雄英高中</li>
</ul>
</div>
</div>
<div style="display:inline-block;position:relative;bottom:15px">
<h1>
获奖经历
</h1>
<ul>
<li>雄英体育祭障碍物赛跑第一名;雄英体育祭障碍物赛跑第一名;雄英体育祭障碍物赛跑第一名;雄英体育祭障碍物赛跑第一名;雄英体育祭障碍物赛跑第一名</li>
<li>雄英期末考试和爆豪胜己合作打败欧尔麦特;雄英期末考试和爆豪胜己合作打败欧尔麦特;雄英期末考试和爆豪胜己合作打败欧尔麦特;雄英期末考试和爆豪胜己合作打败欧尔麦特</li>
</ul>
</div>
最后,如果需要贴上自己的博客或者GitHub链接的,可以使用下面语法:
<!--无序列表-->
<ul>
<li>GitHub:<a href="https://github.com/sss-0916">https://github.com/sss-0916</a></li>
<li>技术博客:<a href="https://blog.csdn.net/sss_0916">https://blog.csdn.net/sss_0916</a></li>
</ul>
效果如下:
如果不想要这个下划线,代码改成如下即可:
<!--无序列表-->
<ul>
<li>GitHub:<a href="https://github.com/sss-0916" style="text-decoration:none">https://github.com/sss-0916</a></li>
<li>技术博客:<a href="https://blog.csdn.net/sss_0916" style="text-decoration:none">https://blog.csdn.net/sss_0916</a></li>
</ul>
效果如下:
我们经常去面试给面试官的都是纸质简历,所以上面的链接点不了,我们可以将链接生成二维码贴到简历上,只需手机一扫,就可以进入。
- 首先,我们进入二维码生成网站。
二维码生成 - 效果如下,我们点击网址,网址静态码,点击LOGO,上传LOGO。
- 也可以不上传LOGO,效果如下:
- 下面是一个LOGO下载网站。
LOGO下载网站 - 使用LOGO效果如下。
- 我使用的CSDN和GitHub LOGO如下。
我使用的LOGO
提取码:7cei
下面是我生成的两个二维码效果图:
- CSDN二维码:
- GitHub二维码: