注:
支持二次開發,是我自己寫的,因爲全程都是調用網上的地址,所以沒有任何其他的包需要導入和下載,一個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開發☆CSDN 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;">[email protected]</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="http://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 CSDN</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="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>
最後 希望大家可以
關注我 因爲我的其他文章有寫到它用到的一些東西,比如 背景漸變色的設置 渲染原理 郵我的申請和使用等等 希望本文可以對你有所幫助 謝謝