日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

html个人简历网页

發布時間：2023/12/9 46 豆豆
生活随笔 收集整理的這篇文章主要介紹了 html个人简历网页 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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个人简历网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。