地铁系统

line.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
        *  {margin:0;padding:0;}/*去掉页面样式*/
           body{color:white;}
          .content{
              background-color:pink;
            left:0;
            max-width: 100%;
             height:120px;
             /*margin-top:00px;
              margin-left:00px;
              margin-right:600px;
            overflow:hidden;/*隐藏滚动条*/
        margin:50 auto;/*设置上右下左,居中显示*/
          
         }
           .content1{
              background-color:white;
            left:0;
            max-width: 100%;
             height:60px;
             /*margin-top:00px;
              margin-left:00px;
              margin-right:600px;
            overflow:hidden;/*隐藏滚动条*/
        margin:50 auto;/*设置上右下左,居中显示*/
          
         }
         .content2{
              background-color:purple;
            left:0;
            max-width: 100%;
             height:60px;
             /*margin-top:00px;
              margin-left:00px;
              margin-right:600px;
            overflow:hidden;/*隐藏滚动条*/
        margin:50 auto;/*设置上右下左,居中显示*/
         background:blue;
          
         }
         .main{
            text-align:center;/*文本居中*/
             width:100%;
             height:400px;
             padding:100px 0px;/*上下80px,左右为0*/
             background:white;/*验证div的位置*/
            margin:0 auto;/*设置上右下左,居中显示*/
            color:black;
           
         }
         .content h1{
             font-family:"LiSu";/*设置字体*/
             font-size:30px;/*设置字体大小*/
             font-weight:2px;/*调整字体粗细*/
             color:purple;/*设置字的颜色*/
        }
         .content h2{
             font-family:"YOUYUAN";/*设置字体*/
             font-size:25px;/*设置字体大小*/
             font-weight:1px;/*调整字体粗细*/
             color: purple;/*设置字的颜色*/
        }
        .content h3{
             font-family:"SONGTI";/*设置字体*/
             font-size:20px;/*设置字体大小*/
             font-weight:0.5px;/*调整字体粗细*/
             color: purple;/*设置字的颜色*/
        }
        .content2 h5{
               font-family:"宋体";/*设置字体*/
             font-size:25px;/*设置字体大小*/
             font-weight:2px;/*调整字体粗细*/
             color: white;/*设置字的颜色*/
        }   
        #slideShowContainer{
    width: 425px;
    height: 325px;
    margin-top: 10px;
    margin-left: 10px;
    overflow: hidden;
    position: relative;
}
#slideShowContainer img{
    width: 425px;
    height: 325px;
    transition: all 0.6s;
}
#slideShowContainer img:hover{
    transform: scale(1.07);
}
#picUl{
    list-style: none;
}
#dotUl{　　　　
    list-style: none;
    display: flex;
    flex-direction: row;
    position: absolute;　　//使用绝对布局，固定于左下角
    right: 21px;
    bottom: 15px;
    z-index: 2;　　//通过设置z-index的值大于#titleDiv中z-index的值，使其浮在标题栏的上方
    }
#titleDiv{
    position: absolute;
    width: 100%;
    height: 42px;
    bottom: 0px;
    left: 0px;
    background-color: #000000;
    opacity:0.6;　　//设置透明度，实现标题栏半透明效果
    z-index: 1;
}
#titleDiv>span{
    line-height: 42px;
    color: #FFFFFF;
    margin-left: 20px;
    width: 270px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#titleDiv>span>a{
    color: #FFFFFF;
}
.selected{
    width: 12px;
    height: 12px;
    background-color: #FFFFFF;
    color: transparent;
     margin-left: 9px;
}
.unselected{
    width: 12px;
    height: 12px;
    background-color: #0069AD;
    color: transparent;
    margin-left: 9px;
}
.hide{
    display: none;
}
.show{
    display: block;
}
p {
    font-size: 12pt;
    text-indent: 2em;
    color:#DDA0DD;
}
     </style>
</head>
<body>
<div class="content">
  <table>
   <tr>
    <td width="100px"><h1>北京</h1></td>
                    <td width="200"><h2>地铁服务系统</h2></td>
                   
   </tr>
  </table>
 </div>
 
 <div class="main">

    <%
         Object message = request.getAttribute("message");
         if(message!=null && !"".equals(message)){
     
    %>
         <script type="text/javascript">
              alert("<%=request.getAttribute("message")%>");
         </script>
    <%} %>
    <div align="center">
       
        
        <p><a href="main.jsp">返回首页</a></p>
        <table>
        <c:forEach items="${lines}" var="item">
                <tr>
                    <td>${item.stationname}</td>
                                   
                </tr>
            </c:forEach>
           
        </table>
        
    </div>
 
 </div>
 
 
</body>
</html>

main.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
body{
    background:white;
}
/*设置超链接样式*/

a {
    color: #84C1FF;
    text-decoration: none;
    font-size: 12px;
}

a:hover {
    color: #84C1FF;
    text-decoration: underline;
    font-size: 12px;
}

a:visited {
    color: #84C1FF;
    font-size: 12px;
}
.touxiang{
    padding-left:0px;
    width:100%;
    height:auto;
    float:left;
    margin-left:30px;
    margin-top:20px;
    
    text-align:center;
}
/*整个tab层居中，宽度为600px*/
#tabDiv {
    width:100%;
    margin: 1em auto;
    padding-bottom: 10px;
    background:white;
}
/*tab头的样式*/
#tabsHead {
    padding-left: 0px;
    height: 35px;
    background-color: #003D79;
    font-size: 1em;
    margin: 1px 0px 0px;
    color: #003D79;
    font-weight:bold;
    line-height: 35px;

}
/*已选tab头（超链接）的样式*/
.curtab {
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    border-right: #003D79 1px solid;
    font-weight: bold;
    float: left;
    cursor: pointer;
    background: #003D79;
}
/*未选tab头（超链接）的样式*/
.tabs {
    border-right: #4F4F4F 1px solid;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    font-weight: bold;
    float: left;
    cursor: pointer;
    background: #003D79;
}
p {
    font-size: 12pt;
    text-indent: 2em;
    color:#84C1FF;
}

</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; color:#84C1FF">北京地铁查询系统</div>

    <div id="tabDiv" style="width: 100%">

        <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: block" target="hideIframe1">
            <div class="touxiang">
                <p>请输入需查询线路：<input type="text" name="xianlu"/>
                <input type="submit" value="查看" formaction="ditieServlet?method=show" formmethod="post"></p>              
                <iframe name="hideIframe1" src="show.jsp" frameborder="0" width="800px" height="1000px"></iframe>
            </div>
        </div>
        
        <!--站点查询-->
        <div id="tabContent2" style="display: none" target="hideIframe2">
            <div class="touxiang">
                <p>请输入需查询站点：<input type="text" name="name1"/>
                <input type="submit" value="查询" formaction="ditieServlet?method=show1" formmethod="post"></p>
                <iframe name="hideIframe2" src="show1.jsp" frameborder="0" width="800px" height="1000px"></iframe>
            </div>
        </div>
        
        <!--换乘查询-->
        <div id="tabContent3" style="display: none" target="hideIframe3">
            <div class="touxiang">
                <p>换乘查询：</p>
                <p>请输入起始站：<input type="text" name="name1"/></p>
                <p>请输入终点站：<input type="text" name="name2"/></p>
                <input type="submit" value="查询" formaction="ditieServlet?method=show" formmethod="post"></p>
                <iframe name="hideIframe3" src="show2.jsp" frameborder="0" width="800px" height="1000px"></iframe>
            </div>
        </div>

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

show.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示页面</title>

<style type="text/css">

table{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
}
th{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe;
    border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: #039;
}
td{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid transparent;
}
tr:hover td{
    background: #d0dafd;
    color: #339;
}


</style>

</head>
<body>


 
 <div class="main">

    <%
         Object message = request.getAttribute("message");
         if(message!=null && !"".equals(message)){
     
    %>
         <script type="text/javascript">
              alert("<%=request.getAttribute("message")%>");
         </script>
    <%} %>
    <div align="center">
    <img alt="北京地铁线路图" src="image/rount.jpg" width="800px" height="400px" />
        <form>
    <table>
        <tr>
            <td>名称</td>
        </tr>
        <tr>
            <c:forEach items="${list}" var="item">
                <tr>
                    <td>${item.stationname}</td>
                    
                    
                </tr>
            </c:forEach>
        </tr>
        <tr>
            
        </tr>
    </table>
    </form>
    </div>
 
 </div>
 
 
 
    
</body>
</html>

show1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示页面</title>
</head>

<style type="text/css">

table{
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    font-size: 12px;
    margin: 45px;
    width: 480px;
    text-align: left;
    border-collapse: collapse;
}
th{
    font-size: 13px;
    font-weight: normal;
    padding: 8px;
    background: #b9c9fe;
    border-top: 4px solid #aabcfe;
    border-bottom: 1px solid #fff;
    color: #039;
}
td{
    padding: 8px;
    background: #e8edff; 
    border-bottom: 1px solid #fff;
    color: #669;
    border-top: 1px solid transparent;
}
tr:hover td{
    background: #d0dafd;
    color: #339;
}


</style>

</head>
<body>
<div class="content">

 </div>
 
 <div class="main">

    <%
         Object message = request.getAttribute("message");
         if(message!=null && !"".equals(message)){
     
    %>
         <script type="text/javascript">
              alert("<%=request.getAttribute("message")%>");
         </script>
    <%} %>
    <div align="center">

    <img alt="北京地铁线路图" src="image/rount.jpg" width="800px" height="400px" />
    <form>
    <table>
        <tr>
            <td>名称</td>

        </tr>
        <tr>
            <c:forEach items="${list}" var="item">
                <tr>
                    <td>${item.lineid}</td>

                </tr>
            </c:forEach>
        </tr>
        <tr>
            
        </tr>
    </table>
    </form>
    </div>
 
 </div>
 
 
 
    
</body>
</html>

 

posted @ 2022-04-09 22:57  慢漫曼蔓  阅读(49)  评论(0)    收藏  举报