今日共同报告-03-应用CSS优化前端
今天的合作任务：锁群负责优化前端界面，我负责测试和后端逻辑的优化
今天的合作照：
今天的进度报告：
今天主要优化前端，我和伙伴讨论了前端页面可以优化的点，讨论了算法逻辑。
前端页面优化的几个注意点：界面比例需要调整的更加合适和美观，太小的字要调大，布局要紧凑大方合理易用。
今天的前端页面展示：
今天的进度比较有限，因为我们主要精力放在了个人作业上，但是我们详细讨论了之后的思路和算法，有利于之后的实现。
部分代码：
@charset "UTF-8"; body{ background-image: url(../images/p18.jpg); background-size: cover; } table { border-collapse: collapse; border-spacing: 0; } a { color: #fff; text-decoration: none; font-size: 12px; } a:hover { color: #fff; text-decoration: underline; font-size: 12px; } a:visited { color: #fff; font-size: 12px; } /*整个tab层居中，宽度为600px*/ #tabDiv { width: 600px; margin: 1em auto; padding-bottom: 10px; border-right: #42bedc 1px solid; border-top: #42bedc 1px solid; border-left: #42bedc 1px solid; border-bottom: #42bedc 1px solid; background-color: #ffffff; opacity:0.8; } /*tab头的样式*/ #tabsHead { padding-left: 0px; height: 26px; background-color: #42bedc; 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: #42bedc; } /*未选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; background: #42bedc; } p { font-size: 12pt; font-family: 华文楷体; } li { border-bottom-style: solid; border-bottom-color: #EEE; border-bottom-width: thin; height: 25px; font-family: "宋体"; font-size: 12pt; }
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <title>石家庄铁道大学北京地铁查询系统</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="css/style.css"> <script type="text/jscript"> //图片定时转换 var curIndex=0; var timeInterval=2000; var arr=new Array(); arr[0]="./images/p14.jpg"; arr[1]="./images/p15.jpg"; arr[2]="./images/p16.jpg"; setInterval("changeImg()",timeInterval); function changeImg(){ var obj=document.getElementById("obj"); if(curIndex==arr.length-1){ curIndex=0; }else{ curIndex+=1; } obj.src=arr[curIndex]; } //显示当前时间 function showLocale(objD) { var str, colorhead, colorfoot; var yy = objD.getYear(); if (yy < 1900) yy = yy + 1900; var MM = objD.getMonth() + 1; if (MM < 10) MM = '0' + MM; var dd = objD.getDate(); if (dd < 10) dd = '0' + dd; var hh = objD.getHours(); if (hh < 10) hh = '0' + hh; var mm = objD.getMinutes(); if (mm < 10) mm = '0' + mm; var ss = objD.getSeconds(); if (ss < 10) ss = '0' + ss; var ww = objD.getDay(); colorhead = "<font color=\"#000000\">"; if (ww == 0) ww = "星期日"; if (ww == 1) ww = "星期一"; if (ww == 2) ww = "星期二"; if (ww == 3) ww = "星期三"; if (ww == 4) ww = "星期四"; if (ww == 5) ww = "星期五"; if (ww == 6) ww = "星期六"; colorfoot = "</font>" str = colorhead + yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss + " " + ww + colorfoot; return (str); } function tick() { var today; today = new Date(); document.getElementById("localtime").innerHTML = showLocale(today); window.setTimeout("tick()", 1000); } window.onload = function() { tick(); } //显示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('tabContent1').style.display='none'; document.getElementById('tabContent2').style.display='none'; document.getElementById('tabContent3').style.display='none'; document.getElementById('tabContent4').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> <div style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt; ">石家庄铁道大学北京地铁查询系统</div><br/> <div id="localtime" style="text-align: center;"></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> <a id="tabs3" class="tabs" href="javascript:showTab('tabs3','tabContent3')">起点-终点查询</a> <a id="tabs4" class="tabs" href="javascript:showTab('tabs4','tabContent4')">地铁线路</a> </div> <div id="tabContent1" style="display: block"> <form action="lineresult.html"> <table style="border-width: 0; width: 100%"> <tr> <table border="1" style="border-left-color: aqua; border-bottom-color: aqua; width: 100%;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 align="center"><td align="center" colspan="2">石家庄铁道大学北京地铁线路查询</td></tr> <tr><td style="width: 50%" align="center">线路名称：</td><td style="width: 50%"> <select name="line"> <option value="地铁1号线">地铁1号线</option> <option value="地铁2号线">地铁2号线</option> <option value="地铁4号线">地铁4号线</option> <option value="地铁5号线">地铁5号线</option> <option value="地铁6号线">地铁6号线</option> <option value="地铁7号线">地铁7号线</option> <option value="地铁8号线">地铁8号线</option> <option value="地铁9号线">地铁9号线</option> <option value="地铁10号线">地铁10号线</option> <option value="地铁13号线">地铁13号线</option> <option value="地铁14号线">地铁14号线</option> <option value="地铁15号线">地铁15号线</option> <option value="地铁房山线">地铁房山线</option> <option value="地铁昌平线">地铁昌平线</option> <option value="地铁亦庄线">地铁亦庄线</option> <option value="机场线">机场线</option> </select></td></tr> <tr> <td style="width: 50%" align="center" colspan="2"><input type="submit" value="查询"/><!--提交 value内的内容是按键内内容--></td> </tr> </table> </td> </tr> <tr> </tr> <tr> </tr> </table> </form> </div> <div id="tabContent2" style="display: none"> <form action="nameresult.html"> <table border="1" style="border-left-color: aqua; border-bottom-color: aqua; width: 100%;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 align="center"><td align="center" colspan="2">石家庄铁道大学北京地铁站点查询</td></tr> <tr><td style="width: 50%" align="center">站点名称：</td><td> <input type="text" placeholder="请输入站点名称" name="name"/></td></tr> <tr> <td style="width: 50%" align="center" colspan="2"><input type="submit" value="查询"/><!--提交 value内的内容是按键内内容--></td> </tr> </table> </form> </div> <div id="tabContent3" style="display: none;text-align:center"> <a href="#bb" id="aa" style="text-decoration: none;color: blue;">去底部</a> <form action="bestresult.html"> <table border="1" style="border-left-color: aqua; border-bottom-color: aqua; width: 100%;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 align="center"><td align="center" colspan="2">石家庄铁道大学北京地铁起点-终点查询</td></tr> <tr><td style="width: 50%" align="center">起点名称：</td><td> <input type="text" placeholder="请输入起点站点名称" name="namebegin"/></td></tr> <tr><td style="width: 50%" align="center">终点名称：</td><td> <input type="text" placeholder="请输入终点站点名称" name="nameend"/></td></tr> <tr> <td style="width: 50%" align="center" colspan="2"><input type="submit" value="查询"/><!--提交 value内的内容是按键内内容--></td> </tr> </table> </form> <a href="#aa" id='bb' style="text-decoration: none;color: blue;">去顶部</a> </div> <div id="tabContent4" style="display: none;text-align:center;"> <img id="obj" src="./images/p1.jpg" height="300" width="300" border="1" style="margin-top:10px;" /> </div> </div> <hr /> <div style="text-align: center; width: 100%; font-size: 12px; color: #333;">©版权所有：石家庄铁道大学信息科学与技术学院</div> </body> </html>
