以下是我用html的相关知识制作的个人简历网页，话不多说先看看最终效果：
如上所示项目一共分为5个部分，分别对应导航栏的5个内容。其中项目技能用的是echarts里的柱状图，作品展示用的是bootstrap里的轮播图，除此之外就是html的基础内容。下面我们展示一下项目的代码部分：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>我的个人简历</title>
<link rel="stylesheet" href="lib/css/color.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></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">
<td><a 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>
<td><a href="https://me.csdn.net/qq_44892582" 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">
<li><a href="#main">专业技能</a></li>
<li><a href="#project">项目经验</a></li>
<li><a href="#myCarousel">作品展示</a></li>
<li><a href="#education">教育经历</a></li>
<li><a href="#relation">联系方式</a></li>
</ul>
</div>
</div>
</nav>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:
50%height:400pxleft: 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">
<li>Java基础:<br/>
我入门时首先学的就是Java基础，然后再到Java高级开发，<br/>
在学习过程中老师细致的教学为我们打下了牢固的java基础。 </li>
<li>mysql数据库:<br/>
mysql数据库是我们大一第二学期开的课，配合Java高级开发一起学习的科目，<br/>
因为自己本身就喜欢数据库的一些东西，所有mysql数据库也有良好的基础。</li>
<li>Javascript语言：<br/>
在学JavaScript之前我有良好的html5和css基础，所学习JavaScript时也是十分顺利的掌握了课本里的内容。</li>
<li>web开发:<br/>
web开发是我最喜爱的科目之一，servlet的学习给我启发深刻。</li>
<li>ssm框架:<br/>
ssm框架相比springboot而言是比较繁琐的，但是在学习和理解起来却比springboot更容易让人掌握。</li>
<li>springboot框架:<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>
<li><a href="#city">咕泡商城项目</a></li>
<li><a 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社交平台，包括用户登录注册，用户上传车辆信息，统计用户车辆，分析故障车辆原因，
以及导航、朋友圈等功能一体的汽车平台。该项目用户的使用方法如下： <p>1.新用户进行登录注册。</p>
<p>2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。</p>
<p>3.新用户上传自己车辆信息，并绑定账号。</p>
<p>4.新用户可以上传自己车辆故障，系统自动查询车辆故障原因以及维修方案。</p>
<p>5.用户可以添加车友，在车友圈发布求助信息等。</p>
<p>6.用户还可以进行地图导航，以及查询公交车，出租车，飞机等交通工具的时间和行程。</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天的时间。该项目主要是写一个网上商城电商购物平台，包括用户登录注册，用户绑定信息，上传头像、昵称等个人信息，
用户主要可以在该平台上面购买各种商品，每种商品都做好了分类管理，用户点击分类名称或者准确搜索都能显示出自己想要的商品。用户点击商品就可以
链接到商品详情页面，不论是购物还是浏览商品都非常的方便。该项目用户的使用方法： <p>1.新用户进行登录注册。</p>
<p>2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。</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万条数据处理并展示。该项目执行步骤如下： <p>1.后端爬取数据并存到数据库。</p>
<p>2.中间清洗数据，将数据改变为前端人员需要的格式。</p>
<p>3.前端人员根据需求展示数据。</p>
该项目让我们体会到了团队合作和团队分工明确的重要性，每个人做好属于自己的一份任务，环环相扣才能保质保量的完成项目。 </p>
</div></div>
</div>
<div id="myCarousel" class="carousel slide" style="border: solidborder-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: 800pxborder: solid 5pxborder-color: lightslategray" alt="First slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\pc1.png" style="width: 80%height: 800pxborder: solid 5pxborder-color: lightslategray" alt="Second slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\xny.png" style="width: 80%height: 800pxborder: solid 5pxborder-color: lightslategray" alt="Second slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\pc2.png" style="width: 80%height: 800pxborder: solid 5pxborder-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>
<td>2006.9.-2012.7</td>
<td>就读于xx小学</td>
</tr>
<tr>
<td>2012.9-2015.7 </td>
<td>就读于xx初中</td>
</tr>
<tr>
<td>2015.9-2018.7 </td>
<td>就读于xx高级中学</td>
</tr>
<tr>
<td>2018.9-至今 </td>
<td>就读于陕西国防工业职业技术学院</td>
</tr>
</tbody></table></div>
<div class="jumbotron text-center" style="margin-bottom:0" >
<p id="email" align="left">         
         
         
         
  邮箱:3136484707@qq.com          
         
         
         
         电话号码：11111111111
         
         
         
         
         个人博客:https://me.csdn.net/qq_44892582</p>
</div>
</body></html>
撰写个人简历是前端开发个人求职者求职的第一步，也是前端开发个人求职者求职的必备文件。下面是我整理的前端开发简历 范文 ，以供大家阅读。前端开发简历范文(一)
个人概况
姓 名：*****
出生年月：1992-1
性 别：男
身 高：171CM
婚姻状况：未婚
籍 贯：福建莆田市
政治面貌：共青团员
目前所在地：义乌稠州北路601号
求职意向
期望职位：网页设计/电脑美工
职位类型：全职 工作地点：全国各地
工资待遇：暑期工 1000-1500 住房要求：面议
工作 经验
工作经验：1年
教育 背景
最高学历：中专
毕业 院校：义乌市城职校
所学专业：PHP程序员
计算机能力：精通
其它 能力：web前端开发
前端开发简历范文(二)
(女，22岁)
求 职 位：web前端开发 期望薪资：3000-5000元/月
目前职位：网页设计/制作 学 历：大专
工作经验：1-3年 现居住地：上海徐汇上海植物园
联系电话： 电子邮箱：
自我评价
本人在校表现优秀，连年获得国家奖学金、三好学生优秀班干部等荣誉。获得助理电子商务师、全国计算机高新技术证书证书。我乐观向上、有较强的团队意识，做事认真负责。现经过培训，已掌握web前端开发技术，熟悉HTML/XHTML、CSS等网页制作技术，熟悉页面架构及布局，掌握div+css制作符合W3C标准的静态网页熟悉JavaScript脚本，使用过Query框架开发技术入门Access数据库、c#、asp.net等后台应用的基础。了解html5\css3的基础用法用过了解Photoshop、flash、Fireworks、Dreamweaver等软件应用。
工作经验
中国电信
2011-12 至 2012-2任职网页设计/制作薪资2000-3000元/月
工作职责：独立完成中国电信积分商城内页设计，修改，切图，完成页面制作，制作符合W3C规范的静态页面，达到各种浏览器的兼容。
上海谷宇 广告 公司
2012-2 至 现在任职网页设计/制作薪资2000-3000元/月
工作职责：独立设计网站的平面，然后切图，制作成符合W3C标准的网页，达到各大主流浏览器的兼容，传上服务器，管理后台信息更新，兼顾日常网络推广
教育经历
2009-9 至 2012-6海南经贸职业技术学院电子商务专业
霍倩云语言能力
英语：一般
前端开发简历范文(三)
基本信息
姓名：xx
性别：男
出生日期：1992-4
婚姻状况：未婚
联系电话：×××××××××××
电子邮箱：
应聘岗位：Web前端开发
专业技能
计算机语言：HTML、CSS、JS、C++、Flash/Flex、Silverlight、XML
网页编辑器：Adobe Dreamweaver、Frontpage、CSSDesk、Drawter
数据库软件：Oracle、SQL Sever、Access
*** 作系统 ：Windows、Linux、Unix、iOS
编程软件：Delphi、VC++
Photoshop证书，网页设计师证书
工作经历
2015.02-2015.05××有限公司PHP开发工程师
主要是使用HTML标记、div+css+javascript Dom *** 作等前端WEB技术进行网站的开发与制造
使用mvc思想、oop面向对象思想、ThinkPHP模板框架、基于jQuery的EasyUI框架、Smarty模板引擎等技术来做项目开发
2013.09-2014.08CRM管理系统数据库和网页设计
负责编写详细需求分析和客户管理模块
实现了客户添加、客户修改、客户删除、批量删除客户、分页等几大功能
分别用到Myeclipse开发工具、orcal数据库、ssh、javascript、jquery等开发技术，现几大功能运行稳定，运算速度明显变快
教育背景
2010.09-2014.06广州大学计算机网络工程本科
获得证书
大学英语六级
全国计算机等级证书三级 网络技术
自我评价
工作积极，并且性格开朗，服从安排，吃苦耐劳
在前端开发个人求职者的求职中，个人求职信跟个人简历起着同样重要的作用，下面是我为大家精心推荐的前端开发个人求职信范文，希望能够对您有所帮助。
前端开发个人求职信范文
尊敬的领导：
您好!
首先感谢您在百忙之中抽出时间阅读我的求职信。
我是xx水利电力职业技术学院计算机信息工程系的一名学生，即将面临毕业。xx水利电力职业技术学院是教育部1999年7月26日批准成立的一所普通高等院校。学院前身是1952年10月成立的xx土木水利工程学校，至今已有五十四年的历史。在这五十四年中，学校的名称几经变异。1958年—1962年曾升格为xx水利电力学院(本科层次)，“”期间学院停办。1973年5月复办后定名为xx省水利电力学校(中专)，1999年7月经教育部批准，升格为xx水利电力职业技术学院。建校至今，已培养了3万多名技术人才，他们中的大多数已成为广东省乃至国内其他一些省份水利电力行业及相关行业的中坚力量，为各地的经济建设和水利事业发展做出了重要贡献。例如计算机应用求职信范文。
三年来，在师友的严格教益及个人的努力下，我吸取了丰富的专业知识并锻炼了自己的能力使我具备了扎实的专业基础知识，系统地掌握了c语言、汇编语言、asp.net、java，数据库原理、linux网络 *** 作系统。局域网的组建或局域网广域网的交换与路由设计实现和维护等有关理论熟悉涉外工作常用礼仪具备较好的英语听、说、读、写、译等能力能熟练 *** 作计算机办公软件。计算机专业 自我介绍 实训问题。同时，我利用课余时间广泛地涉猎了大量书籍，不但充实了自己，也培养了自己多方面的技能。更重要的是，严谨的学风和端正的 学习态度 塑造了我朴实、稳重、创新的性格特点。
最后再次感谢您耐心的阅读了我的求职信。收笔之际，郑重地提一个小小的要求： 无论您是否选择我，尊敬的领导，希望您能够接受我诚恳的谢意!
祝愿贵单位事业蒸蒸日上!
此致
敬礼!
XXX
XXXX年XX月XX日
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）