支持二次开发,是我自己写的,因为全程都是调用网上的地址,所以没有任何其他的包需要导入和下载,一个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> <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>王宇东 20岁</h1> <h2>☾腾讯云工坊☆JavaWeb开发☆ImapBox Lv3☽</h2> <br/> <p>软件设计有两种方式：一种方式是,使软件过于简单,明显没有缺陷；另一种方式是,使软件过于复杂,没有明显的缺陷。—C.A.R. Hoare</p> <h3>想应聘的岗位:Java实习生</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 shadow name:'总分', 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),代码规范,git提交文件</td> <td>30天</td> </tr> <tr> <td>新能源汽车项目</td> <td>Eclipse:SpringMVC,Ajax,Mybatis,MySQL,JSP,bootstrap3,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="https://m.qpic.cn/psc?/V13Oytc21Z27jf/UbDh**QEFrkBQEvKgeO0F2**NsUaYUQt6ZNsa9yJTFGXnFQvUvywpBoqvewxcnmSK190V6ysZSMru6fy5SdHpg!!/b&bo=OATcBzgE3AcRCT4!&rf=viewer_4" height="400px" width="350px"></div> <p>特点:<br/> 身高190cm,喜欢日语,性格活泼,具有创新思维<br/> 吃苦耐劳,踏实肯干,服从团队管理,服从上级安排<br/> 在校期间有丰富的学生干部工作经验,可以很好地完成目标,并在此基础上进行创新 </p> <h3>My ImapBox</h3> <p>优选了一些我认为有价值的</p> <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> <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>Java语言,前后端,Windows和linux的装机和使用,数据库应用,服务器配置,云平台发布</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> <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="https://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=ahITDwkTW1lbXiobG0QJBQc" style="text-decoration:none;"> <img src="https://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_22.png"/></a> </td></tr> </div> </div> </div> </body> </html> 最后 希望大家可以
关注我 因为我的其他文章有写到它用到的一些东西,比如 背景渐变色的设置 渲染原理 邮我的申请和使用等等 希望本文可以对你有所帮助 谢谢
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
1万+