web作业
1) 自己设计网页内容，做一张展示自己网页。要求展示的主要内容有：基本资料、学习经历、所得奖励、最新动态等。
2) 在网页的合适位置加入一些JavaScript特效，例如显示当前时间、图片定时切换、文本自动滚屏等。
3) 将网页源代码和浏览器截图写入实验报告并提交。
<!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"> 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> </ul> </div> <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> </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="E:\大二\web\实验一\代码\beijing.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%">生日：2002.03.12</td> </tr> <tr> <td style="width: 50%">性别：女</td> <td style="width: 50%">国籍：中华人民共和国</td> </tr> <tr> <td style="width: 50%; height: 29px">身高：160cm</td> <td style="width: 50%; height: 29px">体重：52kg</td> </tr> <tr> <td style="width: 50%">血型：B</td> <td style="width: 50%">民族：汉</td> </table> </td> </tr> <tr> </tr> <tr> </tr> </table> </div> <div id="tabContent2" style="display: none"> <ul> <li>2008-2014：在河北省南宫市实验中学学习。</li> <li>2014-2017：在河北省南宫市丰翼中学学习。</li> <li>2017-2020：在河北省南宫中学学习。</li> <li>2020-至今：进入石家庄铁道大学。</li> </ul> </div> </div> <hr /> <div > <script> var div = document.querySelector('div'); getDate(); setInterval(getDate, 1000); function getDate() { var date = new Date(); var year = date.getFullYear(); var month = date.getMonth() + 1; month = month < 10 ? '0' + month : month; var dates = date.getDate(); dates = dates < 10 ? '0' + dates : dates; var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); var hour = date.getHours(); var half = hour >= 12 ? '下午' : '上午'; hour = hour <= 12 ? hour : (hour - 12); hour = hour < 10 ? '0' + hour : hour; var min = date.getMinutes(); min = min < 10 ? '0' + min : min; var sed = date.getSeconds(); sed = sed < 10 ? '0' + sed : sed; div.innerHTML = (year + '年' + month + '月' + dates + '日 ' + arr[day] + ' ' + half + hour + '点' + min + '分' + sed + '秒'); } </script> </div> <div id="nav" > <ul class="nav-skin"> <li> <a href="blog.html">首页</a> </li> <li> <a href="essays.html">新随笔</a> </li> <li> <a href="my.html">个人主页</a> </li> <li> <a href="myBlog.html">我的博客</a> </li> </ul> </div> </body> </html>
