<%@ 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"> body { background-color: #F5DEB3 } .content { height: calc(90vh - 100px); overflow-y: scroll; } 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 { height:550px; 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> <form action="" method="get"> <table id="tabDiv" border="1" style="font-size:18px;width:780px"> <tr> <td style="height:45px;width:250px;"> 编号: <input text="text" id="lesson_num" size="10px" placeholder="学号或是工号" style="font-size:18px"></td> <td style="height:45px;width:250px"> 身份: <select name="job_title" style="font-size:18px"> <option value="" disable select hidden>请选择你的身份</option> <option value="学生">学生</option> <option value="教师">教师</option> </select> </td> <td style="height:45px;width:240px" align="center">操作</td> <td><button id="s_l_num" style="height:45px;width:60px">查询</button></td> </tr> <tr><td colspan="5"> <div class="content"><table border="1" style="font-size:18px;width:780px;height:300px; "> <% for(int i=0;i<0;i++){%> <tr><td style="height:20px;width:245px" align="center">20214010<%out.print(" 陈一龙"); %></td> <td style="height:40px;width:247px" align="center">阳光开朗大男孩</td> <td> <a href=""><font size="4px">删除</font></a> <a href=""><font size="4px">查看</font></a> <a href=""><font size="4px">修改</font></a></td></tr> <%} %> </table> </div> </td></tr> </table> </form> </body> </html>
标签:包杯,服务,padding,rgb,nbsp,tab,font,border From: https://www.cnblogs.com/cocotun/p/17274202.html