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.12td>
tr>
<tr>
<td style="width: 50%">性别：女td>
<td style="width: 50%">国籍：中华人民共和国td>
tr>
<tr>
<td style="width: 50%; height: 29px">身高：160cmtd>
<td style="width: 50%; height: 29px">体重：52kgtd>
tr>
<tr>
<td style="width: 50%">血型：Btd>
<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>