『Others』markdown简历制作

最近准备找实习，需要做一份简历，这里来介绍一些简单的建立制作方法，都是一些很基础的东西，还有一些博主简历制作中遇到的一些坑。

工具安装

首先，博主这里使用的是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二维码：