本文目录一览：

个人简历用网页设计怎么做

每个人的需求可能都不一样，学哥这里先抛砖引玉，给出一个例子，大家可以在这个基础上自己发挥。

首页：

从上到下依次显示：

标题（学哥的个人简历）

简介（文本，说明学哥的基本概要情况）

工作经历（公司名／职位／职责，如有多个列表形式）

工作经验（项目名／负责内容／技术要素／相关链接，如有多个列表形式）

技术经验（表格形式，技术点／经验年数）

个人兴趣爱好（爱好／介绍）

html制作个人简历网页代码

以下是我用html的相关知识制作的个人简历网页，话不多说先看看最终效果：

如上所示项目一共分为5个部分，分别对应导航栏的5个内容。其中项目技能用的是echarts里的柱状图，作品展示用的是bootstrap里的轮播图，除此之外就是html的基础内容。下面我们展示一下项目的代码部分：

!DOCTYPE htmlhtml

head

meta charset="utf-8"

title我的个人简历/title

link rel="stylesheet" href="lib/css/color.css"

link rel="stylesheet" href=""

script src=""/script

script src=""/script

script src=""/script

/head

body

div class="jumbotron text-center" style="margin-bottom:0" id="grad1"

img src="lib/pic/1.jpg" width="80px" height="80px" /

h3黄智奇/h3

p style="font-size: 15px;"2018年升入陕西国防工业职业技术学院，br/学习软件编程，对编程有浓厚的兴趣，

在老师的指导，br/和自己的课下练习，渐渐对编程有了更深入的了解。br/在课余时间，

我喜欢唱歌、跑步和打乒乓球。br/喜好结交志同道合的朋友，一起分享学习的生活的经验。br/

有良好的团队意识，学习时认真负责。            /p

/div

nav class="navbar navbar-inverse"

div class="container-fluid"

div class="navbar-header"

button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"

span class="icon-bar"/span

span class="icon-bar"/span

span class="icon-bar"/span

/button

!--a class="navbar-brand" href="#"专业技能/a--

/div

div id="relation"

table  class="table table-striped"

tbody

tr align="center"

tda href="#email"button type="button" class="btn btn-primary btn-lg"

span class="glyphicon glyphicon-envelope"/span

/button/a/td

td a href="#email"button type="button" class="btn btn-primary btn-lg"

span class=" glyphicon glyphicon-earphone"/span

/button/a/td

tda href="" target="_blank"button type="button" class="btn btn-primary btn-lg"

span class=" glyphicon glyphicon-user"/span

/button/a/td

/tr

/tbody

/table

/div

div class="collapse navbar-collapse" id="myNavbar"

ul class="nav nav-pills nav-justified"

lia href="#main"专业技能/a/li

lia href="#project"项目经验/a/li

lia href="#myCarousel"作品展示/a/li

lia href="#education"教育经历/a/li

lia href="#relation"联系方式/a/li

/ul

/div

/div

/nav

!-- 为ECharts准备一个具备大小（宽高）的Dom --

div id="main" style="width:

50%;height:400px;left: 25%;"/div

script type="text/javascript"

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据

var option = {

title: {

text: '专业技能平均分'

},

tooltip: {},

legend: {

data:['分数'],

},

xAxis: {

data: ["Java语言","mysql数据库","Javascript语言","web开发","ssm框架","springboot框架"],axisLabel: {

// inside: true, 隐藏x轴内容

// 改变x轴字体颜色

//     textStyle: {

//         color: '#8B4500'

//     }

},

},

yAxis: {},

series: [{

name: '分数',

type: 'bar',

//改变图表颜色

color:['#8EE5EE'],

data: [85, 95, 82, 90, 80, 80]

}],

};

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

/script

ul class="list-unstyled" align="center"

liJava基础:br/

我入门时首先学的就是Java基础，然后再到Java高级开发，br/

在学习过程中老师细致的教学为我们打下了牢固的java基础。              /li

limysql数据库:br/

mysql数据库是我们大一第二学期开的课，配合Java高级开发一起学习的科目，br/

因为自己本身就喜欢数据库的一些东西，所有mysql数据库也有良好的基础。/li

liJavascript语言：br/

在学JavaScript之前我有良好的html5和css基础，所学习JavaScript时也是十分顺利的掌握了课本里的内容。/li

liweb开发:br/

web开发是我最喜爱的科目之一，servlet的学习给我启发深刻。/li

lissm框架:br/

ssm框架相比springboot而言是比较繁琐的，但是在学习和理解起来却比springboot更容易让人掌握。/li

lispringboot框架:br/

springboot框架入门起来十分迅速，在基础的使用起来也是十分方便，但查看源码时，没有ssm容易让人理解。/li

/ul

div class="container" align="center"

div class="row"

div class="col-sm-4"

h3 class="text-info" id="project"项目名称/h3

ul class="nav nav-pills nav-stacked"

li class="active"a href="#car"新能源汽车项目/a/li

lia href="#city"咕泡商城项目/a/li

lia href="#bug"爬虫项目/a/li

/ul

hr class="hidden-sm hidden-md hidden-lg"

/div

div class="col-sm-8" align="left"

h3 class="text-info"项目内容/h3

h2 id="car"新能源汽车/h2

h5企业saas工坊/h5

p新能源汽车项目是我们掌握smm框架知识后第一个实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。

该项目用到了，html5+css3，mysql数据库，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert

等技术。项目从开始到完成我们用了2个月的时间。该项目的主要是写一个汽车app社交平台，包括用户登录注册，用户上传车辆信息，统计用户车辆，分析故障车辆原因，

以及导航、朋友圈等功能一体的汽车平台。该项目用户的使用方法如下：        p1.新用户进行登录注册。/p

p2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。/p

p3.新用户上传自己车辆信息，并绑定账号。/p

p4.新用户可以上传自己车辆故障，系统自动查询车辆故障原因以及维修方案。/p

p5.用户可以添加车友，在车友圈发布求助信息等。/p

p6.用户还可以进行地图导航，以及查询公交车，出租车，飞机等交通工具的时间和行程。/p

p 通过完成这个项目，让我获得了很大的进步。不论是前端知识还是后端知识，在该项目上

都得到了充分的展示。让我也一下子吸收了很多的知识与技能，为后面的项目打下了坚实的基础。/p

/p

br

h2 id="city"咕泡商城/h2

h5企业saas工坊/h5

p咕泡商城项目是我们学完springboot之后的实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。

该项目用到了，html5+css3,mysql数据库,springboot框架,maven,web,javascript,jquery,ajax,echarts,bootstrap等技术。

项目从开始到完成我们用了10天的时间。该项目主要是写一个网上商城电商购物平台，包括用户登录注册，用户绑定信息，上传头像、昵称等个人信息，

用户主要可以在该平台上面购买各种商品，每种商品都做好了分类管理，用户点击分类名称或者准确搜索都能显示出自己想要的商品。用户点击商品就可以

链接到商品详情页面，不论是购物还是浏览商品都非常的方便。该项目用户的使用方法：        p1.新用户进行登录注册。/p

p2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。/p

p 3.用户自由购买和浏览商品信息。/p

该项目让我们体验了springboot的配置强大之处，没有繁琐的多余配置文件，所有配置都由一个配置文件解决，简化了我们smm框架配置的痛苦。      /p

br

h2 id="bug"爬虫/h2

h5企业saas工坊/h5

p爬虫项目是我们最近才做完的项目。该项目与以往项目不同，该项目是由工坊老师指导下，我们首次前后端分离合作的项目。一个团体3个人，分别做前端展示数据，后端爬取数据和数据清洗。

我在这个项目中做的是后端爬取数据。我用到了，httpclient，jsoup，webmagic，springboot，maven，mysql等技术。该项目主要是爬去51job网站上面的工作岗位，

我们主要爬取了与我们软件相关的工作岗位，共爬取了2万条数据处理并展示。该项目执行步骤如下：        p1.后端爬取数据并存到数据库。/p

p2.中间清洗数据，将数据改变为前端人员需要的格式。/p

p3.前端人员根据需求展示数据。/p

该项目让我们体会到了团队合作和团队分工明确的重要性，每个人做好属于自己的一份任务，环环相扣才能保质保量的完成项目。      /p

/div/div

/div

div id="myCarousel" class="carousel slide" style="border: solid; border-color: cornflowerblue;"

!-- 轮播（Carousel）指标 --

ol class="carousel-indicators"

li data-target="#myCarousel" data-slide-to="0" class="active"/li

li data-target="#myCarousel" data-slide-to="1"/li

li data-target="#myCarousel" data-slide-to="2"/li

li data-target="#myCarousel" data-slide-to="3"/li

/ol

!-- 轮播（Carousel）项目 --

div class="carousel-inner" align="center"

div class="item active"

img src="C:\Users\1\Desktop\gpsc.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="First slide"

/div

div class="item"

img src="C:\Users\1\Desktop\pc1.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="Second slide"

/div

div class="item"

img src="C:\Users\1\Desktop\xny.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="Second slide"

/div

div class="item"

img src="C:\Users\1\Desktop\pc2.png" style="width: 80%;height: 800px; border: solid 5px; border-color: darkgray;" alt="Third slide"

/div

/div

!-- 轮播（Carousel）导航 --

a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"

span class="glyphicon glyphicon-chevron-left" aria-hidden="true"/span

span class="sr-only"Previous/span

/a

a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"

span class="glyphicon glyphicon-chevron-right" aria-hidden="true"/span

span class="sr-only"Next/span

/a/div

div style="width: 100%; height: 220px; "

table class="table"

caption style="text-align: center;"h3 id="education" style="color: black;"教育经历/h3/caption

tbody style="text-align: center;"

tr

td2006.9.-2012.7/td

td就读于xx小学/td

/tr

tr

td2012.9-2015.7 /td

td 就读于xx初中/td

/tr

tr

td2015.9-2018.7 /td

td 就读于xx高级中学/td

/tr

tr

td2018.9-至今 /td

td 就读于陕西国防工业职业技术学院/td

/tr

/tbody/table/div

div class="jumbotron text-center" style="margin-bottom:0"

p id="email" align="left"nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;邮箱:3136484707@qq.com                                       nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;电话号码：11111111111

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;

nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;个人博客:;/p

/div

/body/html

如何制作工作简历

简历，作为面向企业的第 1 次自我介绍，是从万千竞争者当中脱颖而出的第 1 步。

在制作简历时，可能有很多求职者都是下载一份模板，套用自己的信息。

但是，将每个人特有的学习和工作经历，生硬地套用在已设计好的模板内容上，并不能把自己最出彩的内容，第一时间呈现给面试官。

同时，有些简历的视觉设计，要么用力过猛、效果夸张，要么整个页面平淡无奇、没有重点，让面试官看得头疼。

网络简历模板效果

如果一份简历，是让面试官去费力寻找线索，却无法引导和告诉他，你才是最适合这个岗位的，那就不是一份合格的简历。

我之前参加了秋叶 PPT 第三期王牌 P 计划活动，其中特意布置了一份简历作业，要求完成一套单页 A4 个人简历。

话不多说，先看我的简历设计效果！

简历模板效果

如果同学们喜欢这套简历，可去文末领取源文件。

但大虾想说的是：「只要得到一套优质的简历模板，就万事大吉了吗？」

「并不是。」

每个人的信息和经历并不一致，生硬地套用，并不能取得理想的效果，尤其是针对不同的公司和岗位，需要设计的文案内容和简历结构并不一致。

今天，大虾就带大家用四步法，搞定个人简历的修改与制作！

以下是这份简历制作的任务要求，以及个人信息：

任务要求

个人信息

知彼，了解公司需求

最能打动面试官的，是「你与岗位很合适」。

面对众多竞争者，如何凸显自己的专业能力，告诉公司，你是最适合的那一个人呢？

先胜而后求战，花时间好好了解一下未来的工作单位吧：

公司要求重点分析

通过分析职位要求和工作内容，得到 4 个关键信息：

❶ 运营节点把控能力，项目编制经验——进度，是建筑公司的利润关键；

❷ 安全管理经验，项目创新能力——安全，是建筑公司的生命线；

❸ 沟通组织协调能力——沟通能力，是多项目齐同并进工作内容的关键要求；

❹ 创新与学习能力——员工卓越进步的不竭动力。

知己，重组个人能力

▋删减非重要个人信息和实习经历

比如，在学院和学校担任的一些具体职务，没有必要详细写出。留出空间，重点突出关键成绩。

通过了英语 6 级之后，4 级就没有必要重复。

普通话等级和计算机证书，这些普遍化的证书，如果成绩不是特别突出，也没有必要一一罗列。

个人信息删减

▋个人经历匹配公司要求

根据第 1 步对公司需求的分析，对删减后的个人能力进行重组。

经历不能简单罗列，更不能老太太裹脚布，写得又臭又长。

要按个人经历与公司要求的匹配程度，模块化排列，并提炼出每个模块的主标题或者成绩关键词。

个人经历重组

个人经历重组

求胜，设计初稿框架

好钢用在刀刃上，最有用的核心内容，要放到最显眼的位置。

按照视觉阅读习惯：将个人经历模块，放在左上核心阅读部位、将学校及获奖模块，放在右上次级阅读部位。

最后是技能特长与其他信息：

初稿框架设计

像这样来搭配信息，是不是更符合阅读习惯，又不显得过于单调普通呢？

视觉阅读顺序

求战，文字填充与可视化

完成基本框架之后，就可以动手开始设计一份全新的简历啦。

在实践经历部分，用数字 1-2-3-4 做视觉引导，让面试官轻松 get 重点。

将优势特长、办公技能等非重要部分，进行可视化设计，减轻面试官阅读压力。

整体框架搭配完，每一部分的内容设计好后，一份专属的个人简历就完成啦。

这样一份重点突出，简洁大方的简历，面试官怎么忍心拒绝呢？

案例延伸

简历无最优，只有最合适。

每一份简历都应该针对不同公司和岗位，进行不同的设计。只要学会简历设计四步法，就可以按照自己的实际情况进行设计。

如果你是一名应届毕业生，名校毕业，那就应该把学校和成绩写在重点位置。

把教育背景和实践经历放在右侧主视觉区域，让面试官一眼看到。

把非重要信息组合罗列在左侧，做一个信息合集，还可以针对公司的特点，加入一些行业元素（塔吊）和行业的色彩（墨绿色）。

如果大家看到一些心动的设计案例，也可以借鉴其排版与配色，为自己所用。

比如下面这几页来自 Behance 的网页设计：

版式灵感来自 Behance

版式灵感来自 Behance

借鉴灵感网页的排版模式，完成框架设计。

网页风简历框架设计

借鉴灵感网页的色彩，选取黄色和灰色，作为强调色和纹理色。

网页风简历色彩设计

再把已设计好的文字信息填充到框架中，一份个人专属的网页风简历出炉啦：

网页风个人简历

有设计但不堆砌设计，过于平淡或浮夸都是简历的减分项。

一份清爽精致的简历，让所有经验值一目了然，同时各个技能又极度符合公司要求，是不是感觉公司的大门已经向你敞开了呢？

总结

简历的内容与视觉设计并无严格标准：合适的才是最好的，但务必要让自己的能力，最大程度匹配公司的岗位要求。

本文总结了简历设计四步法：了解公司需求-重组个人能力-设计初稿框架-文字填充与可视化。

力求知己知彼，先求胜而后求战。一起完成一份完美的简历，给自己 2020 年的求职路开个好头吧！

Html网页简历如何制作

1，使用桌面邮件程序如outlook，foxmail可以选择html模板，发送的邮件均会是html格式的。

2，使用gmail，126等邮箱其本生提供文本格式化，而格式化即使为文字添加代码只是这些代码你看不到而已，你所看到的是代码执行以后的结果，因此我估计如果你直接自行编写代码在里面也是可以格式化的，如果是这样你可以用网页编辑工具实现设计好你的简历页面然后粘贴进去即可，

3，2方法没有试过，如果不行可以采用以下方法，将简历网页做好，然后申请一个免费空间放上去，然后在给公司的邮件中写上这个网页的连接地址