组队作业3

关于组队作业，我们组已经完成的差不多，页面已经完善。 
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!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: #333333;
      text-decoration: none;
      font-size: 30px;
    }

/*鼠标悬停在链接上时*/
    a:hover {
      color: #b2c9d3;
      font-size: 31px;
    }

/*用户访问过的链接显示*/
    a:visited {
      color: #333333;
      font-size: 30px;
    }


    /*tab头的样式*/
    #tabsHead {
      padding-left: 520px;
      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;

    }
    .button {
      background-color:#FF0000;
      border: none;
      color: white;
      padding: 6px 15px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
    }
    .button{border-radius: 8px;}

    .ridge {
      border:2px ridge lightblue;
      outline-style: ridge;
      outline-color: white;
    }
    body {
      background-image: url("2.jpg");
      background-size:auto 1000px;
    }

  </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>
<div style="width: 100%; font-family: 微软雅黑; text-align: center; font-size: 20pt;">地铁查询系统</div>

<div id="tabDiv" style="width: 1470px">

  <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>
  </div>

  <!--换乘查询-->
  <div id="tabContent1" style="display: none">
    <form action="i1.jsp" method="get">
    <p style="text-align:center;color: black; font-family: 宋体; font-size: 20px">

      <br>出发地<input type="text/css" name="" style="height: 25px;" class="ridge" placeholder="请输入起点"/>
      目的地<input type="text/css" name="" style="height: 25px;" class="ridge" placeholder="请输入终点"/><br>
      <br><input type="submit" value="提交" class="button" /><br>
    </p>
    </form>
  </div>

  <!--线路查询-->
  <div id="tabContent2" style="display: none">
    <form action="i2.jsp" method="get">
    <p style="text-align:center;color: black; font-family: 宋体; font-size: 20px">

    <br><input type="text/css" name="" style="height: 25px;" class="ridge" placeholder="请输入要查询的路线"/><br>
     <br> <input type="submit" value="提交" class="button" /><br>
    </p>
    </form>
  </div>

  <!--站点查询-->
  <div id="tabContent3" style="display: none">
    <form action="i1.jsp" method="get">
    <p style="text-align:center;color: black; font-family: 宋体; font-size: 20px">

      <br><input type="text/css" name="" style="height: 25px;" class="ridge" placeholder="请输入要查询的站点"/><br>
      <br><input type="submit" value="提交" class="button" /><br>
    </p>
    </form>
  </div>

</div>
</body>
</html>

 

posted @ 2023-03-16 21:24  周＋⑦  阅读(12)  评论(0)    收藏  举报