當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html个人简历网页

發(fā)布時間：2023/12/9 编程问答 42 豆豆

生活随笔收集整理的這篇文章主要介紹了 html个人简历网页小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

html個人簡歷網(wǎng)頁

- - 效果圖
  - html在線運行傳送門
  - 源碼
  - 聲明

效果圖

html在線運行傳送門

源碼

<!DOCTYPE html> <html lang="en"> <head><title>王宇東的個人簡歷</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><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><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script><script src="https://www.runoob.com/static/js/wonderland.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☆軟件技術(shù)☆CSDN Lv4?</h2><br/><p>軟件設(shè)計有兩種方式：一種方式是,使軟件過于簡單,明顯沒有缺陷；另一種方式是,使軟件過于復(fù)雜,沒有明顯的缺陷。—C.A.R. Hoare</p><h3>想應(yīng)聘的崗位:錢多就行</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"> <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">專業(yè)技能</a></li><li class="nav-item"><a class="nav-link" href="#section2">項目經(jīng)驗</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">教育經(jīng)歷</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"><div id="main" style="width:100%;height:400px;"></div><script type="text/javascript">// 基于準(zhǔn)備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'),'wonderland');var dataAxis = ['Java語言', '實用英語(一)', '計算機應(yīng)用基礎(chǔ)', '高等數(shù)學(xué)(理工類)', 'Java高級開發(fā)' , '實用英語(二)', '數(shù)據(jù)庫應(yīng)用', '網(wǎng)頁制作', 'Spring框架技術(shù)', 'Android開發(fā)', 'JQuery框架技術(shù)', '動態(tài)網(wǎng)站開發(fā)'];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: { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效type: 'shadow' // 默認(rèn)為直線，可選為：'line' | 'shadow'}},title: {text: '專業(yè)技能',subtext: '大學(xué)成績單'},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)]});});// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。myChart.setOption(option);</script></div><div id="section2" class="container-fluid" style="padding-top:70px;padding-bottom:70px"><h5>項目經(jīng)驗</h5><p>學(xué)習(xí)項目</p><div class="container"><table class="table table-striped table-hover"><thead><tr><th>學(xué)習(xí)項目</th><th>涉及技術(shù)</th><th>所用時間</th></tr></thead><tbody><tr><td>實現(xiàn)登錄與注冊</td><td>Eclipse:Spring,jdbc,MySQL,JSP(html5+css3+js),代碼規(guī)范</td><td>30天</td></tr><tr><td>新能源汽車項目</td><td>Eclipse:SpringMVC,Ajax,Mybatis,MySQL,JSP,Bootstrap,Maven,使用Linux(云平臺發(fā)布),百度地圖SDK申請調(diào)用</td><td>30天</td></tr><tr><td>Java入門案例漢化教學(xué)</td><td>IDE(分工完成):Java數(shù)組,翻譯,Word文檔編寫,教學(xué)視頻錄制與剪輯</td><td>7天</td></tr><tr><td>崗位爬取并展示</td><td>IDEA(小組合作):Jsoup+HttpClient,WebMagic,MySQL,Echarts,Maven,jquery實現(xiàn)表頭固定表格自滾動</td><td>20天</td></tr><tr><td>個人簡歷網(wǎng)站制作</td><td>VSCode(自我創(chuàng)新):bootstrap4,Echarts,Css3(透明-背景漸變色,背景渲染原理),郵我,滾動監(jiān)聽</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/>    身高190cm,喜歡日語,具有創(chuàng)新思維<br/>    吃苦耐勞,踏實肯干,服從團隊管理和上級安排<br/>    在校期間有豐富的學(xué)生干部工作經(jīng)驗,自律強，有過硬件維修的工作經(jīng)驗</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></ul><div id="wmbq"><a target="_blank" href="https://blog.csdn.net/weixin_43701595" title="·?關(guān)于博客 - 個人資料 - 博客中心? ? ? ">我的博客</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/category_10088814.html" title="·?項目經(jīng)驗(后端)? ? ? ">后端編寫</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="·?工具經(jīng)驗(雜)? ? ? ">工具經(jīng)驗</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爬蟲項目(四可視化)? ? ?··· ">數(shù)據(jù)庫可視化</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/106436568" title="·?jquery實現(xiàn)表頭固定表格自滾動? ? ? ">表格數(shù)據(jù)自滾動</a><a target="_blank" href="https://blog.csdn.net/weixin_43701595/article/details/104947857" title="·?java超簡單的環(huán)境變量配置+詳解? ? ? ">環(huán)境變量配置</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登錄注冊實現(xiàn)? ? ? ">登錄注冊實現(xiàn)</a><a href="JavaScript:" title="·?Java前端基礎(chǔ)? ? ? ">Html5+Css3+JavaScript+Jquery</a><a href="JavaScript:" title="·?Java前端進(jìn)階? ? ? ">bootstrap4+Echarts+WebMagic</a><a href="JavaScript:" title="·?JavaWeb開發(fā)基礎(chǔ)? ? ? ">Java EE(Spring MVC+Spring+MyBatis+Redis)</a><a href="JavaScript:" title="·?JavaWeb后端進(jìn)階? ? ? ">SpringBoot</a><a href="JavaScript:" title="·?系統(tǒng)+云平臺發(fā)布? ? ? ">Windows7/10+Linux+云平臺發(fā)布</a><a href="JavaScript:" title="·?數(shù)據(jù)庫? ? ? ">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>學(xué)歷</td><td>大專</td></tr><tr><td>校園經(jīng)歷</td><td>因參加工坊培訓(xùn)辭職副班長,參加過校學(xué)生會,目前在校易班工作站技術(shù)部擔(dān)任副部長</td></tr><tr><td>獲得榮譽</td><td>國家勵志獎學(xué)金,校內(nèi)二等獎學(xué)金2次,優(yōu)秀干部,優(yōu)秀團員等,共十項校級榮譽證書</td></tr><tr><td>掌握技能</td><td>JavaWeb，JSP+H5+C3，MySQL，Ajax，Spring，Bootstrap4，Echarts</td></tr><tr><td>自我評價</td><td>熟練使用office等常用辦公軟件,善于溝通合作,良好的時間觀念,高效的學(xué)習(xí)方式</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>教育經(jīng)歷</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>就讀學(xué)校</th><th>學(xué)歷</th><th>地點</th></tr></thead><tbody><tr><td>實驗中學(xué)</td><td>初中</td><td>陜西省渭南市合陽縣</td></tr><tr><td>合陽中學(xué)</td><td>高中</td><td>陜西省渭南市合陽縣</td></tr><tr><td>陜西國防學(xué)院</td><td>大專</td><td>陜西省西安市鄠邑區(qū)</td></tr></tbody></table></div><div class="col" style="background-color:#FFFAD0;"><table class="table table-bordered"><thead><tr><th>大學(xué)所學(xué)專業(yè)</th><th>時間</th></tr></thead><tbody><tr><td>軟件技術(shù)</td><td>大一</td></tr><tr><td>企業(yè)SaaS</td><td>大二</td></tr><tr><td>企業(yè)SaaS+實習(xí)期</td><td>大三</td></tr></tbody></table></div><div class="col" style="background-color:#FFFAD0;"><table class="table table-bordered"><thead><tr><th>未來規(guī)劃</th><th>達(dá)成所需時長</th></tr></thead><tbody><tr><td>初級程序員</td><td>畢業(yè)1-5年</td></tr><tr><td>項目主力</td><td>畢業(yè)6-10年</td></tr><tr><td>項目經(jīng)理</td><td>畢業(yè)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>內(nèi)容</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文件即可，相關(guān)圖片大家可以上傳到qq然后直接復(fù)制圖片地址調(diào)用。
全部代碼是我自己寫的，涉及到的Bootstrap和Echarts都是去看官網(wǎng)的標(biāo)準(zhǔn)開發(fā)文檔，并自行修改過，大家可以放心拿去做二次開發(fā)。
但若要寫文章，請說明轉(zhuǎn)載出處，否則將追求責(zé)任，謝謝。

總結(jié)

以上是生活随笔為你收集整理的html个人简历网页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。