分享个人在线简历制作经验

发表于 | 更新于 | 分类于 | 阅读次数：

一、成品展示

我的简历-点击查看

二、序言

  很早之前就想做一个自己的在线简历，一来学习一下html基本知识，二来也可以为自己的面试加分，三来方便分享给其他人。但是由于时间，学习问题，一直被耽搁了，趁着考研结束后的一段空余时间把他完成。经过了断断续续一个星期的折腾，终于完成了，今天把制作经验分享出来，顺便也记录学到的知识。

三、前提准备

  • hexo博客框架和Next博客主题，这个是博客环境，不是必要的。
  • html编辑环境，推荐Hbuider编辑器，支持内置服务器和外置服务器，在同一个局域网下，方便手机查看制作的网页效果
  • （为了保证网页的加载速度，我这里一般不会贴图）

四、环境配置步骤

  • 设置hexo的config.yml配置文件，对skip_render属性添加 project/**，其中project是source下的一个自定义文件夹，这样就可以避免hexo对project渲染，将改文件夹下的内容原封不动的搬移到public文件夹下，实现自定义页面。配置如下

    1
    skip_render: project/**

  • 设置next主题下的config.yml配置文件，让一个目录链接到project上。配置如下

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    menu:
      home: / || home
      about: /about/ || user
      #tags: /tags/ || tags
      categories: /categories/ || th
      archives: /archives/ || archive
      #schedule: /schedule/ || calendar
      #sitemap: /sitemap.xml || sitemap
      #commonweal: /404/ || heartbeat
      resume: /project/ || address-card

  • 开始设计简历，设计过程和上述环境无关，设计完成后直接复制到project文件夹下即可简历制作步骤

  我是初学html，有很多做的不好的地方，仅供参考。其实html制作简历和word差不多，只不过word有很多可视化的工具，看起来方便点。建议先学会怎么使用word制作简历，再来设计网页版。这里先大致介绍word简历制作方法

4.1 word简历大致排版

  • 想好自己的简历布局。

  • 用表格设计好排版，表格中可以嵌套表格。示例如下：

  • 填充内容，去除表格的边界线。
    注：一般先找现成的模板，在用上述方法进行修改，知道原理即可。

4.2 html如何与word对应

  介绍顺序，从外到内介绍。

4.2.1 页边距对应

  设置两个块（div），第一个块对应的是A4纸，第二个对应的可编写内容的部分。在第一个块里面设置好简历宽度，第二个设置好页边距，如下：

1
2
3
4
5
6
7
8
9
10
menu:
  home: / || home
  about: /about/ || user
  #tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  resume: /project/ || address-card
4.2.2 表格对应

  理论上用一个表格，在表格中套用表格就可以实现和word一样的界面。但是这样的html排版实在太差，这里采用一个新的方案，大表格使用块来代替，每个模块单独一个块，这样可读性好，减少与其他版块的关联，方便对细节进行修改。这里给出简历头部的示例如下，其他的可以去简历页面F12查看源码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div class="header">
    <div style="width: 500px; float: left;">
        <h1 style="color: darkturquoise;"><strong>姓名</strong></h1>
        <table border="0">
            <tr>
                <td style="color: darkturquoise;"><strong>联系方式：</strong></td>
                <td>1851****6164</td>
            </tr>
            <tr>
                <td style="color: darkturquoise;"><strong>电子邮箱：</strong></td>
                <td>
                    <a href="">1005714267@qq.com</a>
                </td>
            </tr>
            <tr>
                <td style="color: darkturquoise;"><strong>个人博客：</strong></td>
                <td>
                    <a href="http://www.zwenc.cn">www.zwenc.cn</a>
                </td>
            </tr>
        </table>
    </div>

    <div style="float: right; margin-right: 30px;margin-top: 20px;">
        <img src="img/HandsomeBoy.jpg" width="100px" />
    </div>
</div>

  源码在结构性上面设计的有些不规范，可供参考

4.3 添加下载PDF功能

4.3.1 下载功能实现

  使用便签，和连接其他网页一样，把PDF地址作为源地址即可，在电脑上点击即可下载，手机上需要一顿操作才可下载。代码如下：

1
<a class="DownButtonNormal" name="DownLoadHistEvent" style="color:#ffffff;background: #AFC1DC;color: #696B83;TEXT-DECORATION: none" download="郑文简历.pdf" href="source/郑文简历.pdf">Download PDF</a>
4.3.2 按钮紧贴简历旁，不随页面移动

  设置按钮位置为fixed，也就是浮在文本上层，这时候就会脱离文本流，无法获取底部文本的具体问题。这时只需要再建立一个宽度和底部文本相同的div块并设置为fixed，在这个div块中添加按钮设置属性float=right，既可以解决。

html代码：

1
2
3
4
5
<div class="ct">
    <div class="dg">
        <!--下载按钮  -->
    </div>
</div>

css代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.ct{
	width: 950px;
	top: 0px;
	left: 0px;
	right: 0px;
	height: auto;
	position: fixed;
	margin: 20px auto;
}
.dg{
	width: auto;
	right: 20px;
	float: right;
}

五、一些问题

5.1 div如何页面居中

  CSS代码如下：

1
2
3
4
5
6
7
8
.divhead {
	width: 720px;
	height: auto;
	background: #ffffff;
	margin: 20px auto;     /*div页面居中*/
	box-shadow: 2px 4px 6px #000;
	border: 1px solid #000;
}

5.2 div模仿A4纸阴影

  css代码如下：

1
2
box-shadow: 2px 4px 6px #000;
border: 1px solid #000;

六、结束语

  有问题欢迎留言，内容持续补充。

-------------本文结束感谢您的阅读-------------
0%