服务外包杯A19
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>教学管理系统</title> <style type="text/css"> table { /*表格边框为实线或者是空心双线*/ border-collapse: collapse; /*边框与边框的空间*/ border-spacing: 0; padding: 40px ; } a { color: rgb(60, 114, 53); text-decoration: none; font-size: 12px; } a:hover { color: rgb(60, 114, 53); text-decoration: underline; font-size: 12px; } a:visited { color: rgb(0, 106, 78); font-size: 12px; } /*整个tab层居中，宽度为600px*/ #tabDiv { width: 400px; height:300px; margin: 1em auto; padding-bottom: 10px; border-right: rgb(30,144,255) 2px solid; border-top: rgb(30,144,255) 2px solid; border-left: rgb(30,144,255) 2px solid; border-bottom: rgb(30,144,255) 2px solid; background: #ffffff; } /*tab头的样式*/ #tabsHead { padding-left: 0px; height: 26px; background-color: rgb(179, 247, 19); font-size: 1em; margin: 1px 0px 0px; color: rgb(179, 247, 19); line-height: 26px; } /*已选tab头（超链接）的样式*/ .curtab { padding-top: 0px; padding-right: 10px; padding-bottom: 0px; padding-left: 10px; border-right: rgb(209, 226, 49) 1px solid; font-weight: bold; float: left; cursor: pointer; background: #ffffff; } /*未选tab头（超链接）的样式*/ .tabs { border-right: rgb(209, 226, 49) 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: 20pt; } </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> <h1 align="center">登 陆</h1> <br><br><br><br><br> <form action="" method="get"> <table cellspacing="10" id="tabDiv" border="0" style="display: block;font-size:18px;width:480px"> <tr> <td align="center">账号:<input type="text" name="id" size="20" placeholder="输入学号或是工号" style="font-size:18px"/></td> <td> <select name="identity" style="font-size:20px"> <option value="" disable select hidden>请选择身份</option> <option value="student">学生</option> <option value="teacher">教师</option> <option value="root">管理员</option> </select> </td> </tr> <tr> <td align="center">密码:<input type="password" name="password" size="20" placeholder="输入密码" style="font-size:18px"/></td> </tr> <tr><td align="center" colspan="2"><input type="submit" value="登陆" style="width:45px;height:30px;margin:5px 40px"/> <input type="reset" value="重置" style="width:45px;height:30px;margin:5px 40px"/> </td> </tr> <tr><td><a href="" style="font-size:14px">点击此网址找回密码</a></td></tr> </table> </form> </body> </html>
已写完登陆界面
