<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#xuesheng {
float:left;
padding-right:100px;
}
.zuoye:hover div{
color:blue;
visibility:visible;}
#baobiao {
float:left;
padding-right:100px;
}
#tuichu {
float:left;
}
div div{
visibility:hidden;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div id="xuesheng" class="zuoye">学生查询
<div>-按姓名查询</div>
<div>-按学号查询</div>
<div>-按性别查询</div>
</div>
<div id="baobiao" class="zuoye">报表功能
<div>-输出名单</div>
<div>-输出成绩</div>
<div οnclick="jieshao()">-输出个人介绍</div>
</div>
<div id="tuichu" class="zuoye">退出
<div>-关闭窗口</div>
</div>
<script>
function jieshao(){
window.location.href="PerIntru.html";
}
</script>
</body>
</html>
表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<h1>个人基本信息</h1>
<table cellspacing="3px">
<tr>
<td>姓名<input type="text" id="name"/></td>
<td>性别<input type="text" id="sex"/></td>
<td rowspan="4" colspan="2"><img src="" width="150" height=></td>
</tr>
<tr>
<td>政治面貌<input type="text" id="vax"/></td>
<td>学历<input type="text" id="learn"/></td>
</tr>
<tr>
<td>专业<input type="text" id="learn"/></td>
<td>出生日期<input type="text" id="learn"/></td>
</tr>
<tr>
<td>英语等级<input type="text" id="learn"/></td>
<td>计算机等级<input type="text" id="learn"/></td>
</tr>
<tr>
<td>在读学校<input type="textarea" id="learn"/></td>
</tr>
<tr>
<td>获奖情况<input type="textarea" id="learn"/></td>
<tr>
<td>联系方式<input type="textarea" id="learn"/></td>
</tr>
</tr>
</table>
<input type="button" value="完成"></button>
</body>
</html>