学习记录（3.24）

　　学习时长：8h

　　代码行数：约200行

　　今天上午学习网络和概率论为考研打下基础，之后又学习了英语，以上无关紧要就不赘述了。

　　今天最主要的还是web课上对于个人网页的完成，并且这节课解决了上次课遇到的图片不能滚动的问题，感觉成就感满满。

　　晚上和舍友们去观看了新海诚三年一部的电影《铃芽之旅》，对于我这个十年老粉真的十分满足，明天要好好搞结队作业了。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

<!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>