学习记录（3.24）
学习时长：8h
代码行数：约200行
今天上午学习网络和概率论为考研打下基础，之后又学习了英语，以上无关紧要就不赘述了。
今天最主要的还是web课上对于个人网页的完成，并且这节课解决了上次课遇到的图片不能滚动的问题，感觉成就感满满。
晚上和舍友们去观看了新海诚三年一部的电影《铃芽之旅》，对于我这个十年老粉真的十分满足，明天要好好搞结队作业了。
<!DOCTYPE html>
<html>
<head>
<title>郭永辉个人主页</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
/*设置超链接样式*/
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
color: #5086a5;
text-decoration: none;
font-size: 12px;
}
a:hover {
color: #5086a5;
text-decoration: underline;
font-size: 12px;
}
a:visited {
color: #5086a5;
font-size: 12px;
}
/*整个tab层居中，宽度为600px*/
#tabDiv {
width: 600px;
margin: 1em auto;
padding-bottom: 10px;
border-right: #b2c9d3 1px solid;
border-top: #b2c9d3 1px solid;
border-left: #b2c9d3 1px solid;
border-bottom: #b2c9d3 1px solid;
background: #ffffff;
}
/*tab头的样式*/
#tabsHead {
padding-left: 0px;
height: 26px;
background-color: #e8f7fc;
font-size: 1em;
margin: 1px 0px 0px;
color: #5086a5;
line-height: 26px;
}
/*已选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;
background: #ffffff;
}
/*未选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;
}
p {
font-size: 12pt;
text-indent: 2em;
}
li {
border-bottom-style: solid;
border-bottom-color: #EEE;
border-bottom-width: thin;
height: 25px;
font-family: "宋体";
font-size: 12pt;
}
</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 style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt;">郭永辉的个人主页</div>
<div id="tabDiv" style="width: 1000px">
<div id="tabsHead">
<a id="tabs1" class="curtab" href="javascript:showTab('tabs1','tabContent1')">基本资料</a> <a id="tabs2" class="tabs" href="javascript:showTab('tabs2','tabContent2')">掌握乐器</a><a id="tabs3" class="tabs" href="javascript:showTab('tabs3','tabContent3')">其他爱好</a>
</div>
<div id="tabContent1" style="display: block">
<table style="border-width: 0; width: 100%">
<tr>
<td rowspan="3" style="width: 300px; text-align: center"><img alt="郭永辉" src="images/gyh.jpg" style="width: 280px" /></td>
<td colspan="3" rowspan="3">
<table border="1" style="border-left-color: aqua; border-bottom-color: aqua; width: 701px; border-top-style: solid; border-top-color: aqua; border-right-style: solid; border-left-style: solid; height: 380px; border-right-color: aqua; border-bottom-style: solid">
<tr>
<td style="width: 50%">姓名：郭永辉</td>
<td style="width: 50%">生日：20214121</td>
</tr>
<tr>
<td style="width: 50%">国籍：中华人民共和国</td>
<td style="width: 50%">出生地：河南省孟州市</td>
</tr>
<tr>
<td style="width: 50%; height: 29px">身高：178cm</td>
<td style="width: 50%; height: 29px">体重：72kg</td>
</tr>
<tr>
<td style="width: 50%">血型：B</td>
<td style="width: 50%">星座：巨蟹座</td>
</tr>
<tr>
<td colspan="2">
<p>2002年6月23日，郭永辉出生于河南省孟州市。</p>
<p>2009年，郭永辉到了上小学的年级便在北京市银燕小学，成为了小学生，开始了学习生涯。在这时他接触了葫芦丝和手风琴。</p>
<p>2012年，由于北京市海淀区教育局提出并校，银燕小学与人大附小合并，郭永辉也成功跻身人大（虽然是小学） </p>
<p>2015年，郭永辉小学毕业，因为没有北京户口进入河北省三河市燕郊中学开始中学生涯，并结交诸多狐朋狗友（包括某万恶的乐器之路引路人）。</p>
<p>2018年，郭永辉初中毕业，开启了在三河市第二高级中学的高中生活。</p>
<p>2019年，郭永辉购买了自己人生中第一把复音口琴。</p>
<p>2020年4月5日，由于复音口琴损坏，购买了人生中第一把半音阶口琴。</p>
<p>2021年，郭永辉高中毕业，在某万恶之人的教唆下购买了人生中第一把电吉他，开始了一位摆烂吉他手的摇滚之路。在9月开始了大学生活</p>
<p>2022年，凭借口琴成为了石家庄铁道大学聆音琴社的社长，专业分流进入软件工程系</p>
<p>2023年，组建人生中第一支乐队</p>
<p>2048年，登录《滚石》杂志摇滚名人堂</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--以下为乐器部分内容-->
<div id="tabContent2" style="display: none">
<marquee onmouseover=stop() onmouseout=start() scrolIAmount=3 loop=infinite deplay="0">
<IMG src="images/guitar.jpg" style="width:300dx; height: 553px">
<IMG src="images/kouqin.jpg" style="width: 558px; height: 553px">
<IMG src="images/hulu.jpg" style="width: 558px; height: 553px">
</marquee>
</div>
<div id="tabContent3" style="display: none">
<table style="border-width: 0; width: 100%">
<tr>
<td rowspan="3" style="width: 300px; text-align: center"><img alt="郭永辉" src="images/gamegrid.jpg" style="width: 280px" /><img alt="郭永辉" src="images/anime.jpg" style="width: 280px" /></td>
<td colspan="3" rowspan="3">
<table border="1" style="border-left-color: aqua; border-bottom-color: aqua; width: 701px; border-top-style: solid; border-top-color: aqua; border-right-style: solid; border-left-style: solid; height: 380px; border-right-color: aqua; border-bottom-style: solid">
<tr>
<td colspan="2">
<p>聊天：没错，是个话痨属性拉满的人，喜欢谈天说地</p>
<p>打游戏：主要喜欢玩剧情向的rpg游戏，喜欢体验故事。</p>
<p>看书：喜欢没事儿读点儿名著和哲学作品，科普读物也很喜欢</p>
<p>看冻鳗：以下是个人的冻鳗生涯表</p>
<p>音乐：大部分曲风都能接受，但最喜欢的是摇滚和金属乐，在努力往金属乐手发展</p>
</td>
</tr>
</table>
</td>
</tr>
</div>
</div>
<hr />
<div style="text-align: center; width: 100%; font-size: 12px; color: #333;">©版权所有：石家庄铁道大学信息科学与技术学院</div>
</body>
</html>
浙公网安备 33010602011771号