<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人介绍</title>
<style type="text/css">
/*设置超链接样式*/
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: #ffffff;
text-decoration:none;
font-family:"幼圆";/*设置字体*/
font-size:18px;/*设置字体大小*/
font-weight:5px;/*调整字体粗细*/
}
a:hover {
color:#f56f2c;
font-size: 18px;
}
a:visited {
color: #5086a5;
font-size: 12px;
}
/*整个tab层居中，宽度为600px*/
#tabDiv {
width: 600px;
margin: 1em auto;
padding-bottom: 10px;
border-right: #ffffff 1px solid;
border-top: #ffffff 1px solid;
border-left: #ffffff 1px solid;
border-bottom: #ffffff 1px solid;
background-color:#fffef9 ;
}
/*tab头的样式*/
#tabsHead {
height: 226px;
background-color:#9bc1d2 ;
}
/*已选tab头（超链接）的样式*/
.curtab {
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
border-right: #b2c9d3 1px solid;
font-weight: bold;
float: left;
cursor: pointer;
}
/*未选tab头（超链接）的样式*/
.tabs {
border-right: #c1d8e0 1px solid;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
font-weight: normal;
float: left;
cursor: pointer;
}
li {
font-family:"幼圆";/*设置字体*/
font-size: 18px;
font-weight: 666;
color:#494949;
}
.title {
float: right;
font-size: 24px;
font-weight: 500;
font-family:"幼圆";/*设置字体*/
color:#ffffff;
}
.ziti {
font-size: 18px;
font-weight: 666;
font-family:"幼圆";/*设置字体*/
color:#494949;
}
.ziti2 {
font-size: 18px;
font-weight: 666;
font-family:"幼圆";/*设置字体*/
color:#416659;
}
.ziti3 {
font-size: 18px;
font-weight: 666;
font-family:"幼圆";/*设置字体*/
color:#000000;
}
</style>
<script type="text/jscript">
//显示tab（tabHeadId：tab头中当前的超链接；tabContentId要显示的层ID）
function showTab(tabHeadId,tabContentId)
{
//tab层
var tabDiv = document.getElementById("tabDiv");
//将tab层中所有的内容层设为不可见
//遍历tab层下的所有子节点
var taContents = tabDiv.childNodes;
for(i=0; i<taContents.length; i++)
{
//将所有内容层都设为不可见
if(taContents[i].id!=null && taContents[i].id != 'tabsHead')
{
taContents[i].style.display = 'none';
}
}
//将要显示的层设为可见
document.getElementById(tabContentId).style.display = 'block';
//遍历tab头中所有的超链接
var tabHeads = document.getElementById('tabsHead').getElementsByTagName('a');
for(i=0; i<tabHeads.length; i++)
{
//将超链接的样式设为未选的tab头样式
tabHeads[i].className='tabs';
}
//将当前超链接的样式设为已选tab头样式
document.getElementById(tabHeadId).className='curtab';
document.getElementById(tabHeadId).blur();
}
</script>
</head>
<body>
<div id="tabDiv" style="padding:30px;border-radius:20px;width:90%;height:800px;margin: auto; ">
<div id="tabsHead" style="border-radius:15px;border:10px solid #9bc1d2;float:left;width:12%;height:800px;text-align:center; ">
<h1></h1>
<div style="border-radius:90px;width:90px;height:90px; background: url(https://images.cnblogs.com/cnblogs_com/blogs/690901/galleries/1992752/o_220329142431_1648563849495.jpg);background-size:cover;margin: auto;text-align:center">
</div>
<p></p><br>
<a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">首页</a><br>
<p></p>
<a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">基本资料</a> <br>
<p></p>
<a id="tabs3" class="tabs" href="javascript:showTab('tabs3','tabContent3')">获奖记录</a><br>
<p></p>
<a id="tabs4" class="tabs" href="javascript:showTab('tabs4','tabContent4')">了解我</a>
</div>
<div id="tabContent1" style="border-radius:15px;width:85%;height:820px;float:right;background: url(https://images.cnblogs.com/cnblogs_com/blogs/690901/galleries/1992752/o_220320120009_shouye.jpg);background-size:cover;" >
<div style="border-radius:30px;width:40%;height:600px;float: left; ">
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h1> </h1>
<h3 class="title">欢迎来到我的个人简介 <br> Welcome to my personal introduction</h3>
</div>
</div>
<div id="tabContent2" style="display: none" >
<div style="border-radius:15px;width:85%;height:820px;float:right;background-size:cover;background: url(https://images.cnblogs.com/cnblogs_com/blogs/690901/galleries/1992752/o_c5b55273.png);background-size:cover;">
<p> </p>
<table border="0" style="width: 900px; height: 511px;">
<HR style="border:2 dashed #808080" width="95%" color=#808080 SIZE=2>
<tr>
<td class ="ziti"> 姓名：**</td>
<td class ="ziti">生日：********</td>
</tr>
<div style="padding:10px;border-radius:20px;border:10px solid #f9f7e7;width:150px;height:180px;float: right;background-size:cover;background: url(C:/Users/榕宝/Desktop/photo.jpg);background-size:cover;"></div>
<tr>
<td class ="ziti"> 国籍：中华人民共和国</td>
<td class ="ziti">出生地：******8</td>
</tr>
<tr>
<td class ="ziti"> 血型：B</td>
<td class ="ziti">星座：天蝎座</td>
</tr>
<tr>
<td class ="ziti"> ------------------------------------------------</td>
</tr>
<tr>
<td class ="ziti"> 学习经历：</td>
</tr>
<tr>
<td class ="ziti"> 2008.9-2014.6就读于***小学</td>
</tr>
<tr>
<td class ="ziti"> 2014.9-2017.6就读于*****学校</td>
</tr>
<tr>
<td class ="ziti"> 2017.9-2020.6就读于*******</td>
</tr>
<tr>
<td class ="ziti"> 2020.9至今就读于石家庄铁道大学</td>
</tr>
</table>
<HR style="border:2 dashed #808080" width="95%" color=#808080 SIZE=2>
<table border="0" style="width: 701px; height: 250px;">
</table>
</div>
</div>
<!--以下为获奖记录部分内容-->
<div id="tabContent3" style="display: none">
<div style="border-radius:15px;width:85%;height:820px;float:right;background-size:cover;background-size:cover;background: url(https://images.cnblogs.com/cnblogs_com/blogs/690901/galleries/1992752/o_c5b55273.png);background-size:cover;">
<p></p>
<HR style="border:2 dashed #808080" width="95%" color=#808080 SIZE=2>
<ul>
<p></p>
<li>本人大一大二均在班级中担任团支部书记；大一加入信息科学与技术学院青协，任闻宣部干事，大二参加部长换届竞选，现任院青协闻宣部骨干。任团支部书记与青协骨干期间，多次组织班级团支部活动与青协志愿服务活动，具有较为丰富的组织活动经验，良好的协调工作能力与人际交往能力。</li>
<p></p>
<li>2020年12月获优秀团员荣誉称号</li>
<p></p>
<li>2020年12月获精神文明奖学金</li>
<p></p>
<li>2021年4月获社会工作奖学金</li>
<p></p>
<li>2021年9月获“志愿之星”称号</li>
<p></p>
<li>2021年12月获校级优秀志愿者称号</li>
<p></p>
<li>2022年3月获二等奖学金</li>
</ul>
</div>
</div>
<div id="tabContent4" style="display: none" >
<div style="border-radius:15px;width:85%;height:820px;float:right;background-size:cover;background: url(https://images.cnblogs.com/cnblogs_com/blogs/690901/galleries/1992752/o_c5b55273.png);background-size:cover;">
<p></p>
<HR style="border:2 dashed #808080" width="95%" color=#808080 SIZE=2>
<div style="padding:10px;border-radius:20px;border:5px solid #f9f7e7;width:300px;height:400px;float:left;background: url(https://wx3.sinaimg.cn/mw1024/ab299040gy1h0s2dexkl1j213l1ych75.jpg);background-size:cover;text-align:center; ">
</div>
<div style="padding:10px;border-radius:20px;border:10px ;border:5px solid #f9f7e7;width:300px;height:180px;float:right;background-size:cover;background: url();background-size:cover;text-align:center; ">
<p> </p>
<p class="ziti2"> 博客园：<a href="*****************"style="color:#00708a;text-decoration: underline;">Welcome to My Blog.</a></p>
<p class="ziti2"> QQ空间：<a href="*****************************"style="color:#00708a;text-decoration: underline;">************** </a></p>
</div>
<div style="padding:10px;border-radius:20px;border:5px solid #f9f7e7;width:500px;height:200px;float:left;background-size:cover;background: url();background-size:cover;">
<p> </p>
<p> </p>
<p> </p>
<p class="ziti3"> 邮箱：***************</p>
<p class="ziti3"> 联系电话：**************</p>
</div>
<div style="padding:10px;border-radius:20px;border:5px solid #f9f7e7;width:480px;height:150px;float:left;background-size:cover;background: url();background-size:cover;text-align:center;">
<p> </p>
<p class="ziti3"> 我磕のcp：<a href="http://gjzzh.com/"style="color:#000000;text-decoration: underline;">JZ is true.</a></p>
</div>
<div style="padding:10px;border-radius:20px;border:5px solid #f9f7e7;width:300px;height:300px;float:right;background-size:cover;background: url();">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p class="ziti3"> 班级：*******</p>
<p class="ziti3"> 学号：*********</p>
</div>
</div>
</div>
<!音乐块>
<link rel="stylesheet" href="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.css">
<div id="player" class="aplayer aplayer-withlist aplayer-fixed" data-id="6830080956" data-server="netease" data-type="playlist" data-order="random" data-fixed="true" data-listfolded="true" data-theme="#2D8CF0"></div>
<script src="https://blog-static.cnblogs.com/files/elkyo/APlayer.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/elkyo/Meting.min.js"></script>
</body>
</html>
