2024年4月10号
所花时间:3小时
代码量(行):442行
博客量(篇):1篇
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>地铁线路查询系统</title> <link rel="stylesheet" href="style.css"> </head> <body> <script> function changePage(pagename){ var i,page; page=document.getElementsByClassName("page"); for(i=0;i<page.length;i++){ page[i].style.display="none"; } document.getElementById(pagename).style.display="block"; } </script> <div class="navbar"> <a href="#" onclick="changePage('trans')">换乘查询</a> <a href="#" onclick="changePage('line')">线路查询</a> <a href="#" onclick="changePage('station')">站点查询</a> </div> <div id="trans" class="page" style="display: block"> <h1>地铁换乘查询</h1> <form method="post" action="findresult.jsp"> <label> 出发地 <input type="text" placeholder="出发地" name="startplace"> </label> <br> <br> <label> 目的地 <input type="text" placeholder="目的地" name="endplace"> </label> <br> <br> <button type="submit">查询</button> </form> </div> <div id="line" class="page"> <h1>地铁线路查询</h1> <form method="post" action="findline.jsp"> <label> 线路名称 <input type="text" placeholder="线路名称" name="linename"> </label> <br> <br> <button type="submit">查询</button> </form> </div> <div id="station" class="page"> <h1>地铁站点查询</h1> <form method="post" action="findstation.jsp"> <label> 站点名称 <input type="text" placeholder="站点名称" name="placename"> </label> <br> <br> <button type="submit">查询</button> </form> </div> </body> </html>
.navbar{
background-color: #000dff;
overflow: hidden;
}
.navbar a{
float: left;
display: block;
color: #fff200;
text-align: center;
padding: 30px 50px;
text-display: none;
}
.navbar a:hover{
background-color: aliceblue;
color: black;
}
.page{
text-align: center;
display: none;
width: 100%;
height: 710px;
background-image: linear-gradient(to bottom right, rgb(250, 243, 108), rgb(10, 122, 250));
}
.page.active{
display:block;
}
.page input{
border-radius: 4px; /* 添加圆角边框 */
background-color: #f6e3e3; /* 自定义背景色 */
color: #000000; /* 自定义文字颜色 */
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15); /* 添加阴影效果 */
width: 190px;
padding: 7px;
}
.page button {
text-align: center;
padding: 10px;
margin: 0 auto;
width: 200px;
margin-top: 40px;
background-image: linear-gradient(to right, rgba(238, 10, 10, 0.61), #fab400);
color: #fff;
}