html个人简历网页

  • 效果图
  • html在线运行传送门
  • 源码
  • 声明

效果图

html在线运行传送门

源码

<!DOCTYPE html>
<html lang="en">
<head><title>王宇东的个人简历</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 引入 bootstrap4.js --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script><!-- 引入 echarts主题 --><script src="https://www.runoob.com/static/js/wonderland.js"></script><!-- 樱花特效引入 --><!-- <script src="https://files.cnblogs.com/files/quaint/sakuraPlus.js"></script> --><!-- 唯美标签引入 --><script src="./wmbq.js" type="text/javascript" charset="utf-8"></script><style>#wmbq{position:relative;height:190px;margin:10px auto 10px;}#wmbq a{position:absolute;color:#FFFFFF;text-decoration: none;text-align:center;text-overflow:ellipsis;white-space:nowrap;top:0;left:0;padding:3px 5px;border:0;transition:none;}#wmbq a:hover{background: none; display:block;}#wmbq a:nth-child(n){display:inline-block;line-height:18px;text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px red, 0 0 5px red, 0 0 5px red, 0 0 5px red, 0 0 5px red;}#wmbq a:nth-child(2n){text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177, 0 0 5px #FF1177;}#wmbq a:nth-child(3n){text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF, 0 0 5px #228DFF;}#wmbq a:nth-child(4n){text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000, 0 0 5px #000000;}#wmbq a:nth-child(5n){text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc, 0 0 5px #00ffdc;}#wmbq a:nth-child(6n){text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de, 0 0 5px #ff00de;}</style><style>/* 背景渐变色渲染原理 */body{ min-height: 100%; background: linear-gradient(#ffffff,#FFFAD0); }.fakeimg {height: 380px;background: #aaa;}#grad1 {height: 400px;background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(16,33,106,1));}</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50"><div class="jumbotron text-center" style="margin-bottom:0" id="grad1"><br/><h1>王宇东 21岁</h1><h2>☾JavaWeb☆软件技术☆CSDN Lv4☽</h2><br/><p>软件设计有两种方式：一种方式是,使软件过于简单,明显没有缺陷；另一种方式是,使软件过于复杂,没有明显的缺陷。—C.A.R. Hoare</p><h3>想应聘的岗位:钱多就行</h3><br/><div class="container">          <table class="table table-striped"><thead><tr><th><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3235483746,549061446&fm=26&gp=0.jpg" alt="logo" style="width:40px;">xyecy1314@qq.com</th><th><img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=507605381,3084649466&fm=26&gp=0.jpg" alt="logo" style="width:40px;">156-1963-2607</th></tr></thead></table></div>
</div>
<!-- 滚动监听 -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  <!-- logo --><a class="navbar-brand" href="#"><img src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/edca5131cdf6336989582c5d44af5652_222_222.jpg" alt="logo" style="width:40px;"></a><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#section1">专业技能</a></li><li class="nav-item"><a class="nav-link" href="#section2">项目经验</a></li><li class="nav-item"><a class="nav-link" href="#section3">自我展示</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">教育经历</a><div class="dropdown-menu"><a class="dropdown-item" href="#section41">教育履历</a><a class="dropdown-item" href="#section42">工作履历</a></div></li></ul>
</nav><div id="section1" class="container-fluid" style="padding-top:70px;padding-bottom:70px"><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width:100%;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'),'wonderland');var dataAxis = ['Java语言', '实用英语(一)', '计算机应用基础', '高等数学(理工类)', 'Java高级开发' , '实用英语(二)', '数据库应用', '网页制作', 'Spring框架技术', 'Android开发', 'JQuery框架技术', '动态网站开发'];var data = [89.6, 72.8, 92, 84, 60.4, 79, 79, 86.8, 84.8, 82.8, 83.6, 83.6];var yMax = 100;var dataShadow = [];for (var i = 0; i < data.length; i++) {dataShadow.push(yMax);}option = {tooltip: {trigger: 'axis',axisPointer: {            // 坐标轴指示器，坐标轴触发有效type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'}},title: {text: '专业技能',subtext: '大学成绩单'},xAxis: {data: dataAxis,axisLabel: {inside: true,textStyle: {color: '#fff'}},axisTick: {show: false},axisLine: {show: false},z: 10},yAxis: {axisLine: {show: false},axisTick: {show: false},axisLabel: {textStyle: {color: '#999'}}},dataZoom: [{type: 'inside'}],series: [{ // For shadowname:'总分',type: 'bar',itemStyle: {color: 'rgba(0,0,0,0.05)'},barGap: '-100%',barCategoryGap: '40%',data: dataShadow,animation: false},{type: 'bar',itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#83bff6'},{offset: 0.5, color: '#188df0'},{offset: 1, color: '#188df0'}])},emphasis: {itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{offset: 0, color: '#2378f7'},{offset: 0.7, color: '#2378f7'},{offset: 1, color: '#83bff6'}])}},data: data}]};// Enable data zoom when user click bar.var zoomSize = 6;myChart.on('click', function (params) {console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);myChart.dispatchAction({type: 'dataZoom',startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]});});// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></div><div id="section2" class="container-fluid" style="padding-top:70px;padding-bottom:70px"><h5>项目经验</h5><p>学习项目</p><div class="container"><table class="table table-striped table-hover"><thead><tr><th>学习项目</th><th>涉及技术</th><th>所用时间</th></tr></thead><tbody><tr><td>实现登录与注册</td><td>Eclipse:Spring,jdbc,MySQL,JSP(html5+css3+js),代码规范</td><td>30天</td></tr><tr><td>新能源汽车项目</td><td>Eclipse:SpringMVC,Ajax,Mybatis,MySQL,JSP,Bootstrap,Maven,使用Linux(云平台发布),百度地图SDK申请调用</td><td>30天</td></tr><tr><td>Java入门案例汉化教学</td><td>IDE(分工完成):Java数组,翻译,Word文档编写,教学视频录制与剪辑</td><td>7天</td></tr><tr><td>岗位爬取并展示</td><td>IDEA(小组合作):Jsoup+HttpClient,WebMagic,MySQL,Echarts,Maven,jquery实现表头固定表格自滚动</td><td>20天</td></tr><tr><td>个人简历网站制作</td><td>VSCode(自我创新):bootstrap4,Echarts,Css3(透明-背景渐变色,背景渲染原理),邮我,滚动监听</td><td>10天</td></tr></tbody></table></div></div><div id="section3" class="container-fluid" style="padding-top:70px;padding-bottom:70px"><div class="container" style="margin-top:30px"><div class="row"><div class="col-sm-4"><h2>About Me</h2><h5>my photo:</h5><div class="fakeimg"><img src="http://m.qpic.cn/psc?/V13Oytc21Z27jf/UbDh**QEFrkBQEvKgeO0F2**NsUaYUQt6ZNsa9yJTFGXnFQvUvywpBoqvewxcnmSK190V6ysZSMru6fy5SdHpg!!/b&bo=OATcBzgE3AcRCT4!&rf=viewer_4" height="400px" width="350px"></div><p>特点:<br/>&nbsp;&nbsp;&nbsp;&nbsp;身高190cm,喜欢日语,具有创新思维<br/>&nbsp;&nbsp;&nbsp;&nbsp;吃苦耐劳,踏实肯干,服从团队管理和上级安排<br/>&nbsp;&nbsp;&nbsp;&nbsp;在校期间有丰富的学生干部工作经验,自律强，有过硬件维修的工作经验</p><h3>My CSDN</h3><ul class="nav nav-pills flex-column"><li class="nav-item"><a class="nav-link active" target="_blank" href="https://blog.csdn.net/weixin_43701595">我的博客</a></li><!-- <li class="nav-item"><a class="nav-link" target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/103630365">javaweb+mysql登录注册实现</a></li><li class="nav-item"><a class="nav-link" target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/106332933">Java爬虫项目(一 爬取)(岗位爬取并展示)WebMagic+MySQL+Echarts+IDEA</a></li><li class="nav-item"><a class="nav-link" target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/106436568">jquery实现表头固定表格自滚动</a></li><li class="nav-item"><a class="nav-link" target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/106555648">html背景渲染原理(body透明渐变)</a></li> --></ul><div id="wmbq"><a target="_blank" href="https://blog.csdn.net/weixin_43701595" title="·♪关于博客 - 个人资料 - 博客中心♪ ♩ ♫ ">我的博客</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/category_10088814.html" title="·♪项目经验(后端)♪ ♩ ♫ ">后端编写</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/category_10088816.html" title="·♪前端编写(推荐)♪ ♩ ♫ ">前端编写</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/category_10088807.html" title="·♪工具经验(杂)♪ ♩ ♫ ">工具经验</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/106721033" title="·♪html怎样固定页面的高(固定容器高度 溢出隐藏)♪ ♩ ♫ ">页面高度固定</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/106615199" title="·♪Java爬虫项目(四 可视化)♪ ♩ ♫··· ">数据库可视化</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/106436568" title="·♪jquery实现表头固定表格自滚动♪ ♩ ♫ ">表格数据自滚动</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/104947857" title="·♪java超简单的环境变量 配置+详解♪ ♩ ♫ ">环境变量配置</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/106555648" title="·♪html背景渲染原理(body透明渐变)♪ ♩ ♫ ">背景渲染原理</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/103562081" title="·♪git教程(从安装到提交文件)♪ ♩ ♫ ">GitLab仓</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/103630365" title="·♪javaweb+mysql登录注册实现♪ ♩ ♫ ">登录注册实现</a><a href="JavaScript:" title="·♪Java前端基础♪ ♩ ♫ ">Html5+Css3+JavaScript+Jquery</a><a href="JavaScript:" title="·♪Java前端进阶♪ ♩ ♫ ">bootstrap4+Echarts+WebMagic</a><a href="JavaScript:" title="·♪JavaWeb开发基础♪ ♩ ♫ ">Java EE(Spring MVC+Spring+MyBatis+Redis)</a><a href="JavaScript:" title="·♪JavaWeb后端进阶♪ ♩ ♫ ">SpringBoot</a><a href="JavaScript:" title="·♪系统+云平台发布♪ ♩ ♫ ">Windows7/10+Linux+云平台发布</a><a href="JavaScript:" title="·♪数据库♪ ♩ ♫ ">MySQL+MongoDB</a><a href="JavaScript:" title="·♪工具♪ ♩ ♫ ">office办公软件+Eclipse+idea+IDE+Vs Code</a></div><hr class="d-sm-none"></div><div class="col-sm-8"><h2>Look Me</h2><h5>基本信息</h5><div class="container">         <table class="table table-striped table-hover"><thead><tr><th>政治面貌</th><th>中共党员</th></tr></thead><tbody><tr><td>学历</td><td>大专</td></tr><tr><td>校园经历</td><td>因参加工坊培训辞职副班长,参加过校学生会,目前在校易班工作站技术部担任副部长</td></tr><tr><td>获得荣誉</td><td>国家励志奖学金,校内二等奖学金2次,优秀干部,优秀团员等,共十项校级荣誉证书</td></tr><tr><td>掌握技能</td><td>JavaWeb，JSP+H5+C3，MySQL，Ajax，Spring，Bootstrap4，Echarts</td></tr><tr><td>自我评价</td><td>熟练使用office等常用办公软件,善于沟通合作,良好的时间观念,高效的学习方式</td></tr></tbody></table></div><br><h2>最新作品展示</h2><h5>岗位爬取并展示</h5><div class="fakeimg"><img src="https://img-blog.csdnimg.cn/20200608114511438.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzcwMTU5NQ==,size_16,color_FFFFFF,t_70" alt="logo" style="width:100%;"></div></div></div></div></div><div id="section41" class="container-fluid" style="padding-top:70px;padding-bottom:70px"><h5>教育经历</h5><p>教育履历</p><div class="container-fluid"><div class="row"><div class="col" style="background-color:#FFFAD0;"><table class="table table-bordered"><thead><tr><th>就读学校</th><th>学历</th><th>地点</th></tr></thead><tbody><tr><td>实验中学</td><td>初中</td><td>陕西省渭南市合阳县</td></tr><tr><td>合阳中学</td><td>高中</td><td>陕西省渭南市合阳县</td></tr><tr><td>陕西国防学院</td><td>大专</td><td>陕西省西安市鄠邑区</td></tr></tbody></table></div><div class="col" style="background-color:#FFFAD0;"><table class="table table-bordered"><thead><tr><th>大学所学专业</th><th>时间</th></tr></thead><tbody><tr><td>软件技术</td><td>大一</td></tr><tr><td>企业SaaS</td><td>大二</td></tr><tr><td>企业SaaS+实习期</td><td>大三</td></tr></tbody></table></div><div class="col" style="background-color:#FFFAD0;"><table class="table table-bordered"><thead><tr><th>未来规划</th><th>达成所需时长</th></tr></thead><tbody><tr><td>初级程序员</td><td>毕业1-5年</td></tr><tr><td>项目主力</td><td>毕业6-10年</td></tr><tr><td>项目经理</td><td>毕业11-15年</td></tr></tbody></table></div></div></div></div><div id="section42" class="container-fluid" style="padding-top:70px;padding-bottom:70px"><p>工作履历</p><div class="container-fluid"><div class="row"><div class="col" style="background-color:#FFFAD0;"><table class="table table-bordered"><thead><tr><th>公司</th><th>地点</th><th>时间</th></tr></thead><tbody><tr><td>苏州诺乐智能</td><td>江苏无锡</td><td>2020.11.9-2021.5.10</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table></div><div class="col" style="background-color:#FFFAD0;"><table class="table table-bordered"><thead><tr><th>岗位</th><th>内容</th></tr></thead><tbody><tr><td>工程师助理</td><td>维修及测试</td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table></div><div class="col" style="background-color:#FFFAD0;"><table class="table table-bordered"><thead><tr><th>在岗时间</th><th>在岗时长</th></tr></thead><tbody><tr><td>2020.11.19-2021.5.10</td><td>六个月</td></tr><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table></div></div></div></div><div class="jumbotron text-center  bg-secondary" style="margin-bottom:0"><div class="d-flex justify-content-center mb-3"><div class="p-3">陕ICP备19021888号</div><div class="p-3"><tr><td width="110"><a target="_blank" href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=ahITDwkTW1lbXiobG0QJBQc" style="text-decoration:none;"><img src="http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_22.png"/></a></td></tr></div></div>
</div></body>
</html>

声明

所有的引用我都写到了html里面，所以只需要一个.html文件即可，相关图片大家可以上传到qq然后直接复制图片地址调用。
全部代码是我自己写的，涉及到的Bootstrap和Echarts都是去看官网的标准开发文档，并自行修改过，大家可以放心拿去做二次开发。
但若要写文章，请说明转载出处，否则将追求责任，谢谢。

html个人简历网页相关推荐

  1. 好看的扁平化大气IT个人简历网页模板

    介绍: 扁平化响应式紫色风格,非常大气简约的IT个人简历网页模板,也可以做团体介绍模板,具体看效果图. 网盘下载地址: http://kekewangLuo.cc/fuXx0rRkasd0 图片:

  2. Bootstrap——制作个人简历网页、工具类【边框（添加、删除、颜色、圆角）、清除浮动、颜色（文本、链接、背景）、display属性、浮动、定位、文本对齐】

    制作个人简历网页 代码: <!DOCTYPE html> <html><head><meta charset="UTF-8">< ...

  3. 个人简历网页设计项目（入门）

    个人简历网页设计项目 唠叨 正题 项目进度 设计思路 最终成果 唠叨 在文章的开头,首先感谢张迪老师给我的指导和一些资源.其次,我内心有点愧疚.本该在开学前完成的项目,硬生生被我拖延到开学第一周周末才 ...

  4. 编写一个简单的“个人简历”网页

    新建HTML5文档,另存为"index01.html". 根据个人简历各元素,每一个元素用一个<p></p>标签,每个<p>标签为并列关系,且& ...

  5. 前端~html~HTML零基础（二） ~HTML常见标签补充/实战案例：个人简历网页展示/填写

    文章目录 回顾复习 超链接标签a(补充) 表格标签 列表标签 表单标签 label标签 select标签 textarea标签 无语义标签 div&& span 实战案例 个人简历网页 ...

  6. 使用云服务器搭建个人简历网页

    一.开通云服务器 进入公有云提供商官网(示例:阿里云) 地址:www.aliyun.com或www.aliyun.com/minisite/goods?userCode=3satwfcw 已有阿里云账 ...

  7. 个人简历网页搭建(快速搭建GitHub Pages和Apache)

    各位小伙伴有没有想要搭建自己网站的呢? 之前看到大佬何恺明的个人网站,很是羡慕,看到大佬满满的成果. 于是我也决定,奋发图强,建一个和他类似的网站,泪目 1.使用GitHub来搭建个人网页 这个是最简 ...

  8. tr闭包_个人简历网页模板

    一.中文模版 中文求职信模板(一) 尊敬的先生/小姐: 您好!本人欲申请贵公司网站上招聘的网络维护工程师职位.我自信符合贵公司的要求. 今年7月,我将从清华大学毕业.我的硕士研究生专业是计算机开发及应 ...

  9. 自己做的一个简历网页，有很多bug解决不了，有没有大神帮我看看

    今年年初找工作时自己利用掌握的前端知识写了这么一个网页,但是有好多bug自己解决不了,比如二级页加载太慢.滑屏返回不了.希望有大神能帮我看一下,看看怎么解决~~~~ 网址:qyued.com 转载于: ...

  10. css3-div+css3制作个人简历网页

    知识 css3布局:flex(重点),不熟悉,边查文档边做 错误:注意伪类不能操作除子元素外的其他元素 该小项目涉及到的知识点:布局(flex),动画(关键帧),排版,js DOM操作(本来想用伪类进 ...

最新文章

  1. 深入浅出 SpringMVC - 2 提升篇
  2. Typora markdown公式换行等号对齐_Typora-编写博客格式化文档的最佳软件
  3. 本地代码推送到github仓库
  4. 使用匿名内部类实现方式二线程创建 java 1615474836
  5. 组态王和modbus协议
  6. 2017-7-8 OpenStack手工+oz自动制作CentOS 7.3镜像
  7. 孙鑫VC学习笔记：第十一讲 (五) 如何使窗口具有滚动条
  8. 教程——Wind Turbine Maintenance(Agents)
  9. 导出java applet_Java Applet基础——输出HelloWorld
  10. appfabric 性能监视篇
  11. 学习MAXScript
  12. PPT打印处理 深色背景/白色字体转换 + 多分页占满
  13. 格西烽火 串口助手（二）
  14. 你到底是前端人还是搬砖人？推荐一款国产摸鱼神器！
  15. 【大咖有约】子衿技术团队徐戟：DBA职场进阶之路
  16. 在mysql中创建用户并授权
  17. 电机学他励直流发电机matlab,华南理工电机学随堂练习答案完整版
  18. lnk1120如何解决_Linking a C++ DLL 引发LNK1120和LNK2019问题的解决方案
  19. zipfile的压缩和解压缩
  20. 灌注桩如何计算机械台班,钢护筒造价计算及套定额

热门文章

  1. 联众打码写滑动_如何能够对接联众打码平台
  2. java方法 将123转换成 “一百二十三”
  3. 仿乐享微信源码分享---微信营销
  4. Java分布式二手房项目尚好房第二课 用户角色管理
  5. Restlet 学习笔记
  6. 数据库在线自生成ER图
  7. 网平差中的基线定权（松弛因子）
  8. 15套前端经典实战项目大合集，小白练手必备实战项目
  9. 前端项目实战5：聊天对话框
  10. Unity 序列帧动画